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。对于class字段，这是一个实例。因此，您不需要该bind调用；该函数中的this将始终引用您的组件实例。

请注意，类字段语法仍然不是标准的JavaScript，尽管the proposal还处于第3阶段，而且大多数React项目都设置为允许您通过转换来使用类字段。

哪种方式是首选的？

两者都不是首选的，这是一个风格问题。两者都可以访问实例，并且都可以在必要时使用super (尽管在React中，通常不鼓励继承)。