React Redux 源码解析
使用过redux
的同学都知道,redux
作为react
公共状态管理工具,配合react-redux
可以很好的管理数据,派发更新,更新视图渲染的作用,那么对于 react-redux
是如何做到根据 state
的改变,而更新组件,促使视图渲染的呢,让我们一起来探讨一下,react-redux
源码的奥妙所在
在正式分析之前我们不妨来想几个问题:
React-redux
主要是两个组件,connect 高阶组件 和 Provider 组件
connect
- 从
store
里面获取读和写的 API - 对拿到的接口进行封装。根据
mapStateToProps
和mapDispatchToProps
进行封装 - 在恰当的时候进行更新(精准更新)。只有
store
发生变化,才对页面进行更新 - 渲染组件(订阅 redux,数据改变后广播通知)
connect 就是一个高阶组件
Provider 其实就是一个使用 context 上下文后的组件
把 context 和 store 结合起来,组件中只能通过 dispatch
来进行修改,这样的话,每个组件既可以去 context 里面获取 store 从而获取状态,又不用担心它们乱改数据