关于react的高阶组件和redux

Question

最近在学习一个react教程的时候，他提到了react高阶组件的方法，学着感觉有点懵，但是之前用过redux，感觉使用redux也可以完成这个方法，想问的是在一般的场景里，是自己写一个react高阶组件，还是使用redux呢？

举个例子：
我觉得像这种高阶组件，完全就可以使用redux的connect来完成

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设计的高级组件，你也可以为你的使用场景设计合适的高阶组件。