Что означает этот экспорт? Это объект, выполняющий две функции? - PullRequest
Новая
       9

Что означает этот экспорт? Это объект, выполняющий две функции?

0 голосов
/ 01 октября 2019

Я наткнулся на эту «функцию высшего порядка». Но я не могу обернуть голову вокруг этого. Вот фрагмент:

addUrlProps([options])(WrappedComponent)

Является ли это addUrlProps функцией? Что он принимает? У него есть два () рядом с ним ...

Ответы [ 2 ]

2 голосов
/ 01 октября 2019

В React это называется функцией высшего порядка (HOC), но на самом деле это просто заимствование старой концепции функционального программирования. действительно является приложением curry .

Простой пример

Допустим, вы хотите создать add2и add3 функция. Вы бы сделали что-то вроде этого: 

// add2 = a => Number
const add2 = a => a + 2;
const sum2 = add2(5) // => 7

// add3 = a => Number
const add3 = a => a + 3;
const sum3 = add3(5) // => 8

Проблема в том, что это не очень масштабируемо. Что если вам нужно создать add4, add5... add100? Именно здесь в игру вступает карри; 

// add = a => b => Number
const add = a => b => a + b;

// add(2)(5) 
const add2 = add(2);
const sum2 = add2(5); // => 7

// add(3)(5) 
const add3 = add(3);
const sum3 = add3(5); // => 8

...

// add(100)(5) 
const add100 = add(100);
const sum100 = add100(5); // => 105

Теоретически вы можете создать бесконечное количество add функций на ваш вкус.

Пример кейса

В вашем примере addUrlProps([options])(WrappedComponent) делает то же самое. 

// addUrlProps([options])(WrappedComponent)
const foo = addUrlProps([options]);
const HOC = foo(WrappedComponent); // => A component

Для создания функции требуется [options]. Затем эта функция принимает второй аргумент с именем WrappedComponent.

1 голос
/ 01 октября 2019

addUrlProps - это функция, которая возвращает функцию. С точки зрения реакции это HOC. Документация HOC Второй () вызывает функцию, возвращаемую из первого вызова.

Это сокращение для следующего. 

const func = addUrlProps();
func(WrappedComponent);

Вместо этогодля сохранения результата addUrlProps() в переменную, он вызывается немедленно, как показано ниже: 

export addUrlProps()(WrappedComponent);

Его возвращаемое значение - это тот же компонент, заключенный в другой компонент, который добавляет некоторые дополнительные функции, или реквизиты.

Стоит отметить, что не все HOC следуют этой схеме карри. Очень популярная библиотека, которая использует этот конкретный шаблон - react-redux connect HOC. Не бойтесь просматривать исходный код, чтобы понять, что происходит!

...