2023 Q3 React 状态管理库调研报告

741 阅读4分钟

image.png

花了点时间对 2023 年社区主要的 React 状态管理流行库: Redux, Zustand, Mobx 做了技术调研,在此做个分享,欢迎讨论与指正。

暂时分不出时间来调整文章格式,提前抱歉。

市场占有率

Redux 目前以三倍差距领先 ZustandMobX

在 2023 年第一季度, Zustand 的下载数量超过 MobX

npm/trands:

npm-compare.com_react-redux,zustand,mobx.png

相比 MobX 的稳步前进,Zustand 呈现出明显的上升趋势,目前它也是社区呼声最高的状态管理库。

Refer: What's the best state manager to use for React in 2023 ? Making the switch from Angular

选型思路

在结合了 Docs 与 社区文章,与 GPT 探讨后得出以下结论:

  1. 在企业级项目中,如果想保持严格的团队规范和可靠的预期结果,Redux 仍然是不二选择。它的优点是社区生态丰富且健壮,我们可以像管理 RPC 那样管理 Store,可预测性使它更便于单测,同时也更有利于招聘,引导新人更快速的融入到项目的状态管理中。缺点是我们需要在架构项目时提前做出某些抉择以及一些额外的工作,包括使用某些包来使 Redux 真正变得有用,以避免状态管理在项目中野蛮生长。另外,在实际使用时,需要编写大量的模板代码,对开发效率会造成一定影响。

  2. 在一些公共库,如团队内部的组件库中使用 Zustand优点是能够以更现代化的 Hook 方式进行 Store 操作。它更加轻量且简洁,同时也能够被预测。与 Redux 不同,它的缺点是可能会同 useReducer + useContext 那样散播在各处。在企业级应用中,项目很可能在需求迭代中以传播式的速度变得混乱,这不利于管理。然而这也意味着非常灵活,因此它更适合在模块互不影响的情境下,专注于当前的业务逻辑,相反 Redux 在这种场景下就显得非常臃肿。

  3. MobX 采用 Proxy 与 观察者模式 实现响应式设计,优点是它的特性让使用了 MobX 的项目性能足够优秀,它帮助开发者减轻对性能优化策略的心智负担。我们完全可以只考虑 store 的粒度,我们需要尽量使用单例以保持维护性。它的控制是精确的,在后续的使用中,我们不必在 Re-render 与 Memo Diff 的问题上花费大量时间。这是其他两个状态管理库与香草 Hook 组合所不具备的特性,缺点是这也说明了它的预测可能更加困难,定位问题困难是社区诟病最多的一点。

社区生态

  • Redux 仍以碾压的优势领先,在扩展性,稳定性和维护性方面更加有保障。

  • Zustand 足够细粒度,它的市场趋势仍在快速上升,现有的问题也会在未来被迅速修复。

  • MobX 有一个 React 版本,它更依赖于社区,如果按现在的趋势来看,它可能不再是一个安全的选择,但在某些场景和未来数年里,它仍然是非常值得考虑的方向。

学习曲线

  • Redux 的学习曲线较为陡峭,我们要遵守它的一些强制性语法与规范。每个项目一般都有相应的扩展与约束,从时间成本来讲它们几乎是不可变的,我们需要让自己适应不同项目的 Store 规范,这是额外的学习成本。

  • Zustand 的使用非常平滑与自然,如果你是有一定经验的 FP 开发者,你甚至只看完 Docs 的 Usage 与特性就能很好的运用它。

  • MobX 拥有最陡峭的学习曲线,比起前两者,需要更多的精力去学习与适应它的语法,它的灵活性与主要优势体现在 Class 而非 Function 上。笔者在简单的实践后,仍然无法区分它的 observable 与 makeAutoObservable 在 FP 中的区别,无法直观地体会到 observable 比 makeAutoObservable 多出的灵活性。它们的关系看起来就像 Array.prototype 的 map 与 forEach,而在 Class 中则充分展现了它们不同的 Features 与场景。因此在纯 FP 项目中可能不太合适,而在主服务端轻客户端,且有大量后端高度参与客户端开发的项目中更为合适,并且开发者需要额外学习它的问题定位方式,以便于在编码前更好的考虑该如何使用它。