Zustand:一个轻量级的React状态管理库

文章目录

    • 前言
    • 一、安装Zustand
    • 二、使用Zustand
    • 三、实际案例
    • 结语


前言

在现代Web开发中,状态管理是一个常见的需求,特别是在构建大型或复杂的单页面应用程序(SPA)时。React等框架虽然提供了基本的状态管理功能,但对于复杂的应用来说可能显得不够灵活或强大。因此,许多开发者会选择使用Redux、MobX等状态管理库来帮助他们更好地管理应用状态。然而,这些库往往伴随着较大的学习曲线和额外的性能开销。

Zustand是一个轻量级的状态管理解决方案,它试图解决上述问题。Zustand的设计理念是简单易用且性能高效,非常适合中小型项目或者对状态管理有特殊需求的应用。


一、安装Zustand

安装Zustand非常简单,可以通过npm或yarn来添加依赖。以下是具体的安装步骤:

使用npm安装

打开终端,导航到你的项目目录,然后运行以下命令:

npm install zustand

使用yarn安装

如果你更喜欢使用yarn,可以在终端中运行以下命令:

yarn add zustand

二、使用Zustand

创建Store

使用Zustand的第一步是创建一个store。一个store就是一个包含状态和状态更新函数的对象。你可以通过调用create函数并传入一个返回对象的函数来创建store。

import create from 'zustand';// 创建一个简单的计数器store
const useCounterStore = create(set => ({count: 0,increase: () => set(state => ({ count: state.count + 1 })),decrease: () => set(state => ({ count: state.count - 1 })),reset: () => set({ count: 0 })
}));

在这个例子中,我们定义了一个简单的计数器应用,其中包含三个修改状态的方法:increasedecreasereset

访问和订阅State

要访问或订阅store中的状态,你需要在组件中调用useStore hook。这将使你的组件在状态变化时重新渲染。

import React from 'react';
import { useCounterStore } from './path/to/counterStore';function Counter() {const count = useCounterStore(state => state.count);const increase = useCounterStore(state => state.increase);const decrease = useCounterStore(state => state.decrease);const reset = useCounterStore(state => state.reset);return (<div><p>Count: {count}</p><button onClick={increase}>+</button><button onClick={decrease}>-</button><button onClick={reset}>Reset</button></div>);
}

在这个组件中,我们订阅了count状态,并绑定了增加、减少和重置计数的动作到按钮上。

三、实际案例

假设我们正在构建一个电子商务网站,用户可以添加商品到购物车中。我们可以使用Zustand来管理购物车的状态。

创建购物车Store

首先,我们需要定义一个store来存储购物车的信息:

import create from 'zustand';const useCartStore = create(set => ({items: [],addItem: (item) => set(state => ({ items: [...state.items, item] })),removeItem: (id) => set(state => ({ items: state.items.filter(item => item.id !== id) })),clearCart: () => set({ items: [] }),getTotal: () => useCartStore.getState().items.reduce((total, item) => total + item.price, 0)
}));

在这个store中,我们定义了以下几个方法:

  • addItem:添加商品到购物车。
  • removeItem:从购物车中移除商品。
  • clearCart:清空购物车。
  • getTotal:计算购物车中所有商品的总价。

在组件中使用购物车Store

接下来,我们在购物车组件中使用这个store:

import React from 'react';
import { useCartStore } from './path/to/cartStore';function ShoppingCart() {const items = useCartStore(state => state.items);const clearCart = useCartStore(state => state.clearCart);const getTotal = useCartStore(state => state.getTotal);return (<div><h3>购物车</h3><ul>{items.map(item => (<li key={item.id}>{item.name} - ${item.price}<button onClick={() => useCartStore.setState(state => ({ items: state.items.filter(i => i.id !== item.id) }))}>移除</button></li>))}</ul><p>总计: ${getTotal()}</p><button onClick={clearCart}>清空购物车</button></div>);
}

在这个组件中,我们订阅了items状态,并显示了购物车中的商品列表。每个商品旁边都有一个“移除”按钮,点击后会从购物车中移除该商品。此外,我们还显示了购物车的总价,并提供了一个“清空购物车”按钮。


结语

Zustand以其简洁的API和出色的性能成为了许多开发者喜爱的状态管理工具。无论是小型项目还是大型应用,Zustand都能提供一种快速有效的方式来处理状态管理的问题。如果你正在寻找一个轻量级且易于使用的状态管理解决方案,不妨试试Zustand。通过本文的介绍,你应该已经掌握了如何安装、创建和使用Zustand的基本方法。希望你在实际项目中能够充分利用Zustand的优势,提升开发效率。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis缓存穿透及常见的解决方案

一.什么是缓存穿透&#xff1f; 缓存穿透是指当客户端请求的数据在缓存&#xff08;如 Redis&#xff09;中不存在&#xff0c;并且在数据库中也不存在时&#xff0c;直接绕过缓存去请求数据库。这种情况会导致&#xff1a; 缓存系统无法发挥作用&#xff0c;数据每次都会直接…

(原创)Android Studio新老界面UI切换及老版本下载地址

前言 这两天下载了一个新版的Android Studio&#xff0c;发现整个界面都发生了很大改动&#xff1a; 新的界面的一些设置可参考一些博客&#xff1a; Android Studio新版UI常用设置 但是对于一些急着开发的小伙伴来说&#xff0c;没有时间去适应&#xff0c;那么怎么办呢&am…

windows下安装wsl的ubuntu,同时配置深度学习环境

写在前面&#xff0c;本次文章只是个人学习记录&#xff0c;不具备教程的作用。个别信息是网上的&#xff0c;我会标注&#xff0c;个人是gpt生成的 安装wsl 直接看这个就行&#xff1b;可以不用备份软件源。 https://blog.csdn.net/weixin_44301630/article/details/1223900…

Node.js的http模块:创建HTTP服务器、客户端示例

新书速览|Vue.jsNode.js全栈开发实战-CSDN博客 《Vue.jsNode.js全栈开发实战&#xff08;第2版&#xff09;&#xff08;Web前端技术丛书&#xff09;》(王金柱)【摘要 书评 试读】- 京东图书 (jd.com) 要使用http模块&#xff0c;只需要在文件中通过require(http)引入即可。…

AI赋能电商:构建高效、智能化的新零售生态

随着人工智能&#xff08;AI&#xff09;技术的不断进步&#xff0c;其在电商领域的应用日益广泛&#xff0c;从购物推荐到供应链管理&#xff0c;再到商品定价&#xff0c;AI正在全面改变传统电商的运营模式&#xff0c;并推动行业向智能化和精细化方向发展。本文将探讨如何利…

算法之区间和题目讲解

题干 难度&#xff1a;简单 题目分析 题目要求算出每个指定区间内元素的总和。 然而&#xff0c;区间在输入的最下面&#xff0c;所以按照暴力破解的思路&#xff0c;我们首先要遍历数组&#xff0c;把它的值都存进去。 然后&#xff0c;遍历下面的区间&#xff0c;从索引a…

openssl颁发包含主题替代名的证书–SAN

原文地址&#xff1a;openssl颁发包含主题替代名的证书–SAN – 无敌牛 欢迎参观我的个人博客&#xff1a;无敌牛 – 技术/著作/典籍/分享等 在 X.509 证书中&#xff0c;commonName&#xff08;CN&#xff09;字段只能有一个值。如果让证书支持多个域名和IP地址&#xff0c;…

从尾到头打印链表 剑指offer

题目描述 输入一个链表的头节点&#xff0c;从尾到头反过来打印出每个节点的值。 链表节点定义如下&#xff1a; struct ListNode {int m_nKey;ListNode*m_pNext; }; 代码实现 栈实现&#xff1a; 递归实现&#xff1a; 但是用递归实现可能存在的问题&#xff1a;

ajax基础

一&#xff1a;express框架 在终端输入nodejs文件名 // 引入express const express require(express); //创建应用对象 const app express(); //创建路由规则 app.get(/,(request,response) > {//设置响应response.send(Hello Express); }); // 监听3000端口 app.lis…

免费实用在线AI工具集合 - 加菲工具

免费在线工具-加菲工具 https://orcc.online/ 在线录屏 https://orcc.online/recorder 时间戳转换 https://orcc.online/timestamp Base64 编码解码 https://orcc.online/base64 URL 编码解码 https://orcc.online/url Hash(MD5/SHA1/SHA256…) 计算 https://orcc.online/h…

UE5肉鸽游戏教程学习

学习地址推荐&#xff1a;UE5肉鸽项目实战教程_哔哩哔哩_bilibili

101页PDF | 德勤_XX集团信息化顶层规划设计信息化总体解决方案(限免下载)

一、前言 这份报告是一份关于集团信息化顶层规划设计的总体解决方案&#xff0c;旨在通过信息化转型提升集团管控和企业运营效率。报告回顾了项目的背景、目标和工作过程&#xff0c;分析了集团面临的内部和外部挑战&#xff0c;并提出了一系列解决方案&#xff0c;包括自上而…

L14.【LeetCode笔记】返回倒数第k个节点

目录 1.题目 2.分析 思路 代码 提交结果 1.题目 面试题 02.02. 返回倒数第 k 个节点 实现一种算法&#xff0c;找出单向链表中倒数第 k 个节点。返回该节点的值。 注意&#xff1a;本题相对原题稍作改动 示例&#xff1a; 输入&#xff1a; 1->2->3->4->5 和 …

【zookeeper03】消息队列与微服务之zookeeper集群部署

ZooKeeper 集群部署 1.ZooKeeper 集群介绍 ZooKeeper集群用于解决单点和单机性能及数据高可用等问题。 集群结构 Zookeeper集群基于Master/Slave的模型 处于主要地位负责处理写操作)的主机称为Leader节点&#xff0c;处于次要地位主要负责处理读操作的主机称为 follower 节点…

STM32端口模拟编码器输入

文章目录 前言一、正交编码器是什么&#xff1f;二、使用步骤2.1开启时钟2.2配置编码器引脚 TIM3 CH1(PA6) CH2 (PA7)上拉输入2.3.初始化编码器时基2.4 初始化编码器输入2.5 配置编码器接口2.6 开启定时器2.7获取编码器数据 三、参考程序四、测试结果4.1测试方法4.2串口输出结果…

【Mybatis】@Param注解 resultMap手动映射

文章目录 一、映射文件参数二、查询映射2-1 一对一2-2 一对多2-3 总结 一、映射文件参数 Param 注解官方文档解释 1、单个参数&#xff08;对象&#xff09;不使用注解 public int save(User user);<!-- 添加用户 --> <insert id"save" parameterType&quo…

正则表达式灾难:重新认识“KISS原则”的意义

RSS Feed 文章标题整理 微积分在生活中的应用与思维启发 捕鹿到瞬时速度的趣味探索 微积分是一扇通往更广阔世界的门&#xff0c;从生活中学习思维的工具。 数据库才是最强架构 你还在被“复杂架构”误导吗&#xff1f; 把业务逻辑写入数据库&#xff0c;重新定义简单与效率。…

C#基础上机练习题

21.计算500-800区间内素数的个数cn&#xff0c;并按所求素数的值从大到小的顺序排列&#xff0c;再计算其间隔加、减之和&#xff0c;即第1个素数-第2个素数第3个素数-第4个素数第5个素数……的值sum。请编写函数实现程序的要求&#xff0c;把结果cn和sum输出。 22.在三位整数…

【STM32】在 STM32 USB 设备库添加新的设备类

说实话&#xff0c;我非常想吐槽 STM32 的 USB device library&#xff0c;总感觉很混乱。 USB Device library architecture 根据架构图&#xff1a; Adding a custom class 如果你想添加新的设备类&#xff0c;必须修改的文件有 usbd_desc.cusbd_conf.cusb_device.c 需要…

多头数(head number);d_model、d_k;词嵌入维度之间的关系;多头是对不同维度的特征分开提取,意义在于将并行执行

目录 多头是对不同维度的特征分开提取,意义在于将并行执行 之后的每头提取的特征仅仅进行矩阵拼接 多头数(head number) d_model、d_k 词嵌入维度之间的关系 词嵌入的维度(d_model)决定了权重矩阵的形状 一、概念解释 二、关系举例说明 多头数,权重矩阵的长度和词…