В компоненте класса реагирования, какова цель использования каррированной функции без аргументов? - PullRequest
Новая
       20

В компоненте класса реагирования, какова цель использования каррированной функции без аргументов?

0 голосов
/ 24 апреля 2019

Видел эту настройку в демонстрационном материале компонентов пользовательского интерфейса, и ему было интересно, какова цель этой функции карри: 

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

в другом месте они называют это так: 

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

Ответы [ 3 ]

1 голос
/ 24 апреля 2019

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

0 голосов
/ 25 апреля 2019

Правильный ответ таков: чтобы избежать немедленного вызова onClick при рендеринге, вы можете назвать его так: 

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

Однако использование такой функции стрелки внутри рендера влияет на производительность в больших приложениях, поэтому этот альтернативный метод убирает функцию стрелки из рендера. Так что теперь вы можете просто сделать: 

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

@ PatrickRoberts дал мне правильный ответ в качестве комментария, и я готов дать ему очки, если он разместит ответ здесь.

0 голосов
/ 24 апреля 2019

Curring - это частичный вызов функции. Это похоже на то, что если вы добавили одну или две специи к карри и приготовили немного, вы все равно можете добавить к ним дополнительную специю. Простой пример будет выглядеть так: 

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

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

Объяснение: Вы создаете замыкание, которое возвращает функцию. Когда вы добавляете новый номер, к добавленной вами базе добавляется новый номер.

...