Reactjs 绑定方法和不绑定方法之间的区别

我现在已经进入了几个React项目，我注意到在一个项目中，每个新方法都没有绑定。实际的区别是什么（如果有的话）？如果你能像第二个例子那样做，为什么要绑定呢

在第一种情况下，代码如下所示：

constructor(props) {
  super(props);
  this.state = { myState: false };
  this.clickMe = this.clickMe.bind(this);
}

clickMe() {
  this.setState({ myState: !this.state.myState });
}

constructor(props) {
  super(props);
  this.state = { myState: false };
}

clickMe = () => {
  this.setState({
    myState: !this.state.myState
  });
}

另一个示例如下所示：

constructor(props) {
  super(props);
  this.state = { myState: false };
  this.clickMe = this.clickMe.bind(this);
}

clickMe() {
  this.setState({ myState: !this.state.myState });
}

constructor(props) {
  super(props);
  this.state = { myState: false };
}

clickMe = () => {
  this.setState({
    myState: !this.state.myState
  });
}

---

在

结构中

this.clickMe = this.clickMe.bind(this);

使用方法，您可以执行显式

此

绑定，以向

clickMe

方法提供上下文

即，在此处对组件范围作出反应

简言之，您需要仔细决定调用上下文的范围（

this

binding）

但是

clickMe = () => {
  this.setState({
    myState: !this.state.myState
  });
}

注意对定义它的React组件范围进行词法范围绑定。无需使用

bind

---

如果您不使用

箭头函数

，而没有

绑定

，您的函数将不会得到

绑定

以反应组件范围。

在

构造中

this.clickMe = this.clickMe.bind(this);

使用方法，您可以执行显式

此

绑定，以向

clickMe

方法提供上下文

即，在此处对组件范围作出反应

简言之，您需要仔细决定调用上下文的范围（

this

binding）

但是

clickMe = () => {
  this.setState({
    myState: !this.state.myState
  });
}

注意对定义它的React组件范围进行词法范围绑定。无需使用

bind

---

如果您不使用

箭头函数

，而不使用

绑定

，您的函数将不会被

绑定

以响应组件范围。

箭头函数很好，因为它们更快更容易编写。在小型或中型应用程序中，没有明显的区别。如果愿意，可以使用arrow函数并避免构造函数内部的绑定

然而，有人决定看看性能和副作用。因此，您可以查看以下两个链接：

---

箭头函数非常棒，因为它们更快、更容易编写。在小型或中型应用程序中，没有明显的区别。如果愿意，可以使用arrow函数并避免构造函数内部的绑定

然而，有人决定看看性能和副作用。因此，您可以查看以下两个链接：