React：ES8中的事件处理

Question

我正在尝试在ES8标准中使用最接近的事件处理方式。在React中，有什么区别：

  handleButtonPressSearch(inputValue) {
    this.setState({
      showAll: true
    });
  }

与

  handleButtonPressSearch = (inputValue) => {
    this.setState({
      showAll: true
    });
  }

哪种方式是首选？

Answer 1

  

有什么区别

您的第一个示例是方法。调用方法时，this取决于调用该方法的方式（与使用function关键字的传统函数一样）。因此，如果将对该方法的引用作为回调传递给其他代码（例如，事件处理程序），则需要确保将this设置为组件实例，而不是其他实例。

通常在使用方法时，在构造函数中将它们绑定到实例：

this.handleButtonPressSearch = this.handleButtonPressSearch.bind(this);

您的第二个示例使用class fields语法和箭头函数。箭头函数并不关心您用this调用什么，它们会忽略它。相反，他们使用的是创建时所在的this。对于类字段，就是实例。因此，您不需要进行bind调用；该函数中的this将始终引用您的组件实例。

请注意，类字段语法仍然不是标准JavaScript，尽管the proposal处于Stage 3，并且大多数React项目都已设置为允许您通过转译使用类字段。

  

哪种方式是首选？

都不是首选，这是样式问题。两者都可以访问实例，并且都可以在必要时使用super（尽管在React中，通常不鼓励继承）。