脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → Zustand React状态管理工具

Zustand介绍与使用 React状态管理工具的解决方案

 更新时间：2024年10月26日 10:43:18   作者：ZhaiMou  
本文主要介绍了Zustand,一种基于React的状态管理库,Zustand以简洁易用、灵活性高及最小化原则等特点脱颖而出,旨在提供简单而强大的状态管理功能

前言

在现代前端开发中，状态管理一直是一个关键的挑战。随着应用规模的扩大，组件间的状态共享变得愈加复杂。为了应对这一需求，开发者们逐渐寻找更加轻量、灵活的解决方案。在众多状态管理库中，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';
// 创建一个持久化的 store
const 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 或 sessionStorage
partialize:(state) => ({key:value})
}
));

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

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

您可能感兴趣的文章:

相关文章

  • React点击事件的两种写法小结

    React点击事件的两种写法小结

    这篇文章主要介绍了React点击事件的两种写法小结，具有很好的参考价值，希望对大家有所帮助。
    2022-12-12
  • React 状态管理工具优劣势示例分析

    React 状态管理工具优劣势示例分析

    这篇文章主要为大家介绍了React 状态管理工具优劣势示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • 基于visual studio code + react 开发环境搭建过程

    基于visual studio code + react 开发环境搭建过程

    今天通过本文给大家分享基于visual studio code + react 开发环境搭建过程，本文给大家介绍的非常详细，包括react安装问题及安装 Debugger for Chrome的方法，需要的朋友跟随小编一起看看吧
    2021-07-07
  • React为什么需要Scheduler调度器原理详解

    React为什么需要Scheduler调度器原理详解

    这篇文章主要为大家介绍了React为什么需要Scheduler调度器原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • 在 React 项目中使用 Auth0 并集成到后端服务的配置步骤详解

    在 React 项目中使用 Auth0 并集成到后端服务的配置步骤详解

    这篇文章主要介绍了在 React 项目中使用 Auth0 并集成到后端服务的配置步骤详解,通过本文详细步骤,您可以将 Auth0 集成到 React 项目并与后端服务交互,需要的朋友可以参考下
    2024-07-07
  • 从源码到架构:React useActionState 深度解析

    从源码到架构:React useActionState 深度解析

    React 19引入的 useActionState是近年来React Hooks 体系中设计最精巧的API 之一,本文给大家介绍从源码到架构：React useActionState 深度剖析,感兴趣的朋友跟随小编一起看看吧
    2026-05-05
  • 使用React Hooks模拟类组件的生命周期方法

    使用React Hooks模拟类组件的生命周期方法

    在 React 16.8 版本之前,开发者主要通过类组件来管理组件的生命周期,然而,类组件的结构往往较为复杂,难以复用逻辑, 为了解决这些问题,React 引入了 Hooks,本文将详细介绍如何使用 useEffect Hook 来模拟类组件的生命周期方法,需要的朋友可以参考下
    2025-05-05
  • 基于React Context实现一个简单的状态管理的示例代码

    基于React Context实现一个简单的状态管理的示例代码

    本文主要介绍了基于React Context实现一个简单的状态管理的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • React 的虚拟 DOM 机制及原理解析

    React 的虚拟 DOM 机制及原理解析

    React的虚拟DOM机制通过在内存中生成和比较虚拟DOM树,实现了高效的渲染和性能优化,是React框架的核心特点,本文给大家介绍React的虚拟DOM机制及原理解析,感兴趣的朋友跟随小编一起看看吧
    2026-01-01
  • react基于Ant Desgin Upload实现导入导出

    react基于Ant Desgin Upload实现导入导出

    本文主要介绍了react基于Ant Desgin Upload实现导入导出,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01

最新评论