传递 onChange 道具时绑定与箭头函数（反应）答案

【问题标题】：Bind vs Arrow Function when passing onChange props (React)传递 onChange 道具时绑定与箭头函数（反应）
【发布时间】：2022-01-06 16:32:51
【问题描述】：

当我们将箭头函数传递给事件处理程序时，即onClick={() => myFunction()}，我们会导致不必要的重新渲染，因为这是一个函数定义。

当我们在事件处理程序上调用函数并想要访问this 时，是否应该使用onClick={myFunction.bind(this)} 而不是箭头函数？由于它只是使用对函数的引用，因此我们不会每次都重新渲染。

以上理解正确吗？如果是这样，我们为什么要使用箭头函数作为事件处理程序道具？似乎自从引入 ES6 以来，通常不建议像我们在这里那样使用 .bind，但是由于它不会导致不必要的重新渲染，这不应该是最佳实践吗？

【问题讨论】：

什么是myFunction？它甚至使用this 吗？看起来不像，因为您的箭头函数不包含方法调用。你可能应该只做onClick={myFunction}！
也为myFunction.bind(this) 创建了一个新函数。不同之处在于当您不在渲染中创建新函数时，例如，您可以在 ctor 中使用 bind，或者使用箭头函数属性并编写 onClick={myFunction}。跨度>
我不认为onClick={() => myFunction()} 本身会导致重新渲染，因为它没有操纵状态。但是，在重新渲染时，将再次创建匿名函数。（想一想：如果函数定义本身导致了重新渲染，那不就是一个无限循环的重新渲染并且永远不会加载吗？）
“我们正在导致不必要的重新渲染，因为这是一个函数定义。” - 实际上不，这在很大程度上只是一个神话。仅当子组件中的任何重新渲染实际上取决于函数相等性（例如记忆值）时，才需要使用useCallback。

【解决方案1】：

由于它只是使用对函数的引用，我们不会每次都重新渲染

你错了。

bind 方法返回一个新函数（因此会触发重新渲染）。

为避免重新渲染，请使用 useCallback 挂钩。

或者，由于您似乎没有在 myFunction 中使用 this（否则 () => myFunction() 会破坏它），只需传递 myFunction 本身而不创建新函数。

onClick={myFunction}

【讨论】：