javascript - ReactJS 中箭头函数和无箭头函数的区别？

Question

我目前很困惑什么时候应该使用箭头函数，什么时候不应该使用。我对此进行了搜索，但仍然不清楚。例如，我创建一个按钮来统计点击次数，代码如下:

 class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {counter: 0};
  }
  buttonPressedIncrease = () => {
    this.setState((prevState) => {
      return {counter: prevState.counter + 1}
    });
  }
  render() { 
    return (
      <div>
        <div>Counter: {this.state.counter}</div>
        <button onClick={this.buttonPressedIncrease}>+</button>
      </div>
    );
  }
}

当我在按钮上使用箭头函数时，如下所示:onClick={() => this.buttonPressedIncrease}，该函数不像我在上面的代码中使用的那样工作。

谁能帮我解释一下这个问题吗？箭头函数什么时候起作用，什么时候不起作用？

提前非常感谢。

Answer 1

您已经将 buttonPressedIncrease 定义为“fat-arrow”函数:

buttonPressedIncrease = () => {

这意味着，如果您编写 () => this.buttonPressedIncrease，您将传递一个返回该函数的匿名函数。 onClick 想要一个做某事的函数，而不是返回另一个函数的函数。

由于您在定义函数时使用了粗箭头，因此 this 已经正确绑定(bind)，因此您应该只传递函数的名称:

onClick={this.buttonPressedIncrease}

<小时/>

有时在 JSX 中您会看到 onClick={() => someFunction()} (请注意，someFunction() 正在被调用，与您的示例不同)，这可能是您感到困惑的根源。这是将正确的 this 保持在范围内的另一种方法，但代价是每次调用 render 方法时都创建一个新函数。因此，首选上述方法。