Почему изменение componentDidMount на функцию без стрелки заставляет горячую перезагрузку работать снова?

Для одного экрана в моем приложении React Native горячая перезагрузка не работала. Я обнаружил, что решение было изменить это

componentDidMount = () => {
  <...do stuff with this.props...>
}

к этому

componentDidMount() {
  <...do stuff with this.props...>
}

Так что все, что я сделал, это изменилось componentDidMount от функции стрелки к функции без стрелки. Итак, мой вопрос:

Почему переключение на функцию без стрелки заставляет горячую перезагрузку работать снова? Я знаю, что если сделать функцию не стрелкой, это означает, что если функция вызывается из какого-то другого контекста, значение this будет привязан к контексту, в котором вызывается функция, тогда как с помощью функции стрелки она всегда будет привязана к компоненту, в котором она была определена. Но как это влияет на горячую перезагрузку? Вызывает ли горячая перезагрузка componentDidMount чтобы позвонить из другого контекста, и this получить повторно? Если так, как это повлияет на горячую перезагрузку?

Спасибо!

ОБНОВИТЬ

Некоторые пользователи спрашивали, является ли это дубликатом ( Методы в объектах ES6: использование функций со стрелками) или ( Функция стрелки по сравнению с объявлением / выражениями функций: являются ли они эквивалентными / заменяемыми?)

Это не дубликат ни того, ни другого. Обратите внимание, что я обрисовал различия между функциями со стрелками и без стрелок. Мой вопрос о том, как эти различия относятся именно к горячей перезагрузке.

1 ответ

Я думаю, что когда метод объявлен как

componentDidMount () {
   <... do stuff with this.props ...>
}

это позволяет интерпретатору оптимизировать код, потому что это метод класса - он не принадлежит самому классу, но не изменяется от объекта к объекту.

т.е. есть класс A и метод b - во всех экземплярах класса A метод b будет одинаковым, и оптимизатор сможет его увидеть и оптимизировать

когда метод объявлен как

componentDidMount = () => {
   <... do stuff with this.props ...>
}

он фактически создает метод для каждого экземпляра A, и поэтому оптимизатор видит разные методы b и не может оптимизировать

Другие вопросы по тегам