Возьмите пример обработки событий

Question

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
   // This syntax ensures `this` is bound within handleClick
   return (
   <button onClick={(e) => this.handleClick(e)}>
     Click me
   </button>
   );
  }
}

Проблема с этим синтаксисом заключается в том, что каждый раз при рендеринге LoggingButton создается другой обратный вызов.В большинстве случаев это нормально.Однако, если этот обратный вызов передается в качестве поддержки более низким компонентам, эти компоненты могут выполнить дополнительный повторный рендеринг.Мы обычно рекомендуем связывание в конструкторе или использование синтаксиса полей класса, чтобы избежать такого рода проблем с производительностью.

Я не понимаю, что такое дополнительный повторный рендеринг.Можете привести примеры

Answer 1

Дополнительное повторное рендеринг - это повторное рендеринг, когда в этом нет необходимости.
Компонент переопределяется при изменении его реквизита или состояния.В этом примере дочерний компонент кнопки получает обратный вызов в качестве подпорки.
Поскольку обратный вызов воссоздается каждый раз при рендеринге родительского компонента, дочерний / кнопочный компонент будет перерисовываться без необходимости (обратный вызов всегда одинаков, но способ егоопределяется в этом примере и создает его заново, как если бы он отличался от предыдущего «воплощения» в предыдущем рендере).