React中Zustand状态管理的实现

zustand 在 GitHub 上拿到了 58,272 个 Star。

一个 React 状态管理库做到这个数字，说明它确实解决了问题。

1、它是干嘛的

一句话：用最少的代码管理 React 应用状态。

zustand 的核心理念很简单，不搞 Context Provider 套娃，不写一堆 Redux 样板代码，直接一个 hook 搞定状态读写。

装一下：

npm install zustand

写一个 store：

import { create } from 'zustand'
const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

组件里直接用：

function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} around here ...</h1>
}

没有 Provider，没有 connect，没有 reducer。定义 store，用 hook 读取，完事。

2、为什么选它而不是 Redux

做过 React 项目的人都有体会，Redux 的样板代码太多了。定义 action type，写 reducer，连 Provider，connect 组件，一套流程下来，状态管理本身的逻辑反而被淹没了。

zustand 把这些全砍了。store 就是一个 hook，状态更新靠 set 函数，组件自动响应变化。按需取值，只有你选的那部分状态变了才触发重渲染。

跟 Context 比，zustand 也更轻。Context 会在 Provider 树变化时通知所有消费者，zustand 只更新真正依赖变化的组件。

3、不只是 React

zustand 可以脱离 React 单独使用。引入 vanilla 版本：

import { createStore } from 'zustand/vanilla'

const store = createStore((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}))

const { getState, setState, subscribe } = store

在 Node.js 后端、Web Worker、或者任何 JavaScript 环境里都能用它管状态。

4、中间件

zustand 自带几个实用中间件。

persist：把 store 数据写入 localStorage 或 sessionStorage，刷新页面不丢状态。

immer：用可变语法写不可变更新，嵌套再深也不怕。

devtools：接入 Redux DevTools，调试状态变化一目了然。

redux：兼容 Redux reducer 写法，从 Redux 迁移过来几乎不用改业务逻辑。

5、处理了哪些坑

React 状态管理有几个出了名的难题。zombie child problem，组件卸载后异步回调还在更新已销毁的状态。React Concurrent Mode 下的渲染撕裂。跨渲染器的 context 丢失。

这些问题 zustand 在内部都做了处理。不需要开发者额外写防御代码，用就行。

6、适合谁

• 正在选型、觉得 Redux 太重的 React 项目
• 需要轻量状态管理、不想引入大框架的小型应用
• 要在 React 之外管状态的场景，比如 Node 服务或 Worker
• 正在选型、觉得 Redux 太重的 React 项目
• 需要轻量状态管理、不想引入大框架的小型应用
• 要在 React 之外管状态的场景，比如 Node 服务或 Worker

到此这篇关于React中Zustand状态管理的实现的文章就介绍到这了,更多相关React Zustand状态管理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！