前言

在现代html" title=前端>前端开发中，状态管理一直是一个关键的挑战。随着应用规模的扩大，组件间的状态共享变得愈加复杂。为了应对这一需求，开发者们逐渐寻找更加轻量、灵活的解决方案。在众多状态管理库中，Zustand 以其简洁易用的特点脱颖而出。

Zustand 是一个基于 React 的状态管理库，旨在提供简单而强大的状态管理功能。与传统的状态管理工具相比，Zustand 采用了更为直观的 API 设计，降低了学习成本，让开发者能够快速上手。它的核心理念是“最小化”，意味着你可以只为应用中需要的部分状态创建 store，而不是强迫使用全局状态，进而提高了应用的性能和可维护性。

Zustand 的优势还在于其灵活性。它允许开发者在不牺牲性能的前提下，使用多种方式管理状态，包括异步操作、持久化存储等。同时，Zustand 还支持中间件功能，如 immer 和 devtools，让状态更新变得更加简洁，并方便开发和调试。

在这篇文章中，我们将深入探讨 Zustand 的核心概念、使用方法以及它在实际开发中的应用案例。通过对 Zustand 的全面解析，期望能够帮助开发者在构建高效、可维护的 React 应用时，更好地利用这一强大的状态管理工具。

基本使用

编写状态加方法

import {create} from 'zustand'const useBookStore = create<any>((set,get)=>({price: 30,total:100,increment(){set(( state:any ) => ({ total: state.total + 1 }));},decrement(){set(( state:any ) => ({ total: Math.max(state.total - 1, 0) })); // 确保total不小于0},getTotal(){return get().price * get().total}}))export default useBookStore

在组件中使用

const Child1 =() => {const price = useBookStore((state:any)=> state.price)const total= useBookStore((state:any)=> state.total)const increment = useBookStore((state:any) => state.increment )const decrement = useBookStore((state:any) => state.decrement )const getTotal = useBookStore((state:any)=> state.getTotal)return (<><h2>{price}</h2><h2>{total}</h2><h2>{getTotal()}</h2><button onClick={decrement}>decrement</button><button onClick={increment}>increment</button></>)}

异步方法操作

async bookPromotion(){//使用Promise来模仿异步操作let rate = await Promise.resolve(0.8);set(( state:any )=>{state.price *= rate})}

中间件

immer 简化不可变状态更新 不用每次都返回一个对象了

import {immer } from 'zustand/middleware/immer'const useBookStore = create<any>()(immer((set,get)=>({price: 40,total:100,increment(){set(( state:any ) => { state.total += 1 });},decrement(){set(( state:any ) => { Math.max(state.total -= 1, 0) }); // 确保total不小于0},getTotal(){return get().price * get().total},async bookPromotion(){//使用Promise来模仿异步操作let rate = await Promise.resolve(0.8);set(( state:any )=>{state.price *= rate})}})))export default useBookStore

简化状态获取

使用解构赋值

const { price, total, increment, decrement, getTotal, bookPromotion } = useBookStore((state) => ({ price: state.price, total: state.total, increment: state.increment, decrement: state.decrement, getTotal: state.getTotal, bookPromotion: state.bookPromotion, }));

优化性能

Child1 和 Child2 组件都使用了相同的状态管理商店（store），这意味着它们会共享相同的状态。当你在 Child1 中更新状态时，Child2 即使store没有发生变化也会跟着执行，因为它们都从同一个 store 中获取数据。这非常浪费性能
使用useShallow包裹

import { useShallow } from 'zustand/react/shallow'import useBookStore from './zustand/index.tsx'
const Child1 =() => {// const price = useBookStore((state:any)=> state.price)// const total= useBookStore((state:any)=> state.total)const increment = useBookStore((state:any) => state.increment )const decrement = useBookStore((state:any) => state.decrement )const getTotal = useBookStore((state:any)=> state.getTotal)const bookPromotion= useBookStore((state:any)=> state.bookPromotion)const {price,total} = useBookStore()return (<><h2>{price}</h2><h2>{total}</h2><h2>{getTotal()}</h2><button onClick={decrement}>decrement</button><button onClick={bookPromotion}>promotion</button><button onClick={increment}>increment</button></>)}const Child2 = () => {const {test} = useBookStore(useShallow((state:any) =>({ test: state.test})))console.log(1,2,test)return <h2>{test}</h2>}

Redux DevTools插件

import {devtools}from "zustand/middleware"
{enable:true,name"bookstore"}

持久化保存

import create from 'zustand';import { persist } from 'zustand/middleware';// 创建一个持久化的 storeconst useStore = create(persist((set) => ({count: 0,increase: () => set((state) => ({ count: state.count + 1 })),decrease: () => set((state) => ({ count: state.count - 1 })),}),{name: ###, // 存储的 key 名称storage: create(()=> sessionStorage), // 可以选择使用 localStorage 或 sessionStoragepartialize:(state) => ({key:value})
}));

文章到这里就结束了,希望对你有所帮助。