Zustand 状态管理库：极简而强大的解决方案

news2025/6/12 21:37:00

Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。

在这里插入图片描述

核心优势对比

在这里插入图片描述

基本使用指南

1. 创建 Store

// store.js
import create from 'zustand'

const useStore = create((set) => ({
  count: 0,
  todos: [],
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
  addTodo: (text) => set((state) => ({ 
    todos: [...state.todos, { id: Date.now(), text }]
  })),
  removeTodo: (id) => set((state) => ({
    todos: state.todos.filter(todo => todo.id !== id)
  }))
}))

2. 在组件中使用 Store

// Counter.jsx
import { useStore } from './store'

function Counter() {
  const count = useStore(state => state.count)
  const increase = useStore(state => state.increase)
  const decrease = useStore(state => state.decrease)

  return (
    <div>
      <button onClick={decrease}>-</button>
      <span>{count}</span>
      <button onClick={increase}>+</button>
    </div>
  )
}

3. 使用 Todo List

// TodoList.jsx
import { useStore } from './store'

function TodoList() {
  const todos = useStore(state => state.todos)
  const addTodo = useStore(state => state.addTodo)
  const removeTodo = useStore(state => state.removeTodo)
  const [input, setInput] = useState('')
  
  const handleSubmit = (e) => {
    e.preventDefault()
    if (input.trim()) {
      addTodo(input)
      setInput('')
    }
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input 
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="添加新任务"
        />
        <button type="submit">添加</button>
      </form>
      
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => removeTodo(todo.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  )
}

高级功能

1. 选择器优化（自动避免不必要的渲染）

// 使用选择器精确获取需要的数据
const count = useStore(state => state.count)

// 等价于传统的解决方案：
// const count = useSelector(state => state.count) // Redux

2. 计算值（Derived state）

// 在 create 函数中
const useStore = create((set, get) => ({
  // ...其他状态...
  completedTodos: () => get().todos.filter(todo => todo.completed),
  completedCount: () => get().completedTodos().length
}))

3. 异步操作

const useStore = create((set) => ({
  posts: [],
  loading: false,
  error: null,
  fetchPosts: async () => {
    set({ loading: true })
    try {
      const response = await fetch('https://api.example.com/posts')
      const data = await response.json()
      set({ posts: data, loading: false })
    } catch (error) {
      set({ error, loading: false })
    }
  }
}))

// 在组件中调用
useEffect(() => {
  useStore.getState().fetchPosts()
}, [])

4. 状态持久化（localStorage）

import create from 'zustand'
import { persist } from 'zustand/middleware'

const useStore = create(persist(
  (set) => ({
    darkMode: false,
    toggleDarkMode: () => set(state => ({ darkMode: !state.darkMode }))
  }),
  {
    name: 'theme-storage', // localStorage 键名
  }
))

5. 插件系统（如 Redux DevTools 集成）

import { devtools } from 'zustand/middleware'

const useStore = create(devtools((set) => ({
  // ...
})))

React + Zustand 完整示例

// App.jsx
import React from 'react'
import Counter from './Counter'
import TodoList from './TodoList'
import ThemeSwitcher from './ThemeSwitcher'

function App() {
  return (
    <div className="app">
      <Counter />
      <TodoList />
      <ThemeSwitcher />
    </div>
  )
}

// ThemeSwitcher.jsx
import { useStore } from './store'

function ThemeSwitcher() {
  const darkMode = useStore(state => state.darkMode)
  const toggleDarkMode = useStore(state => state.toggleDarkMode)
  
  return (
    <div style={{ background: darkMode ? '#333' : '#fff', color: darkMode ? '#fff' : '#000' }}>
      <h2>当前主题: {darkMode ? '暗黑' : '明亮'}</h2>
      <button onClick={toggleDarkMode}>切换主题</button>
    </div>
  )
}

状态更新模式对比

1. 基础更新

set({ count: 42 }) // 直接设置

2. 基于当前状态更新

set(state => ({ count: state.count + 1 }))

3. 部分状态合并

set({ newProperty: 'value' }) // 自动合并到现有状态

4. 深度状态更新（使用 Immer）

import produce from 'immer'

const useStore = create(set => ({
  user: {
    name: 'John',
    address: {
      city: 'New York'
    }
  },
  updateCity: (city) => set(produce(state => {
    state.user.address.city = city
  }))
}))

与其他状态管理方案整合

1. 与 React Context 配合使用

const StoreContext = createContext()

export const StoreProvider = ({ children }) => {
  const store = useRef(useStore).current
  return (
    <StoreContext.Provider value={store}>
      {children}
    </StoreContext.Provider>
  )
}

// 在组件中使用
export const useStoreContext = () => useContext(StoreContext)

2. 与 React Query 结合（数据获取）

// 在 Zustand store 中
{
  fetchUser: async (id) => {
    const response = await fetch(`/api/users/${id}`)
    const data = await response.json()
    set({ user: data })
  }
}

// 在组件中
const fetchUser = useStore(state => state.fetchUser)

useEffect(() => {
  fetchUser(userId)
}, [userId, fetchUser])

性能优化技巧

1. 细粒度选择器

// 只订阅 todos 数组，而非整个 state
const todos = useStore(state => state.todos)

2. 使用 shallow 比较

import shallow from 'zustand/shallow'

// 选择多个状态值
const { count, theme } = useStore(
  state => ({ count: state.count, theme: state.theme }),
  shallow
)

3. 批处理多个更新

set({
  count: 10,
  todos: updatedTodos
})

总结：为什么选择 Zustand？

  1. 极简 API：只需一个 create 函数即可创建 store
  2. 高性能：精确的状态订阅避免了不必要的渲染
  3. 灵活性：支持异步操作、中间件和持久化
  4. 零依赖：无冗余依赖，包大小仅约 1KB
  5. 简单与强大并存：既适合小型项目，也能胜任大型复杂应用
    Zustand 提供了一种简约而不简单的状态管理方案，非常适合现代 React 应用开发。它消除了 Redux 的模板代码，同时提供了同样强大的功能，是状态管理方案的理想选择。

zustan与redux相比有什么优点

  • 引用 10 篇资料作为参考
    1. zustand 跟 redux 有什么区别？zustand 的优势是什么？ 解决redux 的哪些问题？Zustand - 掘金
    2. 是时候放弃redux了,zustand是完美替代者(主要是源码分析) - 掘金
    3. 前端状态管理库 redux vs zustand前端状态库 redux vs zustand，redux是数据单向流时代 - 掘金
    4. [开源]一个开源、免费在线数据建模、元数据管理平台，简单易用
    5. 一文掌握 TanStack Query：让 React 数据管理变得简单高效
    6. React状态管理新篇章：深入剖析Zustand库的优势与应用-易源AI资讯 | 万维易源
    7. 【早阅】Zustand采纳指南
    8. zustand --一款轻量级别的状态管理工具_zustand官网-CSDN博客
    9. 告别繁杂的状态管理:Zustand 的简洁之道1. Zustand Zustand 是一个轻量级的状态管理库,用于 Ja - 掘金
    10. 前端开发新趋势：使用 Zustand 打造轻量级状态管理-CSDN博客
      Zustand 相比 Redux 的核心优势在于简洁性、性能优化和开发体验，以下是详细对比：

🚀 一、设计理念与开发体验

在这里插入图片描述

⚡ 二、性能优化机制

在这里插入图片描述

🔧 三、灵活性与扩展性

在这里插入图片描述

💡 四、典型场景对比

// ✅ Zustand 示例（15行代码实现计数器）
import create from 'zustand';

const useCounter = create((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  reset: () => set({ count: 0 })
}));

function Counter() {
  const { count, increment } = useCounter();
  return <button onClick={increment}>{count}</button>;
}

// ❌ Redux 同等功能需约 50+ 行代码：
// 1. 定义 action types
// 2. 编写 action creators
// 3. 创建 reducer
// 4. 配置 store 和 Provider
// 5. 组件中用 useSelector/useDispatch

📌 总结：Zustand 的核心优势

  1. 极简开发：减少 70% 样板代码，提升开发效率；
  2. 开箱即用：内置异步、持久化、DevTools 支持；
  3. 性能卓越：精准更新组件，避免无效渲染；
  4. 渐进式适配：既适合小型项目，也能扩展至大型应用。

💡 建议选择策略：
- 中小项目/快速迭代 → Zustand；
- 超大型应用/严格状态追溯 → Redux + Redux Toolkit。
更多实践案例可参考：Zustand 官方文档 。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2407910.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…
阅读更多...
Unity3D中Gfx.WaitForPresent优化方案

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…
阅读更多...
Appium+python自动化（十六）- ADB命令

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…
阅读更多...
工业安全零事故的智能守护者：一体化AI智能安防平台

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…
阅读更多...
黑马Mybatis

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…
阅读更多...
从WWDC看苹果产品发展的规律

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…
阅读更多...
【WiFi帧结构】

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…
阅读更多...
《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…
阅读更多...
React第五十七节 Router中RouterProvider使用详解及注意事项

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…
阅读更多...
shell脚本--常见案例

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件
阅读更多...
【力扣数据库知识手册笔记】索引

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…
阅读更多...
2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…
阅读更多...
AI Agent与Agentic AI：原理、应用、挑战与未来展望

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…
阅读更多...
阿里云ACP云计算备考笔记 (5)——弹性伸缩

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …
阅读更多...
以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…
阅读更多...
JavaScript 中的 ES|QL：利用 Apache Arrow 工具

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…
阅读更多...
基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…
阅读更多...
边缘计算医疗风险自查APP开发方案

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…
阅读更多...
.Net框架，除了EF还有很多很多......

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…
阅读更多...
智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023