这个导出是什么意思？这是一个执行两个功能的对象吗？

Question

我遇到了这个 "higher order function"。但我不能绕过它。这是片段：

addUrlProps([options])(WrappedComponent)

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

Answer 1

addUrlProps是一个函数，returns是一个函数。在 React 术语中，它是一个 HOC。 HOC documentation 第二个 () 正在调用从第一次调用返回的函数。

下面是shorthand

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

所以不是将 addUrlProps() 的结果保存到变量中，而是像这样立即调用

export addUrlProps()(WrappedComponent);

它的返回值是同一个组件，包裹在另一个添加了一些额外功能或道具的组件中。

值得注意的是，并非所有 HOC 都遵循这种柯里化模式。使用这种特殊模式的一个非常流行的库是 react-redux connect HOC。不要害怕查看源代码来弄清楚发生了什么！

Answer 2

在 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 怎么办？这就是柯里化发挥作用的地方；

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

这个导出是什么意思？这是一个执行两个功能的对象吗？

What does this export mean? Is this an object executing two functions?

javascript

reactjs

react-router

higher-order-functions

higher-order-components

简单示例

案例