Javascript &引用；这"；类内组件

您能解释一下为什么我们需要在React类组件中自己声明的方法中绑定“this”吗？我明白“this”的价值取决于使用“this”的环境。但是，在下面的代码中，我们有3个方法-构造函数（），changeText（） 和render（）。为什么“this”在构造函数（）和render（）中工作得很好，但在我自己的方法changeText（）中不工作，除非我绑定它？我读了很多关于“这个”的文章，但仍然不明白为什么我们自己的方法应该绑定到“这个”

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      text: "Change Text",
    };
    this.changeText = this.changeText.bind(this);
  }

  changeText() {
    this.setState({
      text: "Text Changed",
    });
  }

  render() {
    return (
      <div>
        <div>
          <h3>{this.state.text}</h3>
          <button onClick={this.changeText}>Click Me</button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
文本：“更改文本”，
};
this.changeText=this.changeText.bind（this）；
}
changeText（）{
这是我的国家({
文本：“文本已更改”，
});
}
render（）{
返回(
{this.state.text}
点击我
);
}
}
render（，document.getElementById（“根”））；

“我知道“this”的值取决于使用“this”的环境。”通常不是这样。在传统（非箭头、未绑定）函数中，它取决于函数的调用方式。有关详细信息，请参阅，或我的。：-）您必须绑定，因为React调用它们的方式没有设置

this

。调用这些函数时，不必在构造函数中或

render

b/c React设置

this

。自然的后续问题是：“为什么不在调用事件处理程序时React设置

this

？”答案是它们不一定是类的方法。如果在调用事件处理程序时将React set

this

设置为实例，则假定所有处理程序都来自类的方法，而不是（例如）作为道具或其他独立函数等接收的对象。它们可以做出其他设计选择；这就是他们做的那个。：-）“我确实理解“this”的价值取决于“this”的使用环境。”通常不是这样。在传统（非箭头、未绑定）函数中，它取决于函数的调用方式。有关详细信息，请参阅，或我的。：-）您必须绑定，因为React调用它们的方式没有设置

this

。调用这些函数时，不必在构造函数中或

render

b/c React设置

this

。自然的后续问题是：“为什么不在调用事件处理程序时React设置

this

？”答案是它们不一定是类的方法。如果在调用事件处理程序时将React set

this

设置为实例，则假定所有处理程序都来自类的方法，而不是（例如）作为道具或其他独立函数等接收的对象。它们可以做出其他设计选择；这就是他们做的那个。：-）