ES6 (React) - 自调用函数？答案

【问题标题】：ES6 (React) - self invoking functions?ES6 (React) - 自调用函数？
【发布时间】：2018-07-27 10:37:25
【问题描述】：

有人可以向我解释下面的代码吗？我明白它的作用，但语法很奇怪，它完成了什么？

当我有：

export default ComponentName;

这很简单，但是这个：

export default connect(mapStateToProps)(ComponentName);

它到底是做什么的？它是 ES6-ish 语法吗？它看起来像是带有参数的自调用函数，但是这些参数是如何工作的呢？我难以理解的部分是：

connect(mapStateToProps)(ComponentName);

第一部分connect(mapStateToProps) 很简单——它只是一个带有mapStateToProps 作为参数的connect 函数，但是(ComponentName) 有什么用呢？为什么要导出自调用函数？为什么我们必须在这里传递组件名称？

【问题讨论】：

connect 是一个柯里化函数。在函数式编程中搜索“currying”，tl;dr 不是在一个函数中接受多个参数并返回一个值，而是一次接受一个参数并返回一个接受另一个参数的函数，依此类推，并且只有返回链上最后一个函数的值。

【解决方案1】：

您基本上是将组件包装在 高阶组件中。

高阶组件是一个接受一个组件并返回一个新组件的函数。

当您调用connect(mapStateToProps) 时，它会返回一个函数。该函数接受一个组件作为参数并返回一个新组件，它与您传递给它的组件相同，只是新组件现在将包含来自 Redux 存储的数据。

因此，通过附加(ComponentName) 即connect(mapStateToProps)(ComponentName)，您实际上并没有导出函数，而是调用了一个函数并导出了它返回的新组件。

【讨论】：

【解决方案2】：

connect() 是返回一个以组件为参数的函数的函数

就是这样

let f = connect(mapStateToProps); // f is function now
f(ComponentName)

看这个例子来说明这个想法

function foo(a){
    return function(b){
        console.log(a);
        console.log(b);
    }
}

foo(1)(2);

//or

let f = foo(1);
f(2);

【讨论】：

【解决方案3】：

connect 是一个高阶组件。它的结构如下所示：返回另一个函数的函数。

function add(first) {
  return function(second) {
    return first+second;
  }
}

const result = add(4)(5);
console.log(result);

这样你可能更容易理解：

const reduxFn = connect(mapStateToProps);
reduxFn(Component);

【讨论】：