gpt4 book ai didi

javascript - React.cloneElement 在 List 中的表现

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:29:41 24 4
gpt4 key购买 nike

我对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 可能看起来有点可怕和陌生,但从性能的 Angular 来看它是非常良性的。要意识到的是,JSX 被转换为对 React.createElement 的调用。它只返回一个对象。 React.cloneElement只是复制该对象并允许您在此过程中修改 Prop 。除了 prop 更改之外,生成的对象在 React 中看起来与通过 JSX 创建的原始对象没有什么不同,并且就导致额外渲染而言,它没有有害影响。性能影响并不比您有一个函数正在转换一些数据更令人担忧,该函数通过接收一个对象数组并创建一个包含具有附加属性的这些对象的副本的新数组。

Material-UI 在许多地方内部利用 React.cloneElement 为 child 添加额外的 Prop ,例如 Radio.js .

关于javascript - React.cloneElement 在 List 中的表现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54922160/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com