List 性能中的 React.cloneElement答案

【问题标题】：React.cloneElement in List performanceList 性能中的 React.cloneElement
【发布时间】：2019-07-22 03:50:24
【问题描述】：

我对 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>
        );
      }
...

【问题讨论】：

标签： javascript reactjs performance material-ui

【解决方案1】：

在一些 JSX 中间看到 React.cloneElement 可能看起来有点可怕和陌生，但从性能的角度来看它是非常良性的。要意识到的是 JSX 被转换为对 React.createElement 的调用，它只返回一个对象。 React.cloneElement 只是复制该对象并允许您在此过程中修改道具。除了 prop 更改之外，生成的对象在 React 中看起来与通过 JSX 创建的原始对象没有什么不同，并且它不会导致额外的渲染产生有害影响。与如果您有一个函数通过接收一组对象并创建一个包含这些对象的副本的新数组以及其他属性来转换某些数据相比，性能影响并不重要。

Material-UI 在许多地方内部利用 React.cloneElement 为子级添加额外的道具，例如 Radio.js。

【讨论】：