React组件属性中的匿名函数有多么不可靠？

Question

你不应该在反应属性中使用匿名函数，例如

<a onClick=()=>doIt('myId')>Aaron</a>

我理解为什么这会为React的协调造成性能问题，因为匿名函数会在每个渲染过程中重新创建，因此总会触发某种真正的DOM重新渲染。我的问题是，对于一个小组件（即不是每一行都有链接的表）这是微不足道的吗？我的意思是，React足够智能只是为了替换处理程序，而不是重新渲染DOM，对吧？所以成本不是那么高吗？

Answer 1

有关：

• 小组件：你没事（几乎没有性能问题）
• 大型组件：越深入，越多尝试避免它

在React documentation about event handling中，您可以找到：

  

在大多数情况下，这很好。但是，如果将此回调作为prop传递给较低组件，则这些组件可能会执行额外的重新渲染。我们通常建议在构造函数中使用绑定或使用类字段语法来避免这种性能问题。

注意：React不会以不同于其他道具的方式处理回调道具。它总是比较旧的和新的道具。因此，当存在匿名函数时它会重新呈现，因为匿名函数总是新创建的。

Answer 2

您的JSX代码示例应该看起来像这样：

<a onClick={ ()=>doIt('myId') }>Aaron</a>

使用这样的匿名胖箭头功能是完全有效的。 应该在react属性中使用匿名函数。 没关系。

是的，不是最佳做法。如果你想解决the this context issue when using the ES6 class extends React.Component syntax，我会建议你在类构造函数中绑定函数。

不，对于'小'组件（即不是每行都有链接的表），这不是一个无关紧要的性能问题。你很安全。