react 框架下的状态管理管理

1、主要方案

1.1、hooks

优:函数式、代码简单易追踪、可复用。

缺:缺乏全局共享状态的处理方案。可以用 useReducer+ useContext 模拟,但并不是最简单的操作,而且复杂的异步交互场景还是需要业务自己想办法解决。

1.2、redux 相关的生态

redux 是数据流管理库,可脱离 react 使用,react 架构项目需要结合 react-redux 使用。库的使用人员在开发中遇到了各种问题,开放的生态出现了各种中间件或封装。如:

1.2.1中间件类型:

1.2.1.1修改 action 或 payload 类型来完成异步处理的中间件:

a.  redux-thunk  支持 dispatch 传入函数。从而达到函数中进行异步数据流处理。最简单易上手。

b.  redux-promise-middleware  dispatch payload 支持 promise 。异步数据流往往对应了多种响应状态,这需要我们在开发中定义多种 action 类型,fullfilled failed pending 等,该中间件可提供这个部分代码的简化能力。

c. redux-actions 仅简化、优化一些 redux 写法冗余重复的问题。

redux-thunk 和  redux-promise-middleware 用法实际上比较类似,都是触发一个 function/promise 让中间件自己决定 dispatch 真正异步数据的时机,这对于大部分场景来说已经足够了。但是对于异步情况更复杂的场景,我们往往要写很多业务代码,如防抖、节流、取消、竞态等问题。总结:理解简单,上手成本低,无法处理复业务场景。

1.2.1.1响应式的中间件:

c. redux-saga  基于 gennerator,更细粒度,更方便的处理异步任务,对 redux 的处理提供了封装后的 api。 对一些并发时序等异步场景提供了丰富的 api。last、cancel 等都是常用的场景 。相对来说上手难度大于前面的。

d.redux-observable 基于 RxJS 实现. 处理复杂异步场景更优雅,代码更简洁。需要先学习 rxjs 。上手难度更大。

1.2.2 封装类型:

1.2.2.1dva:

dva 首先是一个基于 reduxredux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-routerfetch,所以也可以理解为一个轻量级的应用框架。所以并不是一个单纯的数据流管理相关的库。

ddva = React-Router + Redux + Redux-saga 

1.2.2.2 rematch:

rematch在redux的基础上构建并减少了样板代码和执行了一些最佳实践。主要是写法上的简化,复杂异步场景支持不了。

对比:https://rematch.netlify.app/#/inspiration

1.3 mobx

类似 vuex 原理,项目代码参考https://github.com/rwieruch/favesound-mobx

也是没有复杂异步流的api

2.其他业界选型参考:

老项目对 redux 加 hooks 混合使用没有问题。但老项目更换 redux 中间件的成本过大,不建议更换。

新项目建议 hooks 写,redux 数据流相关的库很多,各有利弊,按场景选择即可。

hooks 和 redux 相关的库并不是一个冲突的选项。

大部分业务并不一定要 redux 。比如驼峰类的后台管理系统,其实就不需要 redux。

序号方案公司问题优点

1hooks  +  context小米全局用 useContext 和 useReducer 符合函数式,但并不比 redux 方便

不提供处理复杂异步流的 api。

简单

2hooks  +  context  +  rxjs 封装 useObeserver头条rxjs 封装 useObeserver  支持复杂数据流处理,但是封装是成本,可以调研有没有开源的。适用场景多。

3dva + hooks腾讯用被多层封装的框架,意味着过度依赖于框架的维护。

并不适用于 mrn 项目,因为路由层就已经不支持。有为 rn 另起一个项目。但是使用量很低。https://github.com/nihgwu/react-native-dva-starter

简单。

适用场景多(不适用于 mrn)。

4hooks + redux + promise-middleware(老项目)目前比较流行的 redux 相关库使用还是 saga 偏多,基础中间件不能处理复杂异步情况。

代码冗余。

非函数式。

不提供处理复杂异步流的 api。

不建议选择。

5rematch + hooks 不提供处理复杂异步流的 api。简单

6redux-saga + hooks写法略复杂。

学习成本高。

适用场景多。

7mobx + hooks

3、参考:

https://juejin.cn/post/6844903504427892750#heading-1

https://juejin.cn/post/6844903562095362056

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容