列表性能中的 React.cloneElement

Question

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

Answer 1

在一些 JSX 中間看到React.cloneElement可能看起來有點可怕和陌生，但從性能的角度來看它是非常良性的。 需要意識到的是 JSX 被轉換為對React.createElement調用， React.createElement返回一個對象。 React.cloneElement只是復制該對象並允許您在此過程中修改道具。 除了 prop 更改之外，生成的對象在 React 中看起來與通過 JSX 創建的原始對象沒有什么不同，並且就導致額外渲染而言沒有有害影響。 如果您有一個函數通過接收對象數組並使用這些對象的副本創建一個新數組來轉換某些數據並具有附加屬性，那么性能影響就不再是問題了。

Material-UI 在內部的許多地方利用React.cloneElement為孩子添加額外的道具，例如在Radio.js 。