为什么 ReactJS 中的箭头函数被视为属性？答案

【问题标题】：Why are Arrow Functions in ReactJS considered as property?为什么 ReactJS 中的箭头函数被视为属性？
【发布时间】：2018-11-06 07:21:47
【问题描述】：

所以，我根据需要尝试了两种不同的方法，即使用箭头函数和非箭头函数，在编写代码时我注意到这两种方法有些奇怪，即非箭头函数，即

  close() {
    this.setState({
      show: false
    });
  }

被认为是方法，因为它们是函数，所以它们是正确的，

但是当我写一个箭头函数比如：

  goToNextPage = () => {
    this.setState(({ page }) => ({ page: page + 1 }));
  };

它被认为是一种属性，我很不理解这种行为。这是 VSCode 的问题还是完全不同的事情？

【问题讨论】：

aClassProperty = () => { ... } 的意思是你正在为类的每一个新实例创建一个新的类属性，并且该属性是一个箭头函数，所以是正确的。 aMethod() 在类的每个实例之间共享，但在 React 中，您通常通过将其绑定到 this 在构造函数中创建一个新函数，因此最终结果是相同的。
@Tholle 好的明白了，但是你能用箭头函数作为props吗？
我不太确定我明白你的意思。如果你能做到<MyComponent aProp={this.aClassProperty} />？当然。
@Tholle 是的，这正是我的意思，谢谢

标签： reactjs function methods visual-studio-code arrow-functions

【解决方案1】：

class MyClass { aClassProperty = <whatever_value>; } 表示您正在创建一个新的class property for every new instance of the class。该属性可以是任何你喜欢的值，但在这种情况下，该属性是一个箭头函数，所以它是正确的。

aMethod() 在类的每个实例之间共享，但在 React 中，您通常通过将其绑定到 this 在构造函数中创建一个新函数，因此最终结果是相同的。

【讨论】：

你能详细解释一下为什么 React 将箭头函数视为属性吗？
@YashKaranke 这不是 React 特定的，JavaScript proposal is laid out 就是这样。写= 2、= "2"、= function() { ... } 甚至= () => { ... } 都没关系。它们都被视为类属性。