Question

我注意到class ExampleComponent extends React.Component {...}里面有不同的方法来定义方法，前者是React的一部分方法的声明，后者是你自己的方法的表达式。为什么是这样？为什么它们都不是同一种格式？

  componentDidMount() {
    ...
  }

VS

  myMethod = () => {
    ...
  }

Answer 1

这个去原型

fnProto() {

}

这个是实验性的，直接转到this始终引用实例的实例。

fnInstance = () => {}

转换为ES5

class Cmp {
 fnProto() {
   console.log('goes to proto')
 }

  fnInstance = () => {
    console.log('goes to instance')
  }
}

大致相当于

function Cmp() {
   this.fnInstance = (function() {
      console.log('goes to instance')
   }).bind(this)
}

Cmp.prototype.fnProto = function() {
   console.log('goes to proto')
}

Answer 2

当你有

时

componentDidMount() {
    ...
  }

它是一个生命周期函数，其中this默认自动绑定到React Component上下文。

但是，当您定义自己的函数时，其中的this将引用函数本身的内容。但是，如果您使用arrow function之类的

来定义它

myMethod = () => {
    ...
  }

其中的

this关键字将引用父上下文，在本例中是React Component上下文。

在 Arrow function

上查看此文章

为什么在扩展React.Component中有不同的方法语法？

2 个答案: