Проблема с производительностью при деструктурировании реквизита методом рендеринга React

Question

Мне было интересно, увидит ли снижение производительности реквизит метода рендеринга производительность, так как каждый раз, когда вы создаете их, создается новая константа, а во время поверхностного сравнения (если вы используете PureComponent) - мелкая Сравнение вернет false, что приведет к повторному отображению любых дочерних элементов.

Пример ниже:

export default class Input extends React.PureComponent {

  render () {

    // creating new constants, that in case they are no primitives
    // will return false when shallow comparing them and trigger
    // child component re-render

    const { type, value, required } = this.props

    return (
      <div className={cx('Input')}>
        <APureComponent type={type} value={value} required={required} />
      </div>
    )
  }
}

Answer 1

Если бы вы деструктурировали объект из this.props, значением в новой переменной был бы указатель на этот объект, строка. Это та же самая примитивная строка, которая будет отправлена, если вы передадите this.props.complexObject непосредственно в качестве реквизита. Поэтому, если ссылка на объект одинакова, то поверхностное сравнение PureComponent будет возвращать true.

Это может привести к проблемам, если вы измените сложный объект, так как указатель останется прежним, а PureComponent не обновится. Вот почему при изменении какого-либо значения в вашем сложном объекте вы хотите сделать полный клон и передать его. Это будет новый указатель, который будет захвачен мелким сравнением и обновлением PureComponent.