小编典典

JSX属性中的Lambda是否是反模式?

reactjs

我今天开始使用新的棉短绒(tslint-react),它给了我以下警告:

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

我知道这将导致每个渲染都创建一个新函数。而且它可能会触发不必要的重新渲染,因为子组件会认为它的道具已更改。

但是我的问题是,循环中如何将参数传递给事件处理程序:

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

阅读 278

收藏
2020-07-22

共1个答案

小编典典

绝对不是反模式。

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

唯一有影响的是的实现shouldComponentUpdatetrue默认情况下,此函数返回,这意味着始终渲染组件。这意味着即使道具没有变化,该组件仍会再次渲染。这是默认行为。

如果不实现,将箭头功能更改为绑定方法将不会提高性能shouldComponentUpdate

的确,不使用箭头功能可以简化的实现,shouldComponentUpdate因此不应将其与PureComponent反函数一起使用,但它们不是反模式。它们可以简化许多模式,例如,在向功能添加附加参数时(例如,示例中的操作)。

还要注意,React有无状态的组件甚至无法实现shouldComponentUpdate,因此它们总是被渲染。

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

2020-07-22