React.cloneElement в списке производительности

Question

У меня есть сомнения по поводу 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

Вид React.cloneElement в середине какого-то JSX может выглядеть немного страшно и незнакомо, но это очень мягко с точки зрения производительности.Необходимо понять, что JSX преобразуется в вызовы React.createElement, которые просто возвращают объект.React.cloneElement просто копирует этот объект и позволяет вам изменять реквизиты в процессе.Результирующий объект будет выглядеть не иначе, как React, чем исходный объект, созданный с помощью JSX, кроме изменений в подпорке, и он не будет иметь вредных последствий, поскольку вызывает дополнительные рендеры.Влияние на производительность не вызывает больше беспокойства, чем если бы у вас была функция, которая преобразовывала некоторые данные, принимая массив объектов и создавая новый массив с копиями этих объектов с дополнительным свойством.

Material-UI* React.cloneElement использует внутренне в нескольких местах, чтобы добавить дополнительные реквизиты для детей, таких как RadioGroup.js.