为什么我们不需要在 React 中绑定箭头函数？答案

【问题标题】：Why we don't need to bind the arrow function in React?为什么我们不需要在 React 中绑定箭头函数？
【发布时间】：2018-10-25 01:05:58
【问题描述】：

我们都知道我们需要在 React 中绑定函数才能使其工作。我知道为什么我们需要绑定它。

但我不知道为什么我们不需要绑定箭头函数。

示例：使用箭头函数（不需要绑定）

handleClick = () => {
  this.setState({
    isToggleOn: !this.state.isToggleOn
  });

};

现在，使用函数（需要绑定）

this.handleClick = this.handleClick.bind(this);

handleClick() {
  this.setState({
    isToggleOn: !this.state.isToggleOn
  });

};

我不是在问为什么我们需要在函数中绑定。我只想知道为什么箭头函数不需要绑定。

谢谢。

【问题讨论】：

【解决方案1】：

仅仅是因为箭头函数在其上下文中没有以下内容：

因此，当您在箭头函数中引用 this 时，它会将 this 视为任何其他变量，并首先在其作用域中查找其声明，但找不到它，因此它搜索上层作用域，即this 指的是所需的 react 组件类，因此我们不需要将 this 绑定到该类。

【讨论】：

【解决方案2】：

引用MDN：

箭头函数表达式的语法比函数短表达式并且没有自己的 this、arguments、super 或 new.target。这些函数表达式最适合非方法函数，它们不能用作构造函数。

进一步，

在箭头函数之前，每个新函数都定义了自己的this 值（基于函数的调用方式，在构造函数的情况下为新对象，在严格模式函数调用中未定义，如果函数被调用，则为基对象作为“对象方法”等）。事实证明，对于面向对象的编程风格，这并不理想。

所以基本上，我们不需要绑定的原因是因为this 不存在于箭头函数的上下文中。因此，它上升到下一个级别并使用它在那里找到的this。

【讨论】：