Question

我刚刚经历了一些反应代码，对此箭头功能我有些困惑。我知道抽屉是函数名称，这里打开是一个参数，（）呢？它有什么用？有人可以解释吗？非常感谢！

  drawer = open => () => {
    this.setState({
      test: open,
    });
  };

我可以通过this.drawer（true）

来调用此函数

Answer 1

您实际上是在声明一个函数，该函数返回另一个函数。老式的代码等效于：

drawer = function(open) {
  return function() {
    this.setState({
      test: open,
    });
  }
}

请注意，如果您使用经典的function而不是箭头函数，那么this将在没有binding的情况下引用您的类实例。

Answer 2

这称为curried function。

等效于以下代码：

  drawer = (open) => () => {
    this.setState({
      test: open,
    });
  };

此函数需要被调用两次才能执行：

drawer('something')();

第一次调用：drawer('something')将返回另一个函数，只需为您设置了open值即可调用一次。

通常用于预配置传递给组件props的回调：

<DrawerOpener setOpen={this.drawer(true)}/>

您的组件DrawerOpener然后可以调用props.setOpen()来触发打开事件，将无法破坏函数的open变量。

Answer 3

您在这里看到的称为currying，其中一个箭头函数返回了另一个箭头函数。因此，在您的示例中，第一个函数的参数打开，然后返回一个函数，然后通过创建一个闭包来访问第一个参数。

还有更多示例：https://scotch.io/tutorials/closures-and-currying-in-javascript

在上面的链接中，有一个非常好的示例，它说明了这里发生的事情以及如何使用它：

let greeting = function (a) {
return function (b) {
    return a + ' ' + b
    }
}

let hello = greeting('Hello')
let morning = greeting('Good morning')

hello('Austin') // returns Hello Austin
hello('Roy') // returns Hello Roy
morning('Austin') // returns Good morning Austin
morning('Roy') //returns Good Morning Roy

Answer 4

()表示参数列表为空。

drawer是一个带有一个参数（open）的函数。返回值是另一个函数（不带参数）。

React中的箭头功能

4 个答案: