时间戳

首页 > 解决方案 > 在功能性 React 组件中使用 .bind() 是否推荐？

javascript - 在功能性 React 组件中使用 .bind() 是否推荐？

问题描述

我在我们的代码审查期间看到了下面的这种语法，这是我第一次看到它，我在网上找不到任何关于它被使用/推荐的文章——通常我会选择箭头函数或useCallback在这个用例中。只是好奇这里是否有其他人使用它，如果是，您能否提供一些参考资料或一篇文章说它是安全的或建议使用它。

function DummyComponent({ onBtnClick }) {
  const [data, setData] = useState('some-data-that-only-exists-here');

  return (
    <div>
      <button onClick={onBtnClick.bind(null, dummyData)} />
    </div>
  )
}

有人告诉我，这可以防止在重新渲染时重新创建该功能。此外，在编写测试期间，它传递了一个似乎是 HTML 按钮的类的类作为第二个参数，onBtnClick这是我不同意这一点并需要一些参考的原因之一。

在此处输入图像描述

标签： javascriptreactjs

解决方案

虽然在技术上是可行的，但通常使用.bindor.call或.apply代替匿名函数来更改this函数内部。在这里，您并不关心this，因此如果您使用匿名函数代替，它可能会更直观地进行读写。

<button onClick={() => onBtnClick(dummyData)} />

或者在返回 JSX 之前在外面创建一个高阶函数：

const makeOnBtnClick = arg => () => onBtnClick(arg);

<button onClick={makeOnBtnClick(dummyData)} />

有人告诉我，这可以防止在重新渲染时重新创建该功能。

不，每次渲染部分（.bind运行）时都会创建一个新函数，因此每次都会附加一个新函数作为点击处理程序。如果这是您真正担心的事情（您可能不应该担心），那useCallback将是一种具有更持久功能的方法，该功能不必在渲染时删除/重新创建 - 就像您提到的那样。

推荐阅读