[转]为啥在 React 的 Render 中使用箭头函数和 bind 会造成问题

Posted 2023-03-15

参考技术A

原文转自https://zhuanlan.zhihu.com/p/29266705

在 render 中使用箭头函数或绑定会导致子组件重新渲染，即使 state 并没有改变。作者推荐使用提取子组件或在 html 元素中传递数据的方式来避免绑定。
这个例子中，我在 render 中使用一个箭头函数来绑定每个删除按钮对应的用户 ID。

点击 CodeSandbox 来查看及演示完整的 demo。（CodeSandbox 很酷，是一个 React 在线编辑器，可以实时编译和展示当前的界面。）

在 35 行中，我使用了一个箭头函数将一个值传递给了 deleteUser 函数，这就是问题的所在。

要查看为什么会这样，先来看看 User.js：

每次 render 调用时，控制台上都会打印日志。User 已经被声明为 PureComponent。所以 User 应该只在 props 或者 state 改变时才会重新 render。但是，当你点击 delete 按钮时， 对于每一个 User 实例，都会调用 render 。

原因在于：父组件在 props 中传递了一个箭头函数。 箭头函数在每次 render 时都会重新分配（和使用 bind 的方式相同） 。所以，尽管我将 User 声明为 PureComponent，User 的父组件中的箭头函数导致 User 组件为所有的用户实例传递了一个新的函数。所以当点击任何删除按钮时，每个用户实例都会重新 render。

结论：

避免在 render 中使用箭头函数和绑定。否则会打破 shouldComponentUpdate 和 PureComponent 的性能优化。

先来看个例子比较一下在 render 中不使用箭头函数的差异。

点击 CodeSandbox 查看和运行完整 demo。

在这个例子中，index.js 的 render 中没有箭头函数了。相关的数据被传到 User.js：

在 User.js 中，onDeleteClick 调用了在 props 中传递的 onClick 函数，并传递了相应的 user.id。

当你再次点击 delete 按钮时，其他的用户再也不会调用 render 了！

为了最佳性能：

React + Redux 性能优化（一）：理论篇