在反应 class 组件中，使用不带参数的柯里化函数的目的是什么？

Question

在 material ui React 组件演示中看到了这个设置，想知道这个柯里化函数的目的是什么：

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

说明：您正在创建一个 returns 函数的闭包。当您使用新号码时，新号码会添加到您提供的号码中。

Answer 3

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

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

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

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

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

在反应 class 组件中，使用不带参数的柯里化函数的目的是什么？

In a react class component what is the purpose of using curried function with no arguments?

javascript

currying

ecmascript-6

reactjs