一. 基本工作流程
<1> 跟原生 Redux 不同的是:
(1) store
不需要在每一个要使用 redux 管理状态的组件中,单独引入
store
在根组件中,通过 < Provider store = {store} /> 标签包裹根组件,从而给所有子组件提供 store ,所以只需要在根组件中引入创建的
store即可!!!
(2) 从 store 状态树中获取 state
不需要再通过 subscribe() 注册监听器,从而使状态树的状态更新时,获取到最新状态,再同步到组件自身状态中使用!!!
可以通过
connct()()函数封装每个要使用 redux 管理状态的组件,使其成为高阶组件,包装后,组件就会成为高阶组件的子组件,从而可以接收到 props 属性,而我们就可以通过connct()()的第一个括号中的第一个参数,来设置要传给组件的 props 属性的内容。(可以借此把 store 状态树的状态传过去) ,这样在组件中,就不需要 subscribe()监听 来获取最新状态了,可以直接通过自己的 props 属性对象来获得!!!
(3) dispatch(action 对象)
不需要在组件中,自己手动调用
dispatch()函数来派发 action 对象!!!
还是通过
connct()()函数封装组件过后,通过connct()()的第一个括号中的第二个参数, 把返回action对象的createAction函数传进去,把它们也作为被封装组件的 props 属性传进去,这样我们只需要在组件中调用该createAction函数 ,connct()()函数就会手动帮我们把返回的action对象给 dispatch() 出去!!!
<2> connect()() 的使用
(1) 第一个括号
第一个括号接收两个参数,一个回调函数、一个对象 :mapStateToProps(state , myProps) 和 mapDispatchToProps。
1 . mapStateToProps(state , myProps)
- 该函数接收两个参数:store状态树中的状态 、自己的属性 props
- 返回要作为 props 传给被封装组件的状态对象!!可以根据接收到的store状态树中的总状态有选择地进行传递!!
2 . mapDispatchToProps
- 该参数为一个对象,在里面写入,返回
action对象的createAction()函数
合在一起:
二. 高阶组件封装的原理
HOC不仅仅是一个方法,确切说是一个组件工厂,获取低阶组件,包装生成高阶组件!!
好处/可以达到的效果:
- 实现代码复用,代码模块化
- 增删改 props 属性
- 渲染劫持
如下,为我们自己封装的一个HOC函数: