Почему использование стрелочных функций или привязок в реквизитах JSX запрещено

При использовании React важно избегать использования стрелочных функций или привязка в реквизитах JSX. Такая практика может привести к проблемам с производительностью и некорректному поведению.

Проблемы с производительностью

Использование функций стрелок или привязки в реквизитах JSX приводит к тому, что эти функции воссоздаются при каждом рендеринге. Это означает, что:

• Старая функция отбрасывается, вызывая сборку мусора.
• Непрерывный рендеринг многих элементов может привести к снижению производительности.
• Компоненты, использующие PureComponents или должен ComponentUpdate по-прежнему запускать повторную визуализацию из-за изменения функции стрелки. prop.

Неверное поведение

Рассмотрите следующий пример:

onClick={() => this.handleDelete(tile)}

Этот код будет создавать новую функцию при каждом рендеринге, в результате чего React помечает компонент как грязный и запускает повторный рендеринг. Даже если свойство плитки не изменилось, компонент будет повторно отображаться, поскольку функция стрелки отличается.

Рекомендации

Чтобы избежать этих ошибок, используйте следующие рекомендации:

• Привяжите обработчик событий в конструктор:

constructor(props) {
  super(props);
  this.handleDelete = this.handleDelete.bind(this);
}

• Создайте стрелочную функцию вне метода рендеринга:

const handleDelete = tile => {
  // Handle delete logic
};

Дополнительное примечание:

Важно отметить, что функции стрелок прекрасно работают при использовании в других частях компонента, например, в методе рендеринга. Однако их следует избегать при назначении обработчиков событий реквизитам JSX.