当前位置: 首页 > news >正文

⚡️如何在 React 和 Next.js 项目里优雅的使用 Zustand

前言

你是否曾感觉在 React 中管理状态简直是一场噩梦?如果你已经厌倦了不停地处理 propscontexthooks,那么现在是时候认识 Zustand 了。Zustand 是一个轻量级的状态管理库,它简化了你处理应用状态的方式。在这篇文章中,我们将了解 Zustand,并学习在 ReactNext.jsZustand 的用法。

什么是 Zustand?

Zustand 是一个为 React 设计的状态管理库,它有两大优势:既简单易用,又无比强大。它提供了一个最小化的 API 来管理你的应用状态,使你的代码更易于维护,也更容易理解。

使用 Zustand,你可以:

  • 用最少的样板代码创建一个全局状态。
  • 无需复杂的提供者或上下文设置就能访问和更新状态。
  • 在组件中使用状态,无需将其包装在 hooks 或 props 中。
  • 从不可变状态更新模型中受益。
  • 保持你的代码库整洁和可维护性。

让我们通过一些代码示例来看看 Zustand 是如何工作的~

开始使用 Zustand

1. 设置你的项目

在深入代码之前,请确保你有一个正在运行的 React 或 Next.js 项目,你可以按照官方文档的指引快速创建一个新项目。


2. 安装 Zustand

要开始使用 Zustand,你需要在你的项目中安装它。打开你的终端并运行

npm install zustand   
# 或者   
yarn add zustand   

3. 创建一个 Store

在 Zustand 中,你可以创建一个 store 来管理你的全局状态。这里是创建 store 的一个示例:

import create from 'zustand';    const useStore = create((set) => ({    count: 0,    increment: () => set((state) => ({ count: state.count + 1 })),decrement: () => set((state) => ({ count: state.count - 1 })),}));    export default useStore;    

在这个示例中,我们创建了一个简单的 store 来管理一个 count 变量。increment 和 decrement 函数允许你修改状态。


4. 使用 Store

现在你已经创建了你的 store,你可以在你的组件中使用它。这里是在一个 React 组件中使用 store 的一个示例:

import React from 'react';
import useStore from './useStore';function Counter() {const { count, increment, decrement } = useStore();return (<div><p>Count: {count}</p><button onClick={increment}>Increment</button><button onClick={decrement}>Decrement</button></div>);
}export default Counter;

在这个示例中,你只需导入 useStore 函数并解构你需要的状态和操作。然后,你可以直接在你的组件中使用它们。


Zustand 的好处

  • 简洁性:Zustand 通过一个干净直观的 API 简化了状态管理,减少了代码的复杂性。

  • 性能:Zustand 高度优化,为你的应用提供卓越的性能。

  • 可扩展性:随着你的项目增长,Zustand 仍然易于使用并且扩展性好。

  • 不变性:Zustand 鼓励不变性,使跟踪状态变化和调试问题变得更容易。

  • 灵活性:它不限于特定的框架。你可以在 React、React Native 或任何其他 JavaScript 环境中使用 Zustand。


结论

Zustand 是 React 和 Next.js 项目中管理状态的最佳选择。其简洁性和性能使其成为处理应用状态时的有力竞争者。在你的下一个项目中尝试使用 Zustand,你会惊讶于状态管理可以变得多么简单。

相关文章:

⚡️如何在 React 和 Next.js 项目里优雅的使用 Zustand

前言 你是否曾感觉在 React 中管理状态简直是一场噩梦&#xff1f;如果你已经厌倦了不停地处理 props、context 和 hooks&#xff0c;那么现在是时候认识 Zustand 了。Zustand 是一个轻量级的状态管理库&#xff0c;它简化了你处理应用状态的方式。在这篇文章中&#xff0c;我…...

Pinpoint(APM)进阶--Pinot指标采集(System Metric/Inspector)

接上文 Pinpoint使用Pinot进行指标数据存储&#xff0c;Pinot流摄入需要Kafka 本文详解Kafka和Pinot的安装部署&#xff0c;以及Pinpoint的指标采集 Pinot 简介 Apache Pinot是一个实时分布式OLAP数据存储&#xff0c;专为低延迟、高吞吐量分析而构建&#xff0c;非常适合面…...

Mysql:使用binlog的一些常用技巧

1、如何查看binlog的存放路径 show variables like log% 执行结果&#xff1a; 2、如何清除binlog &#xff08;1&#xff09;按时间清除 purge binary logs before ‘2023-06-5 10:12:00’ &#xff08;2&#xff09;按文件文件名清除 purge binary logs to ‘mybinlog.0000…...

Electron 项目启动外部可执行文件的几种方式

Electron 项目启动外部可执行文件的几种方式 序言 在开发 Electron 应用程序时&#xff0c;有时需要启动外部的可执行文件&#xff08;如 .exe 文件&#xff09;。这可能是为了调用系统工具、运行第三方软件或者集成现有的应用程序。 Electron 提供了多种方式来启动外部可执行…...

前端开发中常用的包管理器(npm、yarn、pnpm、bower、parcel)

文章目录 1. npm (Node Package Manager)2. Yarn (Yarn Package Manager)3. pnpm4. Bower5. Parcel总结 前端开发中常用的包管理器主要有以下几个&#xff1a; 1. npm (Node Package Manager) 简介&#xff1a; npm 是 Node.js 的默认包管理器&#xff0c;也是最广泛使用的包…...

Linux入门:环境变量与进程地址空间

一. 环境变量 1. 概念 1️⃣基本概念&#xff1a; 环境变量(environment variables)一般是指在操作系统中用来指定操作系统运行环境的一些参数 如&#xff1a;我们在编写C/C代码的时候&#xff0c;在链接的时候&#xff0c;从来不知道我们的所链接的动态静态库在哪里&#x…...

【Jenkins实战】Windows安装服务启动失败

写此篇短文&#xff0c;望告诫后人。 如果你之前装过Jenkins&#xff0c;出于换域账号/本地帐号的原因想重新安装&#xff0c;你大概率会遇上一次Jenkins服务启动失败提示&#xff1a; Jenkins failed to start - Verify that you have sufficient privileges to start system…...

web实操5——http数据详解,request对象功能

http请求数据 现在我们浏览器f12的那些是浏览器给http格式数据整理之后便于我们阅读的。 原始的http格式信息&#xff1a; 就是按照一定格式和符号的字符串&#xff1a; 请求行&#xff1a;格式如下图 请求头&#xff1a;一个个key&#xff0c;value数据&#xff0c;用,分割…...

C# 如何动态加载程序集

程序集的加载&#xff0c;默认是从当前目录下查找&#xff0c;如果当前目录查找不到&#xff0c;然后再去系统目录中查找&#xff0c;依然查找不到就会从环境变量中查找&#xff0c;如果依然找不到&#xff0c;则会抛出一个异常 FileNotFoundException。 托管代码中&#xff0…...

前端基础的讲解-JS(10)

作用域链 通过上节作用域我们知道&#xff0c;当我们声明一个函数时&#xff0c;程序会生成一个独立的作用域&#xff0c;如果函数中还有函数&#xff0c;那么在这个作用域中就又可以诞生一个作用域&#xff1b;根据 内部函数可以访问外部函数变量 的这种机制&#xff0c;用链…...

JNI整理总结

JNI JNI基础 JNI基础 JNI&#xff0c;java native interface&#xff0c;即java本地接口&#xff0c;是java调用本地化方法的接口&#xff0c;是为java编写本地方法&#xff0c;为jvm嵌入本地应用程序的标准化接口。首要目标是在给定的平台上采用java通过JNI调用本地化方法&am…...

aws中AcmClient.describeCertificate返回值中没有ResourceRecord

我有一个需求&#xff0c;就是让用户自己把自己的域名绑定我们的提供的AWS服务器。 AWS需要验证证书 上一篇文章中我用php的AcmClient中的requestCertificate方法申请到了证书。 $acmClient new AcmClient([region > us-east-1,version > 2015-12-08,credentials>[/…...

Spring Task详细讲解

✨Spring Task简介 Spring Task 是 Spring 提供的轻量级定时任务工具&#xff0c;也就意味着不需要再添加第三方依赖了&#xff0c;相比其他第三方类库更加方便易用。可以按照约定的时间自动执行某个代码逻辑。 使用场景&#xff1a; 信用卡每月还款提醒银行贷款每月还款提醒…...

C++初阶 --- 类和对象(1)

类和对象&#xff08;1&#xff09; 一、类的相关内容1.访问限定符2.class关键字与struct关键字的区别3.类域 二、this指针三、成员函数存放在哪里&#xff1f;1. 函数的存放位置2. 练习题 一、类的相关内容 1.访问限定符 &#xff08;1&#xff09;C⼀种实现封装的⽅式&…...

《TCP/IP网络编程》学习笔记 | Chapter 7:优雅地断开套接字连接

《TCP/IP网络编程》学习笔记 | Chapter 7&#xff1a;优雅地断开套接字连接 《TCP/IP网络编程》学习笔记 | Chapter 7&#xff1a;优雅地断开套接字连接基于 TCP 的半关闭单方面断开连接带来的问题套接字和流针对优雅断开的 shutdown 函数为何需要半关闭&#xff1f;基于半关闭…...

Anaconda 和 conda 是什么关系?就像 pip 和 python 一样吗

Anaconda 和 conda是 Anaconda Distribution 还是 Miniconda Anaconda 和 conda Anaconda 和 conda 之间的关系有点类似于 pip 和 Python&#xff0c;但又有所不同。 Anaconda 是一个数据科学和机器学习的发行版&#xff0c;它包含了 Python、conda 以及许多预装的库和工具&am…...

「数据治理」核心专业术语解释!

​数据治理就是指在一定的组织范围内&#xff0c;依托制度法规、标准规范、应用实践和支撑技术对数据进行全生命周期的数据确权、质量管理、安全控制、隐私保护、开放共享、交易流通和分析处理。数据治理的目标是为了提高数据的可用性、安全性、流通性&#xff0c;激活数据资源…...

Mac Nginx 前端打包部署

安装homebrew /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" 安装Nginx brew install nginx nginx相关命令 nginx启动命令&#xff1a;nginx nginx -s reload #重新加载配置 nginx -s reopen #重启 nginx -s stop #…...

乳腺癌诊断分析——基于聚类分析实现

一、研究背景 乳腺癌属于恶性肿瘤&#xff0c;在早期发现后需要及早将病变组织切除&#xff0c;而且术后还要化疗和放射等辅助治疗&#xff0c;能够抑制癌细胞的扩散和增长。 二、研究目的 研究乳腺癌病人的患病特征通过聚类分析方法对特征进行分类通过上述聚类结果对乳腺诊…...

Ubuntu 22.04 安装配置opencv

​ OpenCV下载:https://opencv.org/releases/ ​编译与安装 安装cmake OpenCV需要使用cmake进行编译 sudo apt-get install cmake安装依赖 sudo apt-get install build-essential pkg-config libgtk2.0-dev libavcodec-dev libavformat-dev libjpeg-dev libswscale-dev lib…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...