用react hook实现redux状态管理实践(useContext + useReducer)

 浆糊之家   2020-04-17 12:22   200 views 热度值

本文主要是通过hook中的useContext、useReducer这二API去现实一个自己redux状态管理,而非去装插件实现状态管理。

出于学习的目的总结实现方式,至于能不能完全取代之前的状态管理(大型项目),本人还是处在观望状态,但不代表完全没用哦,小伙伴们。

好了废话跳过,下面开始实战:

首先用 create-react-app 创建react项目(git仓库),这里我使用react官方的脚手架,是方便你可以直接跟着实践

创建基础useContext数据互通

useContext本身就是通过一层一层传递的,实现数据互通的。

1、创建一个models文件夹,并且创建MyProvider.js组件文件。
此组件类似redux中的Provider组件,挂载了store并且供子组件使用,只不过这里传递数据通过useContext实现
内容如下:

2、创建一个展示读取共享数据的组件,创建components文件夹,并且创建ShowText.js文件

3、App.js根组件中,使用MyProvider包裹共享状态,在内的所有组件都是可以访问到MyProvider组件挂载的属性。

此时子组件是可以看到文字颜色以及age属性,但现在还是死数据,下面开始使用useReducer 整合进来更新状态。

整合useReducer到useContext

1、创建module/reducer.js文件,管理如何更新全局共享的数据

2、改造MyProvider.js文件,把dispatch更新数据方法挂载在状态管理中,供子组件调用此方法更新页面状态数据

3、此时我们在建立一个子组件来触发更新数据,检测是否另外一个子组件能否更新数据及渲染到页面上。
接着创建 components/ButtonDemo.js组件

4、接着把ButtonDemo组件在App.js中引入进来,然后就可以测试数据状态管理能否及时更新了。

至此使用hook的API去实现redux方法结束。

总结思考:

之前开篇前就说不太合适大型项目,这是什么呢?在实践过程中发现当状态更改时,整体的dom tree都会被更新,那么这时候就会引发一个情况,全部节点触发更新渲染,那对于大一点的项目来说,渲染性能消耗还是比较大的。

主要是context逐层传递会让每个props触发更新机制,至于每个页面每个组件去监听props处理这块就。。。。。你懂的。

期望未来react版本中有所改进这块。

NEXT:已经是最新一篇了

 发表评论


表情