reactjs - JSX 属性中的 Lambda 是反模式吗？

Question

我今天开始使用新的 linter (tslint-react)，它给了我以下警告:

“由于 Lambda 会影响渲染性能，因此在 JSX 属性中禁止使用 Lambda”

我知道这会导致每次渲染时创建一个新函数。并且它可能会触发不必要的重新渲染，因为子组件会认为它的 props 已经改变。

但我的问题是，除此之外如何才能将参数传递给循环内的事件处理程序:

customers.map( c => <Btn onClick={ () => this.deleteCust(c.id) } /> );

Answer 1

绝对不是反模式。

Lambda(箭头函数)对渲染性能没有影响。

唯一有影响的是shouldComponentUpdate的实现。默认情况下，此函数返回 true，这意味着组件始终处于渲染状态。这意味着即使 props 没有改变，组件仍然会再次渲染。这是默认行为。

如果不实现 shouldComponentUpdate，将箭头函数更改为绑定(bind)方法不会提高性能。

确实，不使用箭头函数可以简化 shouldComponentUpdate 的实现，并且它们不应该与 PureComponent 一起使用，但它们不是反模式。它们可以简化许多模式，例如向函数添加附加参数时(例如您在示例中所做的操作)。

另请注意，React 具有无状态组件，它们甚至无法实现 shouldComponentUpdate，因此它们始终会被渲染。

在真正发现性能问题之前，不要考虑性能影响。