React基础学习-Day06

🕗 发布于 2024-07-17 17:24 react.js 学习前端

React基础学习-Day06

zustand基本使用方式

1.基础使用

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

安装

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

npm install zustand

或者使用 yarn：

yarn add zustand

创建和使用状态存储

创建状态存储：

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

// counterStore.js

import 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。
increment 和 decrement 是更新函数，分别用于增加和减少 count 的值。

在组件中使用状态：

在需要使用状态的 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 来获取 count 和 increment、decrement 更新函数。
每当按钮被点击时，对应的更新函数将被调用，从而更新 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。具体来说，它将状态数据序列化为字符串并存储在浏览器提供的持久化存储中，以确保即使在页面刷新或关闭后，数据仍然可以被读取和恢复。

主要点概述：

localStorage:
- localStorage 是浏览器提供的一个持久化存储机制，允许网页存储键值对数据。
- 使用 persist 中间件时，它默认会将状态数据序列化为 JSON 字符串，并存储在 localStorage 中。
数据位置:
- 持久化的数据存储在浏览器的 localStorage 中，与当前网站域名相关联。
- 数据以键值对的形式存储，键是配置中指定的名称（例如 { name: 'bound-store' } 中的 'bound-store'）。
持久化机制:
- 当应用程序使用 set 函数来更新 Zustand 中的状态时，persist 中间件会捕获这些更新，并将新的状态数据序列化后存储到 localStorage。
- 在页面刷新或重新加载后，可以通过读取 localStorage 中相应的键来恢复存储的状态数据，从而实现数据的持久化和恢复功能。
配置选项:
- persist 中间件的配置选项允许您指定存储的名称、存储路径或其他相关设置，以便更精细地控制数据的存储和管理。

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

总结

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

3.create函数

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

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

set:
- 用于更新状态的函数。
- 典型的用法是 set((state) => ({ ...state, someProperty: newValue }))，它接收一个函数，这个函数的参数是当前的状态，返回值是新的状态部分对象。
get:
- 用于获取当前状态的函数。
- 可以通过 get() 来访问当前的状态值，常用于读取状态的当前值以便在更新时参考。
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;

参数详细说明

set:
- 类型：(partial: Partial<State> | ((state: State) => Partial<State>)) => void
- 用途：更新状态。
- 示例：set((state) => ({ count: state.count + 1 }))
get:
- 类型：() => State
- 用途：获取当前状态。
- 示例：const currentCount = get().count
api:
- 类型：StoreApi<State>
- 用途：访问存储 API。
- 示例：api.getState()

示例解释

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

总结

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

5.create中的参数API

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

setState(partialState, replace?):
- 更新状态。
- partialState 是一个部分状态对象或函数，它接收当前状态并返回部分状态对象。
- replace 是一个可选的布尔值，指示是否替换整个状态。
getState():
- 获取当前状态。
- 返回当前状态对象。
subscribe(listener):
- 订阅状态变化。
- listener 是一个函数，每当状态改变时都会被调用。
- 返回一个取消订阅的函数。
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;

使用说明

setState(partialState, replace?):

用于更新状态。

示例：

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

getState():

用于获取当前状态。

示例：

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

subscribe(listener):

用于订阅状态变化。

示例：

const unsubscribe = api.subscribe((newState) => {
  console.log('State changed:', newState);
});

// 取消订阅
unsubscribe();

destroy():
- 用于销毁存储，清理所有订阅。
- 示例：
```
api.destroy();
```

总结

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

原文地址：https://blog.csdn.net/weixin_38647954/article/details/140476281

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：微软的vscode和vs2022快捷键官网链接
下一篇：前端效果ᅳ1、react实现时间上下轮播特效

leetcode289:生命游戏
根据，简称为，是英国数学家约翰·何顿·康威在 1970 年发明的细胞自动机。给定一个包含m × n个格子的面板，每一个格子都可以看成是一个细胞。每个细胞都具有一个初始状态：1即为（live），或0即为
阅读更多2024-10-20
MongoDB数据恢复
注意：两个MongoDB的版本要一致，本文使用的是mongo:4.2.24。先把K8S上面的MongoDB 容器停止（可以把副本改成0）。1、将容器挂载MongoDB的数据目录备份到本地。经常是数据文
阅读更多2024-10-20
C#中实现事务
C#中实现事务
阅读更多2024-10-20
【LeetCode每日一题】——560.和为 K 的子数组
给你一个整数数组 nums 和一个整数 k ，请你统计并返回该数组中和为 k 的子数组的个数。子数组是数组中元素的连续非空序列。
阅读更多2024-10-20
「漏洞复现」满客宝智慧食堂系统 selectUserByOrgId 未授权访问漏洞
请勿利用文章内的相关技术从事非法测试，由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失，均由使用者本人负责，作者不为此承担任何责任。工具来自网络，安全性自测，如有侵权请联系删除。本次
阅读更多2024-10-20
React面试题目（从基本到高级）
React前端面试常见题目涵盖了React的基础概念、组件、状态管理、生命周期、性能优化等多个方面。
阅读更多2024-10-20
12.个人博客系统（Java项目基于spring和vue）
1 在校学习的学生，可用于日常学习使用或是毕业设计使用 2 毕业一到两年的开发人员，用于锻炼自己的独立功能模块设计能力，增强代码编写能力。 3 亦可以部署为商化项目使用。 4 需要完整资料及源码
阅读更多2024-10-20
YoloV8改进策略：注意力改进|DeBiFormer，可变形双级路由注意力|引入DeBiLevelRoutingAttention注意力模块（全网首发）
本次改进的核心在于将DeBiLevelRoutingAttention模块嵌入到YoloV8的主干网络中，具体位置是在SPPF（Spatial Pyramid Pooling Fast）模块之后。这一
阅读更多2024-10-20
word取消自动单词首字母大写
情况说明：在word输入单词后首字母会自动变成大写取消单词首字母大写步骤：（1）点击菜单栏文件（2）点击“更多”——>“选项”（3）点击“校对”——>“自动更正选项”（4）取消“句首字母大
阅读更多2024-10-20
web前端网页用户注册页面
【代码】web前端网页用户注册页面。
阅读更多2024-10-20

React基础学习-Day06