腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

综合排序丨最热优先丨最新优先

原子化状态管理库 Jotai，它和 Zustand 有啥区别？

但是 jotai 在介绍原子化思想时提到了这个：可能你用过 redux、zustand 这些状态管理库，jotai 和它们是完全两种思路。那 zustand 支持的中间件机制在 jotai 里怎么实现呢？ zustand 支持通过中间件来修改 get、set 函数：比如在 set 的时候打印日志。其实和 zustand 中间件修改 get、set 方法的原理是一样的，只不过 atom 本来就支持自定义 get、set 方法。总结今天我们学了状态管理库 jotai，以及它的原子化的思路。 zustand 是所有 state 放在全局 store 里，然后用到的时候 selector 取需要的部分。 jotai 是每个 state 单独声明原子状态，用到的时候单独用或者组合用。不管是状态、派生状态、异步修改状态、中间件等方面，zustand 和 jotai 都是一样的。区别只是一个是全局 store 里存储所有 state，一个是声明原子 state，然后组合。

神说要有光zxg

2024-04-17

1.4K0

标签:

jotai使用快速使用定义变量 import { atom } from 'jotai' const countAtom = atom(0) const countryAtom = atom('Japan atom({ 'Dragon Ball': 1984, 'One Piece': 1997, Naruto: 1999 }) 复制代码在页面中使用 import { useAtom } from 'jotai themeColor')||'#1890ff') 复制代码 index.tsx import {themeColorAtom} from '@/store' import { useAtom } from 'jotai 官方例子 import { useAtom } from 'jotai' import { atomWithStorage } from 'jotai/utils' const darkModeAtom , RESET } from 'jotai/utils' const textAtom = atomWithStorage('text', 'hello') const TextBox = () =

2022-07-06

6780

标签:

2023再谈前端状态管理

目前比较常见的状态管理库有 Redux（包括基于 Redux 的 Dva、Icestore）、Mobx、Zustand、Recoil、Jotai、Valtio、Hox 等。 Mobx 作为往年热度仅次于 Redux 的状态管理库，位置正逐步有被 zustand 超越的趋势。recoil/jotai/valtio 作为这两年热门的新兴库热度也在逐步上升。接下来我们要介绍 5 个 Hooks 时代的状态库，分别是 recoil、zustand、jotai、valtio、hox。 zustand 德语 "状态"，jotai 日语 "状态"、valtio 芬兰语 "状态"。 Zustand vs Jotai Zustand 和 Jotai 之间有两个主要不同： Zustand 是单一 store，Jotai 由原子 atom 组合而成； Zustand 的 store 存储在

2023-08-21

2.9K0

标签:

Jotai 实战（上）

早前，我们介绍了《从 Recoil 到 Jotai》的迁移。其实随着迁移的过程中，也有着一些实践性的好方法，这里做一个总结提炼。文章中的代码地址：https://github.com/bigbigDreamer/jotai-BPs 大纲 atom 细粒度作用域控制 atom 懒请求 atom 本地缓存 atom 动态 key import { Provider } from 'jotai' const Component: FC = ({ children }) => <Provider>{ children }</Provider 实现方案 store.ts import { atomFamily } from 'jotai/utils'; import {WritableAtom, atom} from "jotai"; 好了，Jotai BPs 上篇到这里就结束了。我是不换，如果写的不正确，欢迎评论区批评指正，如果对你有帮助，请点个小赞，赠人玫瑰，手有余香。我们下期再见。

2024-04-30

4970

标签:

Zustand 用法记录

Zustand 可以做什么？ CounterComponent.tsx├── stores/│ └── useCounterStore.ts└── index.tsx// store.tsimport create from 'zustand 使用对象更新状态import create from 'zustand';// 定义状态类型interface BearState { bears: number; increasePopulation import create from 'zustand';// 用户基本信息存储interface UserBasicInfo { name: string; age: number; npm install immerimport create from 'zustand';import produce from 'immer';interface NestedState {

2025-03-25

5970

标签:

精读《zustand 源码》

zustand 是一个非常时髦的状态管理库，也是 2021 年 Star 增长最快的 React 状态管理库。它的理念非常函数式，API 设计的很优雅，值得学习。概述首先介绍 zustand 的使用方法。精读其实大部分使用特性都在利用 React 语法，所以可以说 50% 的特性属于 React 通用特性，只是写在了 zustand 文档里，看上去像是 zustand 的特性，所以这个库真的挺会借力的对 zustand 来说，便是定义在 vanilla.ts 文件的 createStore 了。总结 zustand 是一个实现精巧的 React 数据流管理工具，自身框架无关的分层合理，中间件实现巧妙，值得学习。

2022-03-15

1.8K0

标签:

React-全局状态管理的群魔乱舞

而接下来，我们来分析一下React中状态管理的新贵 Recoil[1] Jotai[2] Zustand[3] Valtio[4] 等库中所涉及的设计理念和心智模式。更新不可变 Zustand 更新不可变 Valtio 更新可变运行时性能重新渲染的优化「手动优化」通常意味着创建订阅特定状态的选择器函数（Selector）。库描述 React-Redux 利用特定选择器函数，「手动优化」 Recoil 通过订阅原子的「半手动方式」 Jotai 通过订阅原子的「半手动方式」 Zustand 利用特定选择器函数，「手动优化」库描述 React-Redux 「手动」管理 Recoil 0.3.0版本后- 「自动」管理 Jotai 「自动」管理 - atoms作为键存储在WeakMap中 Zustand 「半自动」--API : https://jotai.org/ [3] Zustand: https://github.com/pmndrs/zustand [4] Valtio: https://github.com/

前端柒八九

2022-08-25

4.8K0

标签:

Redux真的该换了吗？2025年React状态管理的残酷真相

Zustand - 赢家。 Jotai - 引入了"atoms"这种抽象概念，虽然强大但学习曲线陡峭。 Zustand ✅ - 开箱即用，自动订阅你访问的属性。 Zustand - 由主流开源社区维护(pmndrs)，活跃度高。作者同时也是Jotai的维护者，说明这是个可信赖的团队。 TanStack Query - 更新频繁，有赞助商支持，生态健康。 Q: Zustand能替代Redux吗？对于共享状态的需求，是的。但Zustand是"随意型"的，这对小团队很好，对大团队可能造成代码风格混乱。所以选择时要考虑团队规模。

2025-11-20

7120

标签:

忘掉 Redux，拥抱 Zutand 和 Jotai 的全新世界

三、Jotai 的独特优势（一）原子化设计理念 Jotai 的原子化设计理念是其独特之处。在状态管理中，原子化意味着将状态拆分成最小的、独立的单元，即原子（Atoms）。此外，Jotai 还支持派生状态，开发者可以基于现有原子轻松派生出新的状态，满足复杂的计算和逻辑需求。同时，Jotai 也与其他库和工具具有良好的兼容性，可以与其他状态管理库或框架集成，为开发者提供了更多的灵活性和选择。首先，使用 Zutand 创建一个存储购物车物品的状态： import create from 'zustand'; const useCartStore = create((set) => ({ 实现用户登录状态管理以用户登录状态的管理为例，使用 Jotai 来实现： import { atom } from 'jotai'; const isLoggedInAtom = atom(false

2024-10-12

6690

标签:

从 Recoil 到 Jotai （上）

Recoil VS Jotai 参考： Jotai 讨论区 VS Blog Jotai 相比较 Recoil 主要有几个区别： atom 作为 key 比起唯一string key，样板代码变少了、内存泄漏风险减少了；包体积更小； API 更简单容易理解，可拔插、集成能力更优异；维护者更积极，BUG & Feature 响应更快；性质不同，一个是稳定性质一个是实验性质； Jotai 新的原子型状态管理库的后备方案；核心维护者是 Dai-shi，目前有 14.9k+ 星星，受众公司也蛮多；聊到这里，咱们可以步入正题了，我准备从原子型状态的思想、recoil 到 jotai 的 API 迁移指南入题讲解。 jotai 自己手撸了一个源码，借助 WeakMap 实现的。 ', default: { data: [] } }) jotai import { atom } from 'jotai'; const todosAtom = atom({ data:

2024-04-30

5390

标签: