5

对于我的 React Native 应用程序中的一个屏幕，热重载不起作用。我发现解决方案是改变这个

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

对此

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

所以我所做的只是componentDidMount从箭头函数变为非箭头函数。所以我的问题是：

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

谢谢！

更新

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

这不是其中任何一个的副本。请注意，我确实概述了箭头函数和非箭头函数之间的区别。我的问题是这些差异如何特别适用于热重载。

4

1 回答 1

1

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

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

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

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

当方法声明为

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

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

于 2019-02-25T17:26:24.740 回答