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

Question

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

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

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

Answer 1

Since it is only using a reference to the function, we are not causing a re-render each time

你错了。

bind方法returns一个新函数（所以会触发重新渲染）。

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

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

onClick={myFunction}

Bind vs Arrow Function when passing onChange props (React)