在 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 object

const l=()=>this;

const bl=l.bind({});

console.log(bl()); // didn't bind, returned window