学习 zustand

学习 zustand

• https://github.com/pmndrs/zustand
• 告别繁杂的状态管理：Zustand 的简洁之道
• Zustand 状态库：轻便、简洁、强大的 React 状态管理工具
• 关于 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 源码