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

Question

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

class {
   on = () => true
   render = () => <z on={this.on} />
}

против

class {
   render = () => <z on={() => true} />
}

Например,Есть ли оптимизация, которую делают браузеры?Есть ли различия в реализации?

Если есть нулевые различия, имеет ли смысл что-то вроде bable для преобразования кода, чтобы избежать создания функции в функции render?

Answer 1

С точки зрения Reactjs, поскольку функция стрелки каждый раз создает новую функцию, она может потенциально вызывать две проблемы, связанные с производительностью:

• Может вызывать сборщик мусора чаще, чем обычно
• Будет вызывать ненужный повторный рендеринг ваших компонентов (даже чистых компонентов), поскольку новая функция будет рассматриваться как новый объект.

Уже существует плагин babel, который решает эту проблему повторного рендеринга.вызвано использованием стрелки fn: reflective-bind Выгода от использования этого плагина была описана здесь