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

我现在很困惑什么时候应该使用箭头功能，什么时候不应该。我查过了，但还是不清楚。例如，我创建了一个按钮来计算点击次数，代码如下：

 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>
    );
  }
}

类计数器扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={counter:0}；
}
按钮按下增加=（）=>{
this.setState（（prevState）=>{
返回{counter:prevState.counter+1}
});
}
render（）{
返回(
计数器：{this.state.Counter}
+
);
}
}

当我像这样在按钮上使用箭头函数时：onClick={（）=>this.buttonPressedIncrease}，该函数的工作方式与我在上面代码中使用的不同

有人能为我解释这个问题吗？箭头功能何时起作用，何时不起作用

---

非常感谢。

您已经将

按钮pressedincrease

定义为一个“胖箭头”函数：

buttonPressedIncrease = () => {

onClick={this.buttonPressedIncrease}

这意味着，如果您编写

（）=>此.buttonPressedIncrease

，您将传递一个返回该函数的匿名函数

onClick

需要一个做某事的函数，而不是返回另一个函数的函数

由于定义函数时使用的是胖箭头，

此

已正确绑定，因此您只需传递函数名称：

buttonPressedIncrease = () => {

onClick={this.buttonPressedIncrease}

---

---

有时在JSX中，您会看到

onClick={（）=>someFunction（）}

（请注意，与您的示例不同，正在调用

someFunction（）

），这可能是造成混淆的原因。这是另一种保持正确的

This

范围的方法，但每次调用

render

方法时都要以创建新函数为代价。因此，首选上述方法。

您已经将

按钮按增量

定义为“胖箭头”函数：

buttonPressedIncrease = () => {

onClick={this.buttonPressedIncrease}

这意味着，如果您编写

（）=>此.buttonPressedIncrease

，您将传递一个返回该函数的匿名函数

onClick

需要一个做某事的函数，而不是返回另一个函数的函数

由于定义函数时使用的是胖箭头，

此

已正确绑定，因此您只需传递函数名称：

buttonPressedIncrease = () => {

onClick={this.buttonPressedIncrease}

---

---

有时在JSX中，您会看到

onClick={（）=>someFunction（）}

（请注意，与您的示例不同，正在调用

someFunction（）

），这可能是造成混淆的原因。这是另一种保持正确的

This

范围的方法，但每次调用

render

方法时都要以创建新函数为代价。因此，首选上述方法。

简言之，事件侦听器（如

onClick

等）希望获得对要调用函数的引用

考虑到这一点：

onClick={this.buttonPressedIncrease}

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

---

但是,

onClick={() => this.buttonPressedIncrease}

不正确，因为尽管此.buttonPressedIncrease是函数引用，但它不是您要执行的函数。您不想执行匿名函数

（）=>this.buttonPressedIncrease

，您想执行

this.buttonPressedIncrease

。请记住，函数只能通过

（）

调用。忽略括号只返回它们的引用。这就是为什么这不起作用-匿名函数不会调用想要的函数

---

不过，如果您愿意，您可以：

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

---

因为匿名函数将调用想要的函数。尽管我坚持使用前一种解决方案。

简言之，事件侦听器（如

onClick

等）希望获得对要调用的函数的引用

考虑到这一点：

onClick={this.buttonPressedIncrease}

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

---

但是,

onClick={() => this.buttonPressedIncrease}

不正确，因为尽管此.buttonPressedIncrease是函数引用，但它不是您要执行的函数。您不想执行匿名函数

（）=>this.buttonPressedIncrease

，您想执行

this.buttonPressedIncrease

。请记住，函数只能通过

（）

调用。忽略括号只返回它们的引用。这就是为什么这不起作用-匿名函数不会调用想要的函数

---

不过，如果您愿意，您可以：

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

---

因为匿名函数将调用想要的函数。尽管我坚持使用前一种解决方案。

请注意，arrow函数只是传统javascript函数（伪代码）的一种不同语法：

箭头表示法

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

现在，请注意返回的表达式可以是此处的函数。

所以在你的代码中

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

您只需传递一个需要在单击时执行的函数。如以下代码所示

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

this.onClickHandler（）}>

传递一个函数，该函数在执行时执行函数this.onClickHandler（一组开括号和闭括号调用函数）。 因此，当我们需要将某些数据/对象/函数作为参数传递给onClickHandler时，通常使用后一种方法，如下所示：

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

this.onClickHandler（this.props.requiredStuff）}>

---

希望这有帮助

请注意，arrow函数只是与传统javascript函数（伪代码）不同的语法：

箭头表示法

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

现在，请注意返回的表达式可以是此处的函数。

所以在你的代码中

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

您只需传递一个需要在单击时执行的函数。如以下代码所示

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

this.onClickHandler（）}>

你通过了一个函数