我今天开始使用新的棉短绒(tslint-react),它给了我以下警告:
“由于Lambda会影响渲染性能,因此在JSX属性中被禁止”
我知道这将导致每个渲染都创建一个新函数。而且它可能会触发不必要的重新渲染,因为子组件会认为它的道具已更改。
但是我的问题是,循环中如何将参数传递给事件处理程序:
customers.map( c => <Btn onClick={ () => this.deleteCust(c.id) } /> );
绝对不是反模式。
Lambda(箭头功能)对渲染性能没有影响。
唯一有影响的是的实现shouldComponentUpdate。true默认情况下,此函数返回,这意味着始终渲染组件。这意味着即使道具没有变化,该组件仍会再次渲染。这是默认行为。
shouldComponentUpdate
true
如果不实现,将箭头功能更改为绑定方法将不会提高性能shouldComponentUpdate。
的确,不使用箭头功能可以简化的实现,shouldComponentUpdate因此不应将其与PureComponent反函数一起使用,但它们不是反模式。它们可以简化许多模式,例如,在向功能添加附加参数时(例如,示例中的操作)。
PureComponent
还要注意,React有无状态的组件甚至无法实现shouldComponentUpdate,因此它们总是被渲染。
在真正发现性能问题之前,请不要考虑性能影响。