为什么将componentDidMount更改为非箭头函数使热重加载再次工作？

Question

对于我的中的一个屏幕，热重加载不起作用。我发现解决办法是改变这个

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

到这个

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

所以我所做的就是把componentDidMount从箭头函数改为非箭头函数。所以我的问题是：

为什么将其更改为非箭头函数使热重加载再次工作？我知道，使其成为非箭头函数意味着，如果函数是从其他上下文调用的，那么this的值将被重新绑定到函数被调用的上下文中，而对于箭头函数，它将始终绑定到定义它的组件。但是这对热重装有什么影响呢？热重新加载会导致componentDidMount从不同的上下文调用，而this会重新绑定吗？如果是的话，这会对热重装产生什么影响？

谢谢!

更新

一些用户询问这是(Methods in ES6 objects: using arrow functions)或(Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?)的副本。

这两种方法都不是重复的。请注意，我确实概述了箭头函数和非箭头函数之间的区别。我的问题是如何将这些差异具体应用于热重加载。

Answer 1

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

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

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

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

方法声明为

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

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