JS类函数的两种写法

在项目里看到类函数的两种写法

class App extends React.Component {  
  componentDidMount() {
    // ...
  }
  getValue = () => {
    // ...
  }
}

这两种写法都是正确的。区别在于第一种是正统的类函数定义，保存在类原型里，需要绑定this使用；第二种则是把箭头函数作为类实例的一个属性，类似于类属性默认值，只不过这个属性不是值而是函数。

class App  {  
  value = 5
}

定义在实例属性上的函数，与普通类函数在使用上基本没有区别。它也可以引用this，以取得它所属的实例。此外，由于箭头函数的this只取决于它所处的环境，这种类函数也可以直接作为事件函数，而不需要做其他任何处理。

<Button onClick={this.getValue}>AAA</Button>