ES6（React） - 自我调用函数？

Question

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

当我有：

export default ComponentName;

这很容易，但是这个：

export default connect(mapStateToProps)(ComponentName);

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

connect(mapStateToProps)(ComponentName);

第一部分connect(mapStateToProps)很简单 - 它只是connect函数，mapStateToProps作为参数，但与(ComponentName)的交易是什么？为什么我们导出自我调用功能？为什么我们必须在这里传递组件名称？

Answer 1

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);

Answer 2

connect是一个更高阶的组件。 它具有下面给出的结构：一个返回另一个函数的函数。

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

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

您可能更容易理解：

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

Answer 3

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

来自React docs：

  

高阶组件是一个获取组件并返回新组件的函数。

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

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