Question

我现在已经参与了多个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
  });
}

Answer 1

在constructure中，

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

使用bind方法，您可以进行显式this绑定，以为clickMe方法提供上下文。

即。在此处反应组件范围

简而言之，您要谨慎决定什么是调用上下文范围（this绑定）。

但是

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

Arrow function会为您进行定义它的React Component范围的词法范围绑定。您无需使用bind

如果您不使用arrow function，而没有bind，则您的函数将不会bind进入React Component范围。

Answer 2

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

但是，有人决定研究性能和副作用。因此，您可以检查以下2个链接：

绑定方法与不绑定方法之间的区别

2 个答案: