关于react的高阶组件和redux?

Question

关于react的高阶组件和redux

Answer 1

我想你可以先理解这两种技术的使用情境与目的，这会比较清楚。

高阶组件(HOC)只是一种样式，主要的目的是要让原本的组件扩充出其它功能，例如添加生命周期的一些代码等等。当然我说的比较简单，还有其它的目的例如组件的重覆利用等等，可以参考这篇博客中的说明。

Redux本身就有使用高阶组件(HOC)的样式，可以看到的是用在react-redux这个绑定器中，connect方法在这里面提供。但Redux的目的是管控整个应用中的状态，与高阶组件的目的不同，两者无法混为一谈。

如果你的目的只是要扩充组件，那就使用HOC样式是直觉的，但HOC是有细部的问题的，目前已知道的经过HOC的组件，原本组件中的静态方法会消失。这是其中一个解决方式: hoist-non-react-statics

如果你的目的是要管控整个应用领域的状态，就用Redux之类的Flux框架，HOC只是Redux使用的其中一个样式，它还有一些其它的样式，各自有不同的目题。

Answer 2

Redux的connect就是高阶组件，只不过它的传参只能是它规定的数据格式而已。像你图中的这个例子，用Redux的connect应该是实现不了的。两者其实是一个概念，connect是为Redux设计的高级组件，你也可以为你的使用场景设计合适的高阶组件。