Zustand:让React状态管理更简单、更高效

news2024/11/15 17:47:26

Zustand

这个单词在德语里是状态的意思(发音:促stand)

1. 下载zustand

npm i zustand     

或者

yarn add zustand

2.创建一个store

import { create } from 'zustand'

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

在这里插入图片描述

因为zustand会帮你自动合并第一层state,我们这里的bears就是第一层的state;所以我们不需要这里的…;如果你有更深层的状态,第二层第三层的状态,还是需要…的。

因为我项目使用的ts,故而需要加类型:
在这里插入图片描述

import { create } from 'zustand'

type stateType ={
  bears:number;
  increasePopulation:()=>void;
  removeAllBears:()=>void;
}

export const useBearStore = create<stateType>()((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

3.使用方法

这里的useBearStore其实就是一个hook,so可以很方便的被调用;不需要像redux或者useConext那样外面包一层传送门。
然后在componets里面建立一个文件BearBox。

import { Button } from 'antd';

export const BearBox = () => {
  return (
    <div>
      <h1>BearBox</h1>
      <div>
        <Button>add bear</Button>
        <Button>remove bear</Button>
      </div>
    </div>
  );
};

怎么使用useBearStore?:
zustand特别的就是你可以直接从components访问store里的state,不需要在components外面包裹任何context provider;
直接使用useBearStore这个hook;里面参数是一个callback,这个callback给了一个state,这个state就是store里所有的state,然后你可以用它返回你所需要的所有新的state。
在这里插入图片描述

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

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

相关文章

20240824给飞凌OK3588-C的核心板刷Ubuntu22.04并连接adb

20240824给飞凌OK3588-C的核心板刷Ubuntu22.04并连接adb 2024/8/24 15:56 缘起&#xff0c;由于我司对面积有极度的追求&#xff0c;所以将飞凌OK3588-C开发板使用的【9线】type-C接口&#xff08;USB3.1?&#xff09;降级为4线的USB2.0。 【micro USB/MINI USB。】 先决条件…

基于RK3588的多摄像头车辆与车道线检测系统(基于rk3588的车辆和车道线检测,可以带四个720p的摄像头,2个1080p的摄像头)

硬件配置&#xff1a; 处理器&#xff1a;Rockchip RK3588&#xff0c;这是一款高性能的嵌入式处理器&#xff0c;支持多路高清视频输入和处理。摄像头配置&#xff1a; 4个720p&#xff08;1280x720&#xff09;分辨率的摄像头2个1080p&#xff08;1920x1080&#xff09;分辨…

什么是持续集成(持续交付、部署)

文章目录 1 持续集成1.1 持续集成的好处1.2 持续集成的目的1.3 没有持续集成的状况 2 持续交付3 持续部署4 持续交付和持续部署的区别 1 持续集成 持续集成&#xff08;Continuous integration&#xff0c;简称CI&#xff09;&#xff0c;简单来说持续集成就是频繁地&#xff…

拓扑排序,以及区间dp相关试题

目录 1.有向无环图(DAG图&#xff09; 2.AOV网:顶点活动图 3.拓扑排序 4.实现拓扑排序 力扣.207课程表 牛客.最长回文子序列 1.有向无环图(DAG图&#xff09; 入度:表示有多少条边指向它 出度:有多少条边向外指出他 2.AOV网:顶点活动图 3.拓扑排序 找到做事情的先后顺序 …

React学习笔记(三)——redux状态管理工具

1. Redux快速上手 1.1 什么是Redux&#xff1f; Redux 是 React 最常用的 集中状态管理工具 &#xff0c;类似于 Vue 中的 Pinia&#xff08;Vuex&#xff09;&#xff0c; 可以独立于框架运行 作用&#xff1a; 通过集中管理的方式管理应用的状态 1.2 Redux快速体验 不和任何…

【OpenGL学习笔记】--图像管线

图像管线&#xff08;Image Pipeline&#xff09;是计算机图形学中一个核心概念&#xff0c;尤其是在图形处理和渲染的上下文中。它是一个用于处理和渲染图像的流程&#xff0c;其中包括从场景数据的输入到最终图像输出的各个阶段。 图像管线的组成 顶点处理&#xff08;Verte…

大模型入门到精通——使用Embedding API及搭建本地知识库(一)

使用Embedding API及搭建本地知识库 1. 基于智谱AI调用Embedding API实现词向量编码 首先&#xff0c;生成.env 文件&#xff0c;填写好智谱AI的API-key 参考&#xff1a;大模型入门到实战——基于智谱API key 调用大模型文本生成 读取本地/项目的环境变量。 find_dotenv(…

基于SSM的在线家教管理系统的设计与实现 (含源码+sql+视频导入教程+论文+PPT)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM的在线家教管理系统拥有三个角色 管理员&#xff1a;用户管理、教师管理、简历管理、申请管理、课程管理、招聘教师管理、应聘管理、评价管理等 教师&#xff1a;课程管理、应聘…

Prometheus Operator部署管理

Prometheus Operator部署管理 Prometheus Operator & Kube-Prometheus & Helm chart 部署区别 Prometheus Operator 是 Kubernetes 原生的工具&#xff0c;它通过将 Prometheus 资源定义为 Kubernetes 对象&#xff08;CRD&#xff09;来简化 Prometheus 集群的管理。…

如何使用ssm实现公司项目管理系统设计与实现

TOC ssm136公司项目管理系统设计与实现jsp 绪论 1.1 研究背景 当前社会各行业领域竞争压力非常大&#xff0c;随着当前时代的信息化&#xff0c;科学化发展&#xff0c;让社会各行业领域都争相使用新的信息技术&#xff0c;对行业内的各种相关数据进行科学化&#xff0c;规…

Avg函数求比率的应用(SQL)

题目 在 SQL 中&#xff0c;AVG 函数用于计算一组数值的平均值。这个功能也可以用来计算比率或比例。 平均值 可以用来计算比率的原因&#xff1a; 二元值&#xff1a;在许多情况下&#xff0c;我们用 1 和 0 表示发生或未发生的事件。例如&#xff0c;在你的查询中&#xff0…

基于Java的C语言课程教学实践小程序的设计与实现(论文+源码)_kaic

基于Java的C语言课程教学实践小程序的设计与实现 摘 要 在当前信息技术迅猛发展的大背景下&#xff0c;为了学生更好地利用信息技术学习C语言&#xff0c;急需开发一款C语言课程教学实践小程序。‎这个小程序可以让学生不再局限于课堂学习‎的教学模式&#xff0c;而是能够随…

freeCAD与stl文件如何互切?

大家好&#xff0c;我是山羊君Goat。 作为硬件工程师&#xff0c;如果需要给自己的硬件主板做一个DIY的造型&#xff0c;比如说B站稚晖君DIY的小电视等等。 对于这个&#xff0c;那3D打印技术就必不可少了&#xff08;怪不得说硬件学的东西都很杂 &#xff09;。 FreeCAD是一款…

BeautifulSoup4通过lxml使用Xpath定位实例

有以下html。<a>中含有图片链接&#xff08;可能有多个<a>&#xff0c;每一个都含有一张图片链接&#xff09;。最后一个<div>中含有文字。 上代码&#xff1a; import requests from bs4 import BeautifulSoup from lxml import etreeurlhttps://www.aaabb…

动态规划类型题目汇总及解析(持续更新)

目录 数字三角形模型 摘花生 最低通行费 方格取数&#xff08;洛谷&#xff09; 传纸条&#xff08;洛谷&#xff09; 最长上升子序列模型 最长上升子序列&#xff08;洛谷&#xff09;&最长递增子序列&#xff08;leetcode&#xff09; leetcode674. 最长连续递…

Image-to-Image Translation 图像翻译任务中的输入成对图像拼接成一张图技术详解

引 言 在图像翻译任务中&#xff0c;近几年比较火热的Generative Adversarial Nets (GAN)模型以及各种变体深受视觉研究团体的青睐&#xff0c;在具体任务中取得不错的实验表现。图像翻译包含两部分内容&#xff1a;一个是图像内容(image content)显示内部存在的实体,用于区分不…

【C++ Primer Plus习题】4.5

问题: 解答: #include <iostream> using namespace std;typedef struct _CandyBar {string brand;float weight;int calorie; }CandyBar;int main() {CandyBar snack { "德芙",2.1,20};cout << "品牌:" << snack.brand << endl;…

计算机毕业设计 养老院管理系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…

IO进程day01(函数接口fopen、fclose、fgetc、fputc、fgets、fputs)

目录 函数接口 1》打开文件fopen 2》关闭文件fclose 3》文件读写操作 1> 每次读写一个字符&#xff1a;fgetc(),fputc() 针对文件读写 针对终端读写 练习&#xff1a;实现 cat 命令功能 格式&#xff1a;cat 文件名 2> 每次一个字符串的读写 fgets() 和 fputs() …

数据集笔记: FourSquare - NYC and Tokyo Check-ins

FourSquare - NYC and Tokyo Check-ins (kaggle.com) 这个数据集包含了从2012年4月12日到2013年2月16日&#xff0c;约10个月时间内在纽约市和东京收集的签到数据。数据集中包含纽约市的227,428次签到和东京的573,703次签到。每个文件包括以下8个字段&#xff1a; 用户ID&…