在react类组件中，使用没有参数的curried函数的目的是什么？

Question

在材料ui react组件演示中看到这个设置，并想知道这个curried函数的目的是什么：

toggleDrawer = (side, open) => () => {
   this.setState({
      [side]: open,
   });
};

在其他地方，他们称之为：

<Button onClick={this.toggleDrawer('left', true)}>Open Left</Button>

Answer 1

toggleDrawer是一个可以生成其他功能的工厂。它被用来减少代码重复。如果这是代码中唯一有onClick的地方，那么它不是很有用，但可能还有其他代码行如下：

<Button onClick={this.toggleDrawer('top', true)}>Foo</Button>
<Button onClick={this.toggleDrawer('bottom', true)}>Bar</Button>
<Button onClick={this.toggleDrawer('left', false)}>Baz</Button>
<Button onClick={this.toggleDrawer('cobb', 'salad')}>Yum</Button>

就个人而言，我已经将它命名为不同的东西，以明确它是一个工厂，像makeToggleHandler

Answer 2

Curring是函数的部分调用。这就像你给咖喱一两次调味和煮一点点，你仍然可以添加更多的香料。一个简单的例子看起来像 -

  return function(num){
    return base + num;
  }
}

var addTen = addBase(10);
addTen(5); //15
addTen(80); //90
addTen(-5); //5

说明：您正在创建一个返回函数的闭包。当您使用新号码进行限制时，新号码将添加到您提供的基础中。

Answer 3

正确的答案是，为了避免在渲染时立即调用onClick，您可以像这样调用它：

<Button onClick={() => this.toggleDrawer('left', true)}>Open Left</Button>

但是，在渲染中使用这样的箭头函数会对较大的应用程序产生性能影响，因此这种替代方法是将箭头函数从渲染中移除。所以现在你可以做到：

<Button onClick={this.toggleDrawer('left', true)}>Open Left</Button>

@PatrickRoberts给了我正确的答案作为评论，如果他在这里发布答案，我愿意给他分数。