javascript - 这个导出是什么意思呢？这是一个执行两个函数的对象吗？

Question

我遇到了这个“高阶函数”。但我无法理解它。 这是片段:

addUrlProps([选项])(WrappedComponent)

这个addUrlProps是一个函数吗？它接受什么？它旁边有两个()...

Answer 1

在 React 中，它被称为高阶函数 (HOC)，但实际上它只是借用了旧的函数式编程概念。它真正是 currying 的应用程序.

<小时/>

简单示例

假设您要创建一个 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怎么办？这就是柯里化(Currying)发挥作用的地方；

// 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

理论上，您可以根据自己的喜好创建无限数量的添加函数。

<小时/>

案例示例

在您的示例中 addUrlProps([options])(WrappedComponent) 正在做完全相同的事情。

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

它使用[options]来创建一个函数。然后该函数采用名为 WrappedComponent 的第二个参数。