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

Question

我在代码审查期间看到了下面的这个语法，这是我第一次看到它，我在网上找不到任何关于它被使用/推荐的文章 - 通常我会选择箭头函数或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触发时的第二个参数，这是我不同意这一点并需要一些参考的原因之一。

Answer 1

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

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

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

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

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

有人告诉我，这会阻止在重新渲染时重新创建该函数。

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