reactjs - ES6 (React) - 自调用函数？

Question

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

当我有:

export default ComponentName;

这很简单，但是这个:

export default connect(mapStateToProps)(ComponentName);

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

connect(mapStateToProps)(ComponentName);

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

Answer 1

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

来自React docs :

A higher-order component is a function that takes a component and returns a new component.

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

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