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

简而言之，像onClick这样的事件侦听器期望得到一个要调用的函数的引用。

考虑到这一点：

onClick={this.buttonPressedIncrease}

是正确的，因为this.buttonPressedIncrease是对函数的引用，并且是要运行的函数。

然而，

onClick={() => this.buttonPressedIncrease}

是不正确的，因为虽然() => this.buttonPressedIncrease是函数引用，但它不是要执行的函数。您不想执行匿名函数() => this.buttonPressedIncrease，而是要执行this.buttonPressedIncrease。请记住，函数只使用()调用。忽略括号只返回它们的引用。这就是为什么这不起作用的原因--匿名函数不调用想要的函数。

不过，如果你愿意的话，你可以：

onClick={() => this.buttonPressedIncrease()}

因为匿名函数将调用想要的函数。虽然我会坚持前一个解决方案。

Answer 2

您已经将buttonPressedIncrease定义为“胖箭头”函数：

buttonPressedIncrease = () => {

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

由于在定义函数时使用的是fat箭头，因此this已正确绑定，因此只需传递函数的名称：

onClick={this.buttonPressedIncrease}

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

Answer 3

请注意，箭头函数只是传统javascript函数(伪代码)的不同语法：

function funcName(arg1,arg2) {
  return returned_exp/value
}

箭头表示

const funcName = (arg1,arg2) => returned_exp/value

现在，注意返回的表达式可以是这里的一个函数.

所以在你的代码中

<button onClick={this.onClickHandler}></button>

您只需传递一个需要执行onClick的函数。如下面代码所示

<button onClick={() => this.onClickHandler()}></button>

您传递一个函数，该函数在执行时执行函数this.onClickHandler (一组打开和关闭的括号调用函数)。因此，当需要将一些数据/对象/函数作为参数传递给onClickHandler时，通常采用后一种方法，如下所示：

<button onClick={() => this.onClickHandler(this.props.requiredStuff)}></button>

希望这能帮上忙！