Question

我对List中的React.cloneElement有疑问。如果列表中有很多元素，那是我们应该避免做的事情吗？ React.cloneElement是否进行了可以避免的不必要的重新渲染？

我的组件

...
      render() {
        const { items, classes, children } = this.props;
        const { expanded } = this.state;
        return (
          <List className={classes.root}>
            <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: `Plan nummber ${index}`,
                        handleChange: this.handleChange,
                        isExpanded: expanded === item.id
                      })
                    )}
                  </ListItem>
                );
              })}
            </Scrollbars>
          </List>
        );
      }
...

Answer 1

在某些JSX中看到React.cloneElement看起来有点吓人和陌生，但是从性能的角度来看这是非常好的。要实现的事情是，JSX被转换为对React.createElement的调用，该调用仅返回一个对象。 React.cloneElement只是复制该对象，并允许您在此过程中修改道具。除了属性更改外，生成的对象在React上看起来与通过JSX创建的原始对象没有什么不同，并且除了引起额外的渲染外，它没有有害影响。与性能影响相比，如果您拥有一个通过获取对象数组并使用包含这些对象的副本的附加属性创建新数组来转换某些数据的函数，就不会再担心了。

Material-UI在许多地方内部利用React.cloneElement在诸如RadioGroup.js中为孩子添加其他道具。

React.cloneElement在列表中的表现

1 个答案: