javascript - ES6 类方法和 React 是否使用粗箭头语法有功能上的区别吗？

Question

下面是编写 ES6 类方法的两个示例:

第一个使用非粗箭头，或简洁的方法语法 - 无论它正确的名称是什么:

class Test extends Component {
  handleClick() {
    return 'clicked'
  }
}

第二个使用粗箭头语法:

class Test2 extends Component {
  handleClick = () => {
    return 'clicked'
  }
}

我应该总是更喜欢使用粗箭头语法进行编写吗？

我注意到的一件事是您可以使用隐式返回，这可以缩短代码。

在我看到的大多数例子中，人们在React中编写constructor()和render()方法，他们不 对这些方法使用粗箭头语法，但它们对所有其他类方法都使用。

这是为什么呢？

我猜测答案将与 this 关键字有关，因为它是类的固有属性和胖箭头的上下文保留性质，但这与 React 和 fat 有什么关系类方法上的箭头语法？我能想到的唯一情况是，在某些情况下，您可能能够避免在构造函数中进行绑定(bind)，具体取决于稍后如何调用类方法。

我希望得到科学的答案或列出重要区别的案例列表。

Answer 1

考虑下面的渲染函数

render() {
    return <div onClick={this.handleClick} />
}

当handleClick定义为箭头函数时，该函数在单击事件触发时执行。否则它会与渲染同时运行。

Should I always prefer to write using fat arrow syntax?

这取决于您需要如何/从哪里调用您的函数。对于事件处理程序，箭头函数很方便，因为当您声明组件的 this 是可访问的时，您还需要传入该函数而不是其输出。

如果您不需要访问组件的 this 或传递您的函数，则不需要箭头函数。