为什么将componentDidMount更改为非箭头功能会使热重装再次工作？

Question

对于我的React Native应用程序中的一个屏幕，无法进行热重装。我发现解决方案是改变这一点

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

对此

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

因此，我所做的只是将componentDidMount箭头功能更改为非箭头功能。所以我的问题是：

为什么将其更改为非箭头功能会使热重装再次工作？我知道使其成为非箭头函数意味着如果从其他上下文调用该函数，则其值this将被重新绑定到调用该函数的上下文中，而使用箭头函数将始终被绑定到定义它的组件。但这如何影响热装？热重装是否会导致componentDidMount从其他上下文调用并this重新绑定？如果是这样，那将如何影响热装？

谢谢！

更新

一些用户问这是否是（ES6对象中的方法：使用箭头函数）或（箭头函数与函数声明/表达式：它们是否等效/可互换？）的重复项。

这不是这两个的重复。请注意，我确实概述了箭头功能和非箭头功能之间的区别。我的问题是这些差异如何专门应用于热重装。

Answer 1

我认为当一个方法被声明为

\n\n

componentDidMount () {\n\xc2\xa0\xc2\xa0 <... do stuff with this.props ...>\n}\n

\n\n

它使解释器能够优化代码，因为它是一个类方法 - 它不属于类本身，但它不会因对象而异。

\n\n

即有一个类 A 和方法 b - 在类 A 的所有实例中，方法 b 都是相同的，优化器可以看到它并优化它

\n\n

当该方法声明为

\n\n

componentDidMount = () => {\n\xc2\xa0\xc2\xa0 <... do stuff with this.props ...>\n}\n

\n\n

它实际上为每个实例 A 创建一个方法，因此优化器看到不同的方法 b 并且无法优化

\n