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：推荐初学者入手）