- 综合排序
- 最热优先
- 最新优先
- 来自专栏信息安全小学生
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 {
43100编辑于 2025-03-25 - 来自专栏前端精读评论
精读《zustand 源码》
zustand 是一个非常时髦的状态管理库，也是 2021 年 Star 增长最快的 React 状态管理库。它的理念非常函数式，API 设计的很优雅，值得学习。 概述 首先介绍 zustand 的使用方法。 精读 其实大部分使用特性都在利用 React 语法，所以可以说 50% 的特性属于 React 通用特性，只是写在了 zustand 文档里，看上去像是 zustand 的特性，所以这个库真的挺会借力的 对 zustand 来说，便是定义在 vanilla.ts 文件的 createStore 了。 总结 zustand 是一个实现精巧的 React 数据流管理工具，自身框架无关的分层合理，中间件实现巧妙，值得学习。
1.7K30编辑于 2022-03-15 - 来自专栏前端少年汪的博客
放弃Redux吧，转投Zustand吧
Zustand是什么 Zustand 是一个为 React 应用程序设计的开源状态管理库，它旨在提供一种简单、轻量级且易于使用的方式来管理应用程序的状态。 中间件支持 Zustand 支持大量的中间件，如 Immer、Redux 中间件等，这使得开发者可以根据需要轻松地扩展 Zustand 的功能。 如何使用Zustand 1. 安装 Zustand 首先，你需要安装 Zustand 库。 可以通过 npm 或 yarn 来安装： npm install zustand # 或者 yarn add zustand 2. 总结 以上就是zustand的全部用法了。已经简单阐述了一下为什么要选zustand而不是继续用redux。
1.7K10编辑于 2024-04-01 - 来自专栏码艺坊
Pinia、Redux、Zustand：前端状态管理库横向对比
因此，不同的前端生态诞生了不同的解决方案：Vue生态：Vuex→PiniaReact生态：Redux、MobX、Zustand、Recoil等本文主要对比Pinia、Redux、Zustand三者，覆盖主流 Zustand极简灵活，非常适合快速开发和中小型项目。 Zustand：使用订阅机制，只会触发实际使用该状态的组件更新，性能出色。可以说：Pinia与Zustand性能更自然（依赖追踪/订阅更新）。Redux性能也不错，但开发者需要多关注优化手段。 Zustand：极简、灵活，特别适合中小型React项目或快速MVP。如果你觉得Redux太重，Zustand会是更轻量的替代。六、选型建议如果你在Vue生态：优先选择Pinia。 如果你在React生态：大型、多人协作项目→ReduxToolkit中小型、快速迭代项目→Zustand如果你追求学习成本最低：Pinia（Vue）或Zustand（React）。
80800编辑于 2025-09-15 - 来自专栏h5
react18+vant+zustand4仿微信聊天ReactChat
图片使用了最新技术栈React18、React-Router v6、react-vant、Zustand4开发构建项目。 图片图片技术栈开发工具：Vscode框架技术：react18+react-dom+vite4.xUI组件库：react-vant (有赞react移动端UI库)状态管理：zustand^4.3.9路由管理 element: <Register /> }]const Router = () => useRoutes(routerConfig)export default RouterReact18 hooks状态管理Zustand4Zustand 图片/** * Zustand状态管理，配合persist本地持久化存储*/import { create } from 'zustand'import { persist, createJSONStorage } from 'zustand/middleware'export const authStore = create( persist( (set, get) => ({
89840编辑于 2023-08-16 - 来自专栏前端大合集
轻量级状态管理库 Zustand 的基本使用
Zustand 介绍 特点 1. 安装 npm install zustand 2. import {create} from 'zustand' const useBearStore = create((set) =>({ // 初始化数据状态 count: 同步修改 import { create } from 'zustand' import { Button } from 'antd' import '. 异步修改 import { create } from 'zustand' import { Button } from 'antd' import '. 绑定store 到组件 function Zustand() { const { fetchChannel, channelsList } = useStore() return
62710编辑于 2024-07-29 - 来自专栏前端达人
Zustand：让React状态管理更简单、更高效
什么是Zustand？ 近年来，React社区涌现出了许多新的状态管理库，比如Jotai、Recoil，还有本文的主角——Zustand。 Zustand凭借其简洁的API、低学习曲线和对TypeScript的无缝支持，成为了众多选项中的热门之选。 但是，你可能还不太熟悉Zustand。 在React项目中使用Zustand Zustand的设计理念是让状态管理变得简单而高效，这不仅体现在其轻量级的体积上，更体现在其易用性上。 接下来，我们将通过一个简单的计数器示例以及如何在状态中存储数组，来展示如何在React项目中使用Zustand。 1. 安装Zustand 首先，你需要在项目中安装Zustand。 可以通过npm或yarn来进行安装： npm install zustand 或者 yarn add zustand 2.
3.4K11编辑于 2024-03-27 - 来自专栏神光的编程秘籍
原子化状态管理库 Jotai，它和 Zustand 有啥区别？
用 zustand 是这样写： import { create } from 'zustand' const useStore = create((set) => ({ aaa: 0, bbb 这个叫做 selector： 状态变了之后，zustand 会对比 selector 出的状态的新旧值，变了才会触发组件重新渲染。 此外，异步逻辑，比如请求服务端接口来拿到数据，这种也是一个放在全局 store，一个单独放在原子状态里： 在 zustand 里是这样： import { create } from 'zustand' 那 zustand 支持的中间件机制在 jotai 里怎么实现呢？ zustand 支持通过中间件来修改 get、set 函数： 比如在 set 的时候打印日志。 试一下： import { create } from 'zustand' import { persist } from 'zustand/middleware' const useStore =
1.3K21编辑于 2024-04-17 当 React 路由 “失忆”：我如何用 AI 揪出 Vite 环境下的隐形状态杀手
项目中，从详情页返回列表页后，Zustand 状态被重置，控制台无报错。 Zustand 持久化插件的 “隐形操作”：zustand/middleware/persist 可能因存储 key 或序列化逻辑，导致路由切换时状态被清空。 zustand';import { persist } from 'zustand/middleware/persist';export const useDeviceStore = create( 四、釜底抽薪：定制化状态持久化逻辑结合 Cursor 提示，我推测：Vite 开发环境下，模块热更新导致 Zustand 持久化存储 “混乱”—— 路由跳转时，Vite 刷新模块，Zustand 误把 修改 store/device.ts：tsimport { create } from 'zustand';import { persist } from 'zustand/middleware/persist
23710编辑于 2025-09-11- 来自专栏程序员小助手
【GitHub日报】22-10-09 zustand、neovim、webtorrent、express 等4款App今日上新
【GitHub日报】2022-10-09 zustand、neovim、webtorrent、express 等 4 款 App 今日上新 zustand[1] Bear necessities for state management in React 最新发布版本：[pmndrs/zustand] Release v4.1.2 - v4.1.2 更新内容： v4.1.2[2] • Repository 引用链接 [1] zustand: https://github.com/pmndrs/zustand [2] v4.1.2: https://github.com/pmndrs/zustand/releases /tag/v4.1.2 [3] pmndrs/zustand: https://github.com/pmndrs/zustand [4] v4.1.2: https://github.com/pmndrs /zustand/tree/v4.1.2 [5] 509175c: https://github.com/pmndrs/zustand/commit/509175c0b83f3615f1c2b94979fd06aec6c3e8e9
49320编辑于 2022-12-20 - 来自专栏前端达人
Redux没错，但开发者已经投票用脚了
Redux曾经是React生态的"国王"，但最近的技术社区里，你会频繁看到这样的声音： "我们用Zustand替代了Redux，删除了好几百行代码" "Redux就像企业级的仪式感，而Zustand让我专注于真正的产品逻辑 从2-3周 → 2-3天 包体积（min+gzip） 从~12kb → ~2kb 第二部分：Zustand的极简哲学 什么是Zustand？ 同样的计数器，Zustand怎么做 import { create } from'zustand'; // 就这么简单 const useCounterStore = create((set) => 为什么Zustand能这样简洁？ 终极建议 团队规模 推荐 理由 1-3人 Zustand 无需重量级工具 4-20人 Zustand 开发效率优先 20-100人 Zustand + 团队约定 自律的架构 100+人 Redux Toolkit
22610编辑于 2025-11-20 - 来自专栏前端达人
Redux真的该换了吗？2025年React状态管理的残酷真相
第三个真相：Zustand正在悄悄赢 如果你承认确实需要共享状态，那么下一个问题是：用什么库？ Zustand - 赢家。 Zustand ✅ - 开箱即用，自动订阅你访问的属性。 Q: Zustand能替代Redux吗？ 对于共享状态的需求，是的。但Zustand是"随意型"的，这对小团队很好，对大团队可能造成代码风格混乱。所以选择时要考虑团队规模。 分阶段迁移： 新功能不用Redux，改用TanStack Query + Zustand 现有功能逐个抽离：远程数据部分→TanStack Query，URL参数→nuqs，其余部分→Zustand 最后
33810编辑于 2025-11-20 - 来自专栏h5
ReactAdminArco自创react18+arco后台前端项目框架管理系统
使用最新前端技术react+arco.design+zustand+bizcharts+axios纯手撸后台管理系统。 图片图片技术栈编辑器：vscode框架技术：react18+vite4+react-router+zustand+axios组件库：arco-design (字节前端react组件库)路由管理：react-router-dom ^6.16.0状态管理：zustand^4.4.1模拟数据：mockjs^1.1.0模拟请求：axios^1.5.1图表库：bizcharts^4.1.22编辑器组件：@wangeditor/editor-for-react 新react状态管理react-admin使用 了新一代react状态管理插件zustand。 图片/** * react18状态管理库Zustand4，中间件persist本地持久化存储*/import { create } from 'zustand'import { persist, createJSONStorage
1.8K80编辑于 2023-10-18 - 来自专栏h5
Electron27ReactAdmin自研electron+react18电脑端后台管理解决方案
使用技术 编程工具：vscode 框架技术：electron27+vite^4.4.5+react18+zustand+react-router UI组件库：arco-design (字节react轻量级 UI组件库) 样式处理：sass^1.69.5 图表组件：bizcharts^4.1.23 MD编辑器组件：@uiw/react-md-editor 本地存储管理：zustand^4.4.4 打包管理： small" icon={<Icon name="ve-icon-lang" />} /> </Dropdown> ) } 搭配zustand /** * react状态管理库Zustand4，中间件persist本地持久化存储 */ import { create } from 'zustand' import { persist, createJSONStorage } from 'zustand/middleware' import { generate, getRgbStr } from '@arco-design/color' export const appStore
1.1K30编辑于 2023-10-30 - 来自专栏前端技术江湖
2023再谈前端状态管理
Zustand vs Redux zustand 和 redux 是非常像的，都基于不可变状态模型，都基于单向数据流。 和 zustand 不同的是，他是一个组件级别的状态管理库。和 zustand 相同的是同样都基于不可变状态模型。 Zustand vs Jotai Zustand 和 Jotai 之间有两个主要不同： Zustand 是单一 store，Jotai 由原子 atom 组合而成； Zustand 的 store 存储在 Valtio vs Zustand zustand 基于不可变状态模型，valtio 基于可变状态模型。 和 zustand 不同的是，他是一个组件级别的状态管理库。和 zustand 相同的是同样都基于不可变状态模型。
2.1K10编辑于 2023-08-21 - 来自专栏h5
基于react18+arco+vite4桌面版聊天react-webchat
图片使用了react18+react-router+zustand+arco design+react-dialog等技术开发构建项目。 () => useRoutes(routerConfig)export default Router图片react18 状态管理库zustandreact18-webchat项目使用了新状态管理插件zustand zustand一款轻量级的支持react18 hooks语法的状态管理，类似vue3 pinia状态管理工具。 // NPMnpm install zustand// Yarnyarn add zustand图片/** * react18状态管理库Zustand*/import { create } from ' zustand'import { persist, createJSONStorage } from 'zustand/middleware'export const authStore = create
1.1K80编辑于 2023-09-12 - 来自专栏前端食堂
【第 25 期】前端食堂技术周刊
Bridge 将被 JSI 取代 渲染系统 Fabric 将取代当前的 UI Manager Turbo Modules CodeGen 创建一个类似 Zustand 的状态管理库(视频)[14] Daishi Zustand 是 2021 年 Star 增长最快的 React 状态管理库，有着优雅的 API 设计和函数式理念，而且大部分特性都属于 React 的通用特性，源码实现很精妙，看起来很爽。 Zustand 源码解读[15] 新一代 JS 日期/时间 API Temporal 教程[16] 从 Java 抄来的 Date 缺点太多了：不支持开发人员通过 API 来切换时区信息、解析器行为不可靠 https://medium.com/coox-tech/deep-dive-into-react-natives-new-architecture-fb67ae615ccd [14] 创建一个类似 Zustand 的状态管理库(视频): https://egghead.io/courses/create-a-zustand-like-module-state-library-bf55241e [15] Zustand
68710编辑于 2022-04-08 - 来自专栏前端达人
Redux 真的被高估了吗？我在大型项目中发现的真相
我们选了 Zustand： import create from'zustand' const useStore = create((set) => ({ // 用户信息 user: null, setUser const user = useStore(state => state.user) const addToCart = useStore(state => state.addToCart) 为什么选 Zustand Redux 代码：从 6000+ 行削减到 400 行（只有购物车状态用 Zustand） 新功能开发速度：提升 40% Bug 数量：下降 60% 页面加载速度：快了 30% 新人上手时间：从一周缩短到两天 → 用 Context + useState，或者 Zustand 4. 这是来自服务器的数据，而且会变化？ → 用 React Query 只有 当这些都不适合，你才需要考虑 Redux。
18810编辑于 2025-11-20 - 来自专栏前端开发
在 React 中如何优化状态的使用？
使用状态管理库处理复杂状态当应用规模扩大，状态逻辑复杂时，可使用 Redux、Zustand 等库。 // Zustand 示例（轻量级状态管理）import { create } from 'zustand';const useStore = create((set) => ({ cart: [],
23810编辑于 2025-10-11 - 来自专栏前端达人
2026年前端技术的真实处境：从追捧到失落
最直观的证据来自数据： 状态管理工具使用率变化 Zustand: 2023年 8% → 2026年 35% Redux: 2023年 60% → 2026年 38% 为什么大家开始逃离 Redux 而 Zustand 呢？ Zustand 更新流程： User Action ↓ 调用 state 更新函数 ↓ Component 重新渲染 只需两步。 更扎心的是性能数据： 指标 Zustand Redux 状态更新延迟 35ms 65ms 内存开销 5% 15% 首屏加载时间 +200ms +400ms 有个团队从 Redux 迁移到 Zustand Zustand 和 Jotai：状态管理的极简主义 // Zustand import { create } from'zustand' const useStore = create((set) = → 迁移到 Zustand，用 React Query 管理服务端数据 [ ] 还在用微前端但只有 3-5 个应用？
3500编辑于 2026-03-12
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号