在React中，为什么我们在arrow函数中调用它？

问题描述

我有一个问题..请让我知道..

import React,{ Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
  }

  handleClick = () => {
     console.log("clicking")
  };

  render() {
    return (
      <div>
        <ul>
          {this.state.letters.map((letter) => (
            <li  onClick={() => this.handleClick()}> // when clicking li,it works.
            <li  onClick={() => handleClick()}> // when clicking li,it does not works why????
              hello
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;

这是非常简单的代码。

我的问题是为什么我们要这样写。handleClick??

在我的思想中，

单击li标签时。
this.handleClick功能在箭头功能中！
因此，箭头功能会自动将其绑定
（在这种情况下，它绑定到App组件）
因此，在箭头功能中，只有handleClick可以找到（//在我看来）
因为可以找到this.handleClick！
但是，仅编写handleClick无效。为什么?? // handleClick找不到错误...

你能解释为什么会这样吗？

另外..

如果我更改了

console.log（this）} />之类的代码

我们可以看到这是App组件。同样在App组件中，我们可以看到handleClick函数...

因此，这仅限于应用程序组件，然后我认为在箭头函数中，可以找到handleClick（）函数。但找不到...为什么？

解决方法

您似乎对使用箭头功能“自动绑定”感到困惑。从技术上讲，这不是正在发生的事情。请参阅MDN文章： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

它们不会自动绑定this，它们只是不会创建新的this绑定（与功能固有地会创建新的this绑定的功能相反）。尽管您可以想到它是“自动”绑定this，但这并不是真正发生的事情。不过，关键点在于，它只会影响this在箭头功能范围内的含义。它与函数外部中的this无关。因此，您将handledClick定义为箭头函数这一事实与是否可以使用this进行访问无关。它只会影响this在函数本身中所指的内容。

所有这些都解释了为什么希望在您的this.handleClick中调用render可以工作，而尝试调用handleClick却不能。 handleClick范围内没有功能render。有一个this（组件的实例），它恰好有一个handleClick方法。

在这种情况下使用箭头功能非常有用，因为您不必重新绑定它。如果您的handleClick函数需要访问this.state或this.props，则可以。如果您将其定义为标准function，则需要重新绑定它，以便正确的this在被调用时可用。

不过，正如其他人所指出的那样，您的代码按原样可能无法正常工作。您应该放下包裹它们的箭头功能。照原样，您只是在调用返回handleClick函数的函数，而不是调用它。

arrow-functions es6-class javascript reactjs reactjs