为什么我们需要在 react 中绑定一个事件处理程序？

Question

我知道你可能觉得这是一个多余的问题，但听我说完。

我正在使用React类组件，我刚刚了解到，我们需要在组件的构造函数中绑定一个事件处理函数，以便访问 this.setState() 内的事件处理程序。现在根据我对JavaScript类的理解。this 可以被一个类中的任何方法访问。

为了证明我所说的，下面是代码。

class Parent {
  setState() {
    console.log("Set State is called");
  }
}

class Child extends Parent {
  eventHandler() {
    this.setState();
  }

  render() {
    console.log("Render method called");
    console.log("assume an event happened and event handler is called");
    this.eventHandler();
  }
}

new Child().render()

上面代码的输出是：

Render method called
assume an event happened and event handler is called
Set State is called

对比上面的代码和react的工作原理（即假设： setState 是一个定义在类 React.Component)，为什么当 this.setState() 是在事件处理程序中调用的？

Answer 1

我漏掉的关键点是，在类中定义的方法在被重新分配时将失去其上下文。

所以当我们这样做的时候。

<SomeComponent onClick={eventHandler} />

的 eventHandler 被重新分配给其他变量，并被 react 内部调用。因为这个重赋，所以 eventHandler 将失去它的上下文，当被内部的react调用时，它将没有 this.

要明确绑定 this 至 eventHandler 为了使它在重新分配后也不会失去其上下文，我们是这样做的。

this.eventHandler = this.eventHandler.bind(this)

请参考 这个 文章进行深入解读。