React基础学习-Day06

React基础学习-Day06

zustand基本使用方式

1.基础使用

基本使用 zustand 的步骤包括创建状态存储和在组件中使用这些状态和更新函数。以下是一个基础的示例,演示如何使用 zustand 来管理一个简单的计数器状态。

安装

首先,确保你的项目中已经安装了 zustand

npm install zustand

或者使用 yarn:

yarn add zustand

创建和使用状态存储

  1. 创建状态存储:

使用 create 函数来创建一个状态存储。在回调函数中,定义状态对象及其更新函数。

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

在这个示例中:

  • count 是状态的初始值,初始化为 0。
  • incrementdecrement 是更新函数,分别用于增加和减少 count 的值。
  1. 在组件中使用状态:

在需要使用状态的 React 组件中,使用 useCounterStore Hook 来获取状态和更新函数。然后,可以直接在组件中使用这些函数来更新状态。

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

在这个组件中:

  • 使用 useCounterStore Hook 来获取 countincrementdecrement 更新函数。
  • 每当按钮被点击时,对应的更新函数将被调用,从而更新 count 的值。

总结

使用 zustand 可以简化和管理 React 应用程序中的状态。通过 create 函数创建状态存储,定义状态和更新函数。然后,在组件中使用相应的 Hook 来获取和更新状态,从而实现组件之间的状态共享和管理。这种方式不仅简洁直观,而且基于 React Hooks,适用于函数组件中的状态管理。

当然可以,请稍等。

以下是带有保留专用名词的翻译:

2.切片模式

在 Zustand 中,切片模式是一种将主要存储区分割为较小、更易管理的存储单元的技术。每个存储单元负责特定的状态和操作,有助于保持模块化并随着应用程序的增长改善代码组织。

示例切片

以下是如何使用 Zustand 创建和组合单独切片的示例:

Fish 切片
// fishSlice.js
export const createFishSlice = (set) => ({fishes: 0,addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
});
Bear 切片
// bearSlice.js
export const createBearSlice = (set) => ({bears: 0,addBear: () => set((state) => ({ bears: state.bears + 1 })),eatFish: () => set((state) => ({ fishes: state.fishes - 1 })),
});
合并切片成为绑定存储
// useBoundStore.js
import { create } from 'zustand';
import { createBearSlice } from './bearSlice';
import { createFishSlice } from './fishSlice';export const useBoundStore = create((set) => ({...createBearSlice(set),...createFishSlice(set),
}));

在 React 组件中的使用

然后,您可以在 React 组件中使用 useBoundStore 来访问和更新组合状态:

import React from 'react';
import { useBoundStore } from './useBoundStore';function App() {const bears = useBoundStore((state) => state.bears);const fishes = useBoundStore((state) => state.fishes);const addBear = useBoundStore((state) => state.addBear);return (<div><h2>熊的数量:{bears}</h2><h2>鱼的数量:{fishes}</h2><button onClick={() => addBear()}>添加一只熊</button></div>);
}export default App;

更新多个切片

如果需要同时更新多个切片,您可以创建一个组合操作:

// createBearFishSlice.js
export const createBearFishSlice = (set, get) => ({addBearAndFish: () => {get().addBear();get().addFish();},
});
将所有商店合并在一起与以前相同。
import { create } from 'zustand'
import { createBearSlice } from './bearSlice'
import { createFishSlice } from './fishSlice'
import { createBearFishSlice } from './createBearFishSlice'export const useBoundStore = create((...a) => ({...createBearSlice(...a),...createFishSlice(...a),...createBearFishSlice(...a),
}))

添加中间件

您还可以将中间件应用于组合存储,增强其功能:

// useBoundStore.js with middleware
import { create } from 'zustand';
import { createBearSlice } from './bearSlice';
import { createFishSlice } from './fishSlice';
import { persist } from 'zustand/middleware';export const useBoundStore = create(persist((set) => ({...createBearSlice(set),...createFishSlice(set),}),{ name: 'bound-store' })
);
中间件解释:

在上下文中使用 persist 中间件时,它通常会将状态持久化到浏览器的本地存储中,例如使用 localStorage。具体来说,它将状态数据序列化为字符串并存储在浏览器提供的持久化存储中,以确保即使在页面刷新或关闭后,数据仍然可以被读取和恢复。

主要点概述:

  1. localStorage:

    • localStorage 是浏览器提供的一个持久化存储机制,允许网页存储键值对数据。
    • 使用 persist 中间件时,它默认会将状态数据序列化为 JSON 字符串,并存储在 localStorage 中。
  2. 数据位置:

    • 持久化的数据存储在浏览器的 localStorage 中,与当前网站域名相关联。
    • 数据以键值对的形式存储,键是配置中指定的名称(例如 { name: 'bound-store' } 中的 'bound-store')。
  3. 持久化机制:

    • 当应用程序使用 set 函数来更新 Zustand 中的状态时,persist 中间件会捕获这些更新,并将新的状态数据序列化后存储到 localStorage
    • 在页面刷新或重新加载后,可以通过读取 localStorage 中相应的键来恢复存储的状态数据,从而实现数据的持久化和恢复功能。
  4. 配置选项:

    • persist 中间件的配置选项允许您指定存储的名称、存储路径或其他相关设置,以便更精细地控制数据的存储和管理。

通过使用 persist 中间件,您可以轻松地在 Zustand 状态管理中实现数据的持久化,这对于需要在用户会话之间保持状态或保存用户偏好设置的应用程序特别有用。

总结

Zustand 中的切片模式使您能够在 React 应用程序中保持可扩展和组织良好的状态管理方法。通过将主存储分解为更小、专注的切片,您可以提高模块化程度、简化测试并增强代码库的可维护性。这是管理复杂应用程序状态的强大模式。

3.create函数

在 Zustand 中,create 函数用于创建状态存储。create 函数的第一个参数是一个状态创建器(state creator)函数。这个状态创建器函数接收一组参数,这些参数用于管理和修改状态。通常,这些参数包括 setget 和其他可能的工具函数。

状态创建器函数的参数列表

  1. set:

    • 用于更新状态的函数。
    • 典型的用法是 set((state) => ({ ...state, someProperty: newValue })),它接收一个函数,这个函数的参数是当前的状态,返回值是新的状态部分对象。
  2. get:

    • 用于获取当前状态的函数。
    • 可以通过 get() 来访问当前的状态值,常用于读取状态的当前值以便在更新时参考。
  3. api:

    • 代表整个 Zustand 存储 API 的对象。
    • 包含其他有用的方法和工具,可以用于更高级的状态管理需求。

参数列表示例

假设我们有一个简单的状态存储,用于管理一个计数器和一个名称属性,状态创建器函数的参数列表如下:

import create from 'zustand';const useStore = create((set, get, api) => ({count: 0,name: 'Zustand',increment: () => set((state) => ({ count: state.count + 1 })),reset: () => {const currentName = get().name;set({ count: 0, name: 'Zustand' });console.log('Reset done for', currentName);},apiFunction: () => {console.log('Store API:', api);}
}));export default useStore;

参数详细说明

  1. set:

    • 类型(partial: Partial<State> | ((state: State) => Partial<State>)) => void
    • 用途:更新状态。
    • 示例set((state) => ({ count: state.count + 1 }))
  2. get:

    • 类型() => State
    • 用途:获取当前状态。
    • 示例const currentCount = get().count
  3. api:

    • 类型StoreApi<State>
    • 用途:访问存储 API。
    • 示例api.getState()

示例解释

  • countname 是状态属性。
  • increment 是一个方法,使用 set 函数更新 count
  • reset 方法使用 get 函数读取当前的 name,然后重置 countname
  • apiFunction 方法展示了如何使用 api 对象。

总结

Zustand 的 create 函数接受一个状态创建器函数,该函数可以接收三个参数:setgetapi。这些参数提供了更新和获取状态的功能,以及对 Zustand 存储 API 的访问。通过这些工具,您可以灵活地管理状态并实现复杂的状态逻辑。

5.create中的参数API

在 Zustand 中,api 对象是整个存储 API,它提供了对状态存储的全面控制。这个 api 对象可以通过状态创建器函数的第三个参数访问。api 对象包括以下常见方法和属性:

  1. setState(partialState, replace?):

    • 更新状态。
    • partialState 是一个部分状态对象或函数,它接收当前状态并返回部分状态对象。
    • replace 是一个可选的布尔值,指示是否替换整个状态。
  2. getState():

    • 获取当前状态。
    • 返回当前状态对象。
  3. subscribe(listener):

    • 订阅状态变化。
    • listener 是一个函数,每当状态改变时都会被调用。
    • 返回一个取消订阅的函数。
  4. destroy():

    • 销毁存储,清理所有订阅。

示例代码

import create from 'zustand';const useStore = create((set, get, api) => ({count: 0,increment: () => set((state) => ({ count: state.count + 1 })),reset: () => {const currentState = get();set({ count: 0 });console.log('State has been reset:', currentState);},printApi: () => {console.log('Store API:', api);}
}));export default useStore;

使用说明

  1. setState(partialState, replace?):

    • 用于更新状态。

    • 示例:

      api.setState({ count: 10 });
      api.setState((state) => ({ count: state.count + 1 }));
      api.setState({ count: 0 }, true);  // 完全替换状态
      
  2. getState():

    • 用于获取当前状态。

    • 示例:

      const state = api.getState();
      console.log('Current state:', state);
      
  3. subscribe(listener):

    • 用于订阅状态变化。

    • 示例:

      const unsubscribe = api.subscribe((newState) => {console.log('State changed:', newState);
      });// 取消订阅
      unsubscribe();
      
  4. destroy():

    • 用于销毁存储,清理所有订阅。

    • 示例:

      api.destroy();
      

总结

api 对象提供了对 Zustand 存储的全面控制,通过它可以更新状态、获取当前状态、订阅状态变化以及销毁存储。了解这些方法有助于更灵活和高效地管理 Zustand 状态。

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

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

相关文章

socket编程(2) -- TCP通信

TCP通信 2. 使用 Socket 进行TCP通信2.1 socket相关函数介绍socket()bind()listen()accept()connect()2.2 TCP协议 C/S 模型基础通信代码 最后 2. 使用 Socket 进行TCP通信 Socket通信流程图如下&#xff1a; 这里服务器段listen是监听socket套接字的监听文件描述符。如果客户…

Redis--布隆过滤器

解决缓存穿透是构建高效缓存系统中的关键问题之一。缓存穿透指的是恶意或者非法请求经过缓存层直接访问数据库或者后端服务&#xff0c;导致系统资源浪费和性能下降的情况。为了有效应对缓存穿透问题&#xff0c;以下是几种常见的解决方法&#xff1a; 1. 布隆过滤器预检查 布…

运维-Docker-黑马

运维-Docker-黑马 编辑时间&#xff1a;2024/7/15 来源&#xff1a;黑马程序员 docker&#xff1a;快速构建&#xff0c;运行&#xff0c;管理应用的工具 Docker安装 部署mysql 命令解读

[Cesium for Supermap] 加载3dTiles,点击获取属性

代码&#xff1a; // 设为椭球var obj [6378137.0, 6378137.0, 6356752.3142451793];Cesium.Ellipsoid.WGS84 Object.freeze(new Cesium.Ellipsoid(obj[0], obj[1], obj[2]));var viewer new Cesium.Viewer(cesiumContainer);var scene viewer.scenescene.lightSource.ambi…

Oracle TDE(Transparent Data Encryption) 常见问题解答 - 官网

此FAQ来源于官网链接。此为新版&#xff0c;老版的博客参见Oracle TDE(Transparent Data Encryption) 常见问题解答。 通用问题 透明数据加密 (TDE) 提供什么功能&#xff1f; TDE 以透明方式加密 Oracle 数据库中的静态数据。它可以阻止操作系统未经授权尝试访问存储在文件…

彻底改变时尚:使用 GAN 实现 AI 的未来

彻底改变时尚&#xff1a;使用 GAN 实现 AI 的未来 一、介绍 想象一下&#xff0c;在这个世界里&#xff0c;时装设计师永远不会用完新想法&#xff0c;我们穿的每一件衣服都是一件艺术品。听起来很有趣&#xff0c;对吧&#xff1f;好吧&#xff0c;我们可以在通用对抗网络 &a…

鸿蒙基本工程目录

工程级目录 AppScope 中存放应用全局所需要的资源文件。entry 是应用的主模块&#xff0c;存放 HarmonyOS 应用的代码、资源等。oh_modules 是工程的依赖包&#xff0c;存放工程依赖的源文件。build-profile.json5 是工程级配置信息&#xff0c;包括签名、产品配置等。hvigorf…

品牌产业出海指南如何搭建国际化架构的跨境电商平台?

在“品牌&产业出海指南 – 成功搭建跨境电商平台”系列中&#xff0c;我们将从电商分销系统、跨境平台商城/多商户商城系统和国际化架构三个方面对帮助您梳理不同平台模式的优缺点、应用场景、开发重点和运营建议。 在“品牌&产业出海指南 – 成功搭建跨境电商平台”系…

【漏洞复现】Rejetto HTTP文件服务器——远程命令执行(CVE-2024-23692)

声明&#xff1a;本文档或演示材料仅供教育和教学目的使用&#xff0c;任何个人或组织使用本文档中的信息进行非法活动&#xff0c;均与本文档的作者或发布者无关。 文章目录 漏洞描述漏洞复现测试工具 漏洞描述 Rejetto HTTP文件服务器是一个轻量级的HTTP服务器软件&#xff…

VBA学习(20):一批简单的Excel VBA编程问题解答

1.如何确定单元格区域内的行数和列数&#xff1f; 使用Range.Rows.Count和Range.Columns.Count属性。 2.Application.Columns指的是什么&#xff1f; 活动工作表中的列。 3.你的程序在列B位置插入一个新列&#xff0c;原来的列B会怎样&#xff1f; 它向右移动成为列C。 4.假…

vue项目1分钟实现自定义右键菜单,懒人的福音

高效实现需求&#xff0c;避免重复造轮子&#xff0c;今天给大家分享的是&#xff0c;如何在最短的时间内实现右键菜单&#xff0c;方法也很简单&#xff0c;一个插件就可以搞定&#xff0c;话不多说&#xff0c;上效果图&#xff1a; 1. 效果图&#xff1a; 2. 安装&#xff…

5. 基于Embedding实现超越elasticsearch高级搜索

Embedding介绍 Embedding是向量的意思&#xff0c;向量可以理解为平面坐标中的一个坐标点(x,y),在编程领域&#xff0c;一个二维向量就是一个大小为float类型的数组。也可以用三维坐标系中的向量表示一个空间中的点。在机器学习中&#xff0c;向量通常用于表示数据的特征。 向量…

SCI丨中三区

无线网络遥感图像和视频处理技术在xxxxx析基于智能物联网的xxxxx养老模式可持续发展基于心理行为大数据分类算法xxxxxx研究基于云计算xxxxx行为分析及客户感知体系的构建基于机器学习的xxxxx金钢时效行为研究 基于机器视觉的xxxxx检测系统研究 机器学习的电子显微镜xxxxx材料的…

探索Laravel的视图组件与插槽:构建动态且可复用的UI

探索Laravel的视图组件与插槽&#xff1a;构建动态且可复用的UI 引言 Laravel作为一个现代化的PHP框架&#xff0c;提供了许多强大的功能来帮助开发者构建高性能和可维护的Web应用。其中&#xff0c;视图组件&#xff08;View Components&#xff09;和插槽&#xff08;Slots…

【React Hooks原理 - forwardRef、useImperativeHandle】

概述 上文我们聊了useRef的使用和实现&#xff0c;主要两个用途&#xff1a;1、用于持久化保存 2、用于绑定dom。 但是有时候我们需要在父组件中访问子组件的dom或者属性/方法&#xff0c;而React中默认是不允许父组件直接访问子组件的dom的&#xff0c;这时候就可以通过forwa…

数据库SQL Server列拼接Join和Union

文章目录 JOINJOIN的基本语法如下&#xff1a; UNIONUNION的基本语法如下&#xff1a; 在 SQL Server中&#xff0c; JOIN和 UNION是两种不同的操作&#xff0c;它们用于合并来自两个或多个表的数据。 JOIN JOIN操作用于将两个或多个表中的行结合起来&#xff0c;基于它们之…

Jmeter二次开发Demo

Jmeter二次开发Demo 前言 在上一集&#xff0c;我们已经完成了JMX脚本的分析&#xff0c;大致了解了JMX脚本的基本元素。 那么在这一集&#xff0c;我们将会介绍一下Jmeter二次开发的Demo。 Demo代码 那么话不多说&#xff0c;我们就直接上代码。 public class TestStress…

SpringBoot+HttpClient实现文件上传下载

服务端&#xff1a;SpringBoot Controller package com.liliwei.controller;import java.io.File; import java.io.FileInputStream; import java.io.IOException;import javax.servlet.http.HttpServletResponse;import org.springframework.http.HttpHeaders; import org.s…

Cesium 判断位置是否在当前视口范围内

详细步骤都在注释里,不过多赘述了。 /*** @param {Object} position - Cartesian3坐标* @return {Boolean} 是否在视口中*/ function isPositionInViewport(position) {// 获取当前视口范围let viewport = viewer.camera.computeViewRectangle();// 2D模式下拾取不到坐标,vi…

类和对象的简述(c++篇)

开局之前&#xff0c;先来个小插曲&#xff0c;放松一下&#xff1a; 让我们的熊二来消灭所有bug 各位&#xff0c;在这祝我们&#xff1a; 放松过后&#xff0c;开始步入正轨吧。爱学习的铁子们&#xff1a; 目录&#xff1a; 一类的定义&#xff1a; 1.简述&#xff1a; 2…