[英]React.cloneElement { ReactComponent as SomeSVG }
[英]React.cloneElement in List performance
我对 List 中的 React.cloneElement 有疑问。 如果列表中有很多元素,我们是否应该避免这样做? React.cloneElement 是否会进行可以避免的不必要的重新渲染?
我的组件:
...
render() {
const { items, classes, children } = this.props;
const { expanded } = this.state;
return (
<List className={classes.cssRoot}>
<Scrollbars
style={classes.cssScrollBar}
renderThumbVertical={this.renderThumb}
>
{items.map((item, index) => {
return (
<ListItem key={item.id} className={classes.cssListItemRoot}>
{React.Children.map(children, child =>
React.cloneElement(child, {
id: item.id,
name: `Item nummber ${index}`,
handleChange: this.handleChange,
isExpanded: expanded === item.id
})
)}
</ListItem>
);
})}
</Scrollbars>
</List>
);
}
...
在一些 JSX 中间看到React.cloneElement
可能看起来有点可怕和陌生,但从性能的角度来看它是非常良性的。 需要意识到的是 JSX 被转换为对React.createElement
调用, React.createElement
返回一个对象。 React.cloneElement
只是复制该对象并允许您在此过程中修改道具。 除了 prop 更改之外,生成的对象在 React 中看起来与通过 JSX 创建的原始对象没有什么不同,并且就导致额外渲染而言没有有害影响。 如果您有一个函数通过接收对象数组并使用这些对象的副本创建一个新数组来转换某些数据并具有附加属性,那么性能影响就不再是问题了。
Material-UI 在内部的许多地方利用React.cloneElement
为孩子添加额外的道具,例如在Radio.js
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.