【译】React 状态管理大师

大家好,这里是大家的林语冰。地球人都知道,Vue 生态的状态管理官方库有且仅有一个 ------ Vuex,就状态管理维度而言,从 Vue 2 迁移到 Vue 3 基本上是从 Vuex 迁移到 Pinia。Pinia 和 Vuex 的 API 雷同,且兼容 Vue 2,十分稳定。反观 React 生态的"状态管理大师"则更加自由和灵活,社区状态管理库多极化发展。今天我们就来极简科普一下 React 社区状态管理的"八大奇迹"。

免责声明

本文属于是语冰的直男翻译了属于是,仅供粉丝参考,英文原味版请临幸 Current state of state management

TL;DR

  • 为什么我需要状态管理器?
  • Recoil:原子方法,Facebook 孵化,简单
  • Jotai:原子方法,比 Recoil 更丰富的功能(开箱即用)
  • Redux:调度改变状态的时间,一大坨代码模板
  • ZustanduseState 增强版
  • HookstateuseState 增强版
  • Mobx:React 的纯 JS 适配器,state in classes
  • Effector:React 的纯 JS 适配器,创建 effect 并将在 store 调度祂们
  • Valtio:将初始状态封装在代理中,然后直接修改祂,实现更改传播

为什么我需要状态管理器?

我们以一个简单的待办事项列表 app 为例。如果该 app 只是使用 API 创建、显示、编辑和删除(CRUD,增删改查)条目,那么可能不需要状态管理器。一切都可以通过简单的 fetch 和基本的 React 结构来完成,或者诉诸 react-query 及其缓存。

但是请想象一下,我们想要添加主题切换、复杂的通知系统、撤消/重做功能或无需 API 的完整离线模式。其中每种功能都可能需要全局状态,这取决于 app 的用例和未来规划。

添加全局状态问题不大,修改状态问题很大,删除状态则是不可能事件。

我曾经开发过一个 app,其中 Redux 有且仅有用于缓存 API 调用,并且与该 app 的各个方面交织在一起。这就需要重写和重构 app 中的每个组件。

这就是我使用使用 react-query 的原因,因为祂可以满足 99% 的用例。如果祂无法尽善尽美,那么我个人会选择 上下文提供者 或原子状态(稍后细说)。但仍然存在需要鲁棒的全局状态管理器的用例。举个栗子,不与 API 同步的完全离线的 app,比如混音器、图片编辑器、简单的笔记 app......

神马都是浮云,让我们一头钻入还在维护的、鲁棒的状态管理解决方案,这通过为每个解决方案实现一个简单的计数器 app 来实现。

Recoil

Recoil 是 Facebook 制作的一个短小精悍的工具,祂是上述列表中首个利用原子方法进行状态管理的工具。您创建原子(单独的原子状态值),然后使用像 useSate 一样工作的 hook,但会传播到用到祂们的每个组件。

Jotai

Jotai 同样使用原子方法。祂与 Recoil 雷同,但多亏其内置实用功能(存储、异步、SSR 等)和集成(tRPC、react-query 等),祂提供了更丰富的功能,这意味着,您可以拥有状态管理和 API 雷同的面向开发者界面。

Redux

Redux 一直以来都是首选的全局状态管理库。但现在祂比其他库需要更多的模板代码。祂将 reducers 组合成一个 store。

您派发 action,然后 reducer 捕获这些 action,并相应地修改 store 中的状态。

祂们孵化了 redux-toolkit,主要解决了模板问题,但与其他库相比,Redux 仍然需要一大坨设置,因此我选择分享祂们诉诸 redux-kit 实现的计数器 app 示例的 链接,这比我这里只展示一个组件更有意义,这是 redux-toolkit 中的一个 slice 的实现。

Zustand

Zustand 是有趣的熊孩子。祂的工作原理是创建一个包含值和修改函数的 store。这样数据就被完全封装了。这就很棒,因为您拥有一致的接口和可能更少的重复代码。

Hookstate

Hookstate 使用 hookstate 函数创建状态。该 store 可以直接从外部或者使用 React 组件内部的 hook 来操作。差不多就是这样了。我强烈建议您瞄一眼祂们官网上的示例。

Mobx

Mobx 也是一个比较 old school 的状态管理器。祂和纯 JS 无缝衔接(无需 React 即可使用),也有 React 的适配器。祂使用完全封装整个状态的 JS 类。表演一个一目了然的代码示例相当头大。有码有真相,一码胜千言。不烦去瞄一眼祂们的官网吧。

Effector

Effector 通过调用由您定义、由 store 订阅的事件来工作。祂有极简的功能 API,尽管相关说明可能有点吓人。

Valtio

Valtio 十分有趣,因为祂在初始状态外围使用了一个可以直接修改的代理。祂与 Zustand API 雷同,但删除了一层抽象。祂们各有用处,因此如果您要二选一,那么我建议直接比较文档。

您会选啥?

我个人会选择 jotai,因为祂诉诸不同的集成提供了易用性和可扩展性。

您现在收看的是直男翻译系列,学废了的小伙伴可以点赞友情赞助本系列,我们每天佛系投稿,欢迎关注和订阅最新动态。谢谢大家的彼芯,掰掰~

相关推荐
小牛itbull42 分钟前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
FinGet12 小时前
那总结下来,react就是落后了
前端·react.js
王解15 小时前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
AIoT科技物语1 天前
免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
初遇你时动了情1 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router
番茄小酱0011 天前
ReactNative中实现图片保存到手机相册
react native·react.js·智能手机
王解1 天前
Jest进阶知识:深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架
小牛itbull1 天前
ReactPress—基于React的免费开源博客&CMS内容管理系统
前端·react.js·开源·reactpress
~甲壳虫2 天前
react中得类组件和函数组件有啥区别,怎么理解这两个函数
前端·react.js·前端框架
用户8185216881172 天前
react项目搭建create-router-dom,redux详细解说
react.js