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

Инструмент проверки кода React направлен на улучшение практики написания кода, выявляя потенциальные проблемы. Одно из распространенных сообщений об ошибке: «В реквизитах JSX не следует использовать функции стрелок». Это указывает на пагубные последствия использования стрелочных функций или привязки в реквизитах JSX.

Почему стрелочные функции и привязка снижают производительность

Включение стрелочных функций или привязок в реквизиты JSX имеет последствия для производительности:

• Сборка мусора: Каждый раз, когда выполняется стрелочная функция создается, предыдущий отбрасывается. Если несколько элементов визуализируются с помощью встроенных функций, это может привести к прерывистой анимации.
• Повторный рендеринг: Встроенные функции стрелок мешают механизмам поверхностного сравнения, используемым PureComponents и компонентами, использующими метод mustComponentUpdate. Поскольку свойство функции стрелки каждый раз воссоздается, это определяется как изменение свойства, вызывающее ненужный повторный рендеринг.

Влияние встроенных обработчиков на повторный рендеринг

Рассмотрите эти примеры:

Пример 1: PureComponent без Inline Обработчик

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    console.log('render button');
    return Click;
  }
}

В этом коде компонент Button выполняет повторную визуализацию только при изменении его свойств, как и ожидалось для PureComponent.

Пример 2: PureComponent со встроенным обработчиком

const Button = (props) => {
  console.log('render button');
  return  props.onClick()}>Click;
};

Благодаря встроенной функции стрелки Button теперь каждый раз перерисовывается, даже если состояние компонента остается неизменным. Такой ненужный повторный рендеринг может существенно повлиять на производительность.

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

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

• Определите обработчики событий вне JSX: Извлеките стрелочные функции или привяжите методы в отдельную переменную объявления.
• Используйте эту привязку: Для компонентов класса привяжите обработчики событий к этому в конструкторе.
• Используйте функции высшего порядка: Рассмотрите использование функций более высокого порядка, таких как Map или BindActionCreators, для более эффективной обработки событий в JSX.