javascript – 为什么将componentDidMount更改为非箭头功能会使热重新加载再次起作用？

2023年4月23日 140次阅读

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

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

对此

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

所以我所做的就是将componentDidMount从箭头函数更改为非箭头函数.所以我的问题是：

为什么将其更改为非箭头功能会使热重新加载再次起作用？我知道使它成为非箭头函数意味着如果函数是从其他某个上下文调用的,那么它的值将重新绑定到调用函数的上下文,而使用箭头函数它将始终是绑定到定义它的组件.但这如何影响热重装？热重新加载会导致componentDidMount从不同的上下文调用,而这会重新绑定吗？如果是这样,那将如何影响热重装？

谢谢！

UPDATE

一些用户询问这是否与(Methods in ES6 objects: using arrow functions)或(Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?)重复

这与其中任何一个都不重复.请注意,我确实概述了箭头和非箭头功能之间的区别.我的问题是这些差异如何适用于热重新加载.

最佳答案 我认为当一个方法声明为

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

它使解释器能够优化代码,因为它是一个类方法 – 它不属于类本身,但它不会从一个对象更改为另一个对象.

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

当方法声明为

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

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

点赞