学习 zustand

最新推荐文章于 2025-07-07 17:28:57 发布

成_蹉_跎

最新推荐文章于 2025-07-07 17:28:57 发布

阅读量902

点赞数 4

CC 4.0 BY-SA版权

文章标签： zustand react

本文链接：https://blog.csdn.net/cheng_cuo_tuo/article/details/136945890

本文介绍了Zustand，一个轻量级且功能强大的React状态管理工具，探讨了其安装、常用操作、中间件（如订阅选择器和devtools集成）以及一些常见问题，如set方法的行为和浅比较的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习 zustand

代码库 https://gitee.com/nian_zuo_chen/learnrect/tree/master/zustand

安装

npm install zustand

常用

create 创建一个 store
set 函数修改 store 内容
get 函数，获取当前 store 中内容
store.getState() 静态获取当前 store 的所有内容
store.subscribe(listener) 订阅 store 变更，任意一个值变更，都会执行 listener
useShallow 可以开启浅比较，对象属性变化不触发

中间件

subscribeWithSelector 在创建 store 时候增加，允许订阅的时候增加选择器，来限制监听的范围 listener 中返回的数据和选择器选择的内容一致。
devtools 在创建 store 时候增加，结合 redux-dev-tools 浏览器插件可以查看 store 变化
处理持久化,persist 开启持久化，createJSONStorage 使用 JSON.stringify 和 JSON.parse把值设置为 JSON 字符串进行存取

疑问

zustand.set 的返回值直接覆盖全部 state 还是做数据合并到 state 中？
由第二个参数控制，默认是 false 标识数据合并，当返回 true 时候，是直接覆盖。
当一次从 store 中获取多个数据时候，建议使用 zustand/react/shallow 有啥用？
可以进行浅比较，避免没必要的渲染，和所有的浅比较一样，也会引入数据变化无感知的困惑，可以结合 devtools 来检查
对比 UpdateObj.tsx、UpdateObj2.tsx 和 ShallowEqual.tsx 中获取 store 数据的方式，为什么只有 UpdateObj.tsx 可以监听到变化？
- UpdateObj.tsx、UpdateObj2.tsx 都没有使用 useShallow
  但是 UpdateObj2.tsx 中 (state) => stat.user 每次返回的都是 store 中的 user，所以对组件而言路径地址没变，所以不触发刷新。
  而UpdateObj.tsx 中 (state) => ({user: stat.user}) 每次返回的都是一个新的 {user: xxx} 对象，地址一直在变，所以触发刷新
- UpdateObj.tsx 和 ShallowEqual.tsx 获取数据一样，每次都返回一个新的 {user: xxx} 对象，但是 useShallow 内的 shallow 算法是 Object.keys 一致，以及第一层的 obj[key] 的值一致（使用 Object.is 比较），就算做未变更，所以不触发刷新。在这两个组件中 {user: xxx} 虽然是两个对象，但是它们 kyes 一样都是 ["user"]，然后指向的都是 stroe.user 这个地址一致，所以算作未变化。这要小心使用呀。shallow.ts 源码