React Hooks 在状态管理中的实践


殷勤昨夜三更雨,又得浮生一日凉。——《鹧鸪天》苏轼

实践之结果发布于github,地址:react-duce

不知从何时起,状态管理成了一个前端项目的标配,不论有无需要,我们都会引入诸如MobX、Redux库来管理我们应用的状态。但如果我们回头想想之前项目中的某些架构,不免感叹,为何我的项目功能间设计耦合如此之紧,为什么这部分根本不需要抽离的公共状态却抽离了,又为何组件的状态和UI耦合?

自react发布之初就使用react的同学想必能感叹react发展历程中的每一步都走得稳健,从mixin到class component到function component;从pureComponent到memo,无不是在追求更好的性能与更优的程序范式。实不相瞒,自react 16.8发布hooks,我便爱react更多几分,于此对组件之间状态的管理有了更进一步的思考,完毕,凝结出了这个库react-duce,希望与大家共同探讨hooks在项目中的实践。

为何开发这个库

前段时间,看到一个通信库,swr,基于hook的数据请求库,其设计原理很容易理解,当得到返回的请求数据时,调用状态处理函数,更新状态,进而在使用该状态的组件中得到数据更新。源码片段如下:

hook不仅使代码可读性更高,而且可使模块间耦合降低。

部分代码片段实例如下:


在HelloContent组件中点击span,即可触发count更新,进而WorldContent中的count也得到更新,实现组件之间store共享。

将状态管理交由reducer

曾几何时,我们感叹flux,感叹redux使我们对于状态的管理更加清晰,使我们对数据的流向胸有成竹。


使用实例如下:



实现原理

Store基类


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 包含 react基础 react传值 react路由 和redux管理 和react-redux reactDom...
    栀璃鸢年_49a3阅读 4,804评论 0 1
  • 你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗?——拥有了hooks,你再也不需...
    水落斜阳阅读 82,381评论 11 100
  • 今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点,受到很多朋友的关注,都强烈要求再出多些R...
    浪子神剑阅读 13,405评论 6 106
  • 我挑战快走3000步的目的有两个:一是可以锻炼身体,就是单纯的爱美,不想有赘肉、二是可以兑换医疗金,也是对自己...
    妙红_a3e5阅读 2,454评论 1 6
  • 当我合上书时,忍不住欢庆,因为总算看完了。这足以证明我是多么不喜欢这本书了,完全是出于“强迫症”将其看完的,书中内...
    生命重启ing阅读 2,047评论 2 2