← 返回
未分类 中文

Zustand State

Zustand state management for React and vanilla JavaScript. Use when creating stores, using selectors, persisting state to localStorage, integrating devtools,...
Zustand 状态管理,适用于 React 与原生 JavaScript;用于创建 store、使用选择器、将状态持久化到 localStorage、集成 devtools 等场景。
anderskev anderskev 来源
未分类 clawhub v1.1.0 1 版本 100000 Key: 无需
★ 0
Stars
📥 440
下载
💾 1
安装
1
版本
#latest

概述

Zustand State Management

Minimal state management - no providers, minimal boilerplate.

Quick Reference

import { create } from 'zustand'

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useBearStore = create<BearState>()((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}))

// In component - select only what you need
const bears = useBearStore((state) => state.bears)
const increase = useBearStore((state) => state.increase)

State Updates

// Flat updates (auto-merged at one level)
set({ bears: 5 })
set((state) => ({ bears: state.bears + 1 }))

// Nested objects (manual spread required)
set((state) => ({
  nested: { ...state.nested, count: state.nested.count + 1 }
}))

// Replace entire state (no merge)
set({ bears: 0 }, true)

Selectors & Performance

// Good - subscribes only to bears
const bears = useBearStore((state) => state.bears)

// Bad - rerenders on any change
const state = useBearStore()

// Multiple values with useShallow (prevents rerenders with shallow comparison)
import { useShallow } from 'zustand/react/shallow'

const { bears, fish } = useBearStore(
  useShallow((state) => ({ bears: state.bears, fish: state.fish }))
)

// Array destructuring also works
const [bears, fish] = useBearStore(
  useShallow((state) => [state.bears, state.fish])
)

Access Outside Components

// Get current state (non-reactive)
const state = useBearStore.getState()

// Update state
useBearStore.setState({ bears: 5 })

// Subscribe to changes
const unsub = useBearStore.subscribe((state) => console.log(state))
unsub() // unsubscribe

Vanilla Store (No React)

import { createStore } from 'zustand/vanilla'

const store = createStore((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}))

store.getState().bears
store.setState({ bears: 10 })
store.subscribe((state) => console.log(state))

Additional Documentation

Key Patterns

PatternWhen to Use
----------------------
Single selectorOne piece of state needed
useShallowMultiple values, avoid rerenders
getState()Outside React, event handlers
subscribe()External systems, logging
Vanilla storeNon-React environments

版本历史

共 1 个版本

  • v1.1.0 当前
    2026-05-03 07:19 安全 安全

安全检测

腾讯云安全 (Keen)

安全,无风险
查看报告

腾讯云安全 (Sanbu)

安全,无风险
查看报告

🔗 相关推荐

dev-programming

CodeConductor.ai

larsonreever
AI驱动平台,提供快速全栈开发、智能体、工作流自动化及低代码AI集成的可扩展产品创建。
★ 72 📥 181,809
ai-agent

Deepagents Implementation

anderskev
使用 Deep Agents 实现代理,适用于创建代理、配置后端、定义子代理、添加中间件或设置...
★ 0 📥 684
dev-programming

Mcporter

steipete
使用 mcporter CLI 直接列出、配置、认证及调用 MCP 服务器/工具(支持 HTTP 或 stdio),涵盖临时服务器、配置编辑及 CLI/类型生成功能。
★ 195 📥 67,627