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:推荐初学者入手)