在 React 中使用箭头函数声明方法

Question

我正在完成 FreeCodeCamp React 练习，其中有一个简单的递增和递减状态初始化的计数值。

如果我使用传统函数编写方法，它工作正常：

increment() {

  this.setState({

    count: this.state.count + 1

  });

}

decrement() {

  this.setState({

    count: this.state.count - 1

  });

}

reset() {

  this.setState({

    count: this.state.count = 0

  });

}   

但是如果我使用箭头函数，它就会停止工作。“重置”按钮不是重置为零，而是以与“减少”按钮相同的方式减少值。“递增”和“递减”工作显然正常。

increment = () => {

  this.setState({

    count: this.state.count + 1

  });

} 

decrement = () => {

  this.setState({

    count: this.state.count - 1

  });

} 

reset = () => {

  this.setState({

    count: this.state.count = 0

  });

}

我在这里遗漏了一个细节。一些同事能告诉我为什么函数表达式在这种情况下不起作用吗？提前致谢。

Answer 1

箭头函数表达式是常规函数表达式的语法紧凑替代品，尽管它自己没有绑定到 this、arguments、super 或 new.target 关键字。箭头函数表达式都适合作为方法，它们不能用作构造函数。请检查此链接。

Answer 2

箭头函数不同于常规函数https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions简而言之，'this' 的值在常规函数和 lambda 函数中是不一样的。只是为了增加一点精度，您可能使用了 .bind()，因此，使用了两个函数（一个常规函数和一个返回 this 的箭头，并尝试绑定它们，我们得到：const f=function() { return this; };const bf=f.bind({});console.log(bf()); // correctly binds 'this' to the provided objectconst l=()=>this;const bl=l.bind({});console.log(bl()); // didn't bind, returned window