react 高阶组件之小学版

　　高阶组件  多么高大上的概念，一般用来实现组件逻辑的抽象和复用，在很多三方库（redux）中都被使用到，但是开发普通有任务项目时，如果能合理使用高阶组件，也会显著的提高代码质量。

　　我们今天就用最简单的逻辑来搞一搞这个家伙

 

　　我们先看一个栗子，看看这个家伙是如何进行逻辑复用的；

　　现在有一个组件MyComponent，需要从LocalStorage中获取数据， 然后渲染到界面。

　　一般情况下，我们可以这样实现：

　

 

　　代码很简单，但当其他组件也需要从LocalStorage中获取同样的数据展示出来时，每个组件都需要重写一次componentWillMount中的代 码，这显然是很冗余的。

　　下面让我们来看看使用高阶组件改写这部分代码：

　　

　　

　　withPersistentData就是一个高阶组件，它返回一个新的组件，在新组件的componentWillMount中统一处理从LocalStorage中获取数据的逻辑，然后将获取到的数据通过props传递给被包装的组件WrappedComponent，这样在WrappedComponent中就可以直接使用
this.props.data获取需要展示的数据。

　　当有其他的组件也需要这段逻辑时，继续使用withPersistentData这个高阶组件包装这些组件。

　　

　　是不是还算不麻烦，OK，那我们再讲讲，除了这个操作props的场景外，还有那些使用场景

　　高阶组件的使用场景主要有以下4种：

　　（1）操纵props (上个栗子)

　　（2）通过ref访问组件实例

　　（3）组件状态提升

　　（4）用其他元素包装组件

 

　　当然高阶组件除了组件，还可以传参 形式如下：

　　　　HOC(...params)(WrappedComponent)

　　一个比较典型的栗子就是react-redux里的connect函数

　　connect(mapStateToProps, mapDispatchToProps) (WrappedComponent)

　　

　　这个函数会将一个React组件连接到Redux 的 store上，在连接的过程中，connect通过函数参数mapStateToProps从全局store中取出当前组件需要的state，并把state转化成当前组件的props；

　　同时通过函数参数mapDispatchToProps把当前组件用到的Redux的action creators以props的方式传递给当前组件。

 

　　上栗子：

　　

 

　　基本上就这样，其实今天只说了高阶组件的一小部分，不过什么都不能一蹴而就，最好的学习方法就是在实践中前行；

 

　　参考资料：

　　　　React+进阶之路 （PS：推荐初学者入手）

　　

 

 

　　

 

转载于:https://www.cnblogs.com/webcabana/p/11237024.html