React基础学习-Day06

最新推荐文章于 2024-08-14 17:41:40 发布
最新推荐文章于 2024-08-14 17:41:40 发布
阅读量858 收藏 27
点赞数 8
文章标签： react.js 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38647954/article/details/140476281
版权

React基础学习-Day06

zustand基本使用方式

1.基础使用

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

安装

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

npm install zustand

或者使用 yarn：

yarn add zustand

创建和使用状态存储

  1. 创建状态存储：

使用 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 的值。
  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 来获取 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。具体来说，它将状态数据序列化为字符串并存储在浏览器提供的持久化存储中，以确保即使在页面刷新或关闭后，数据仍然可以被读取和恢复。

主要点概述：

  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）函数。这个状态创建器函数接收一组参数，这些参数用于管理和修改状态。通常，这些参数包括 set、get 和其他可能的工具函数。

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

  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()

示例解释

  • 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 对象包括以下常见方法和属性：

  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 状态。

嘻嘻啦啦啵
关注
  • 8
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React学习打卡Day05
Narcissus__的博客
03-31 1380
1.属性props 使用let {‘属性名’} = this.props 接收属性 可接收多个 2.属性验证Navbar.protoTypes = {验证代码} 可以写在对象内部，需要加static关键字 import React, { PureComponent } from 'react' import proptypes from 'prop-types' export default class Navbar extends PureComponent { static prot...
React学习day18
weixin_46758732的博客
07-01 208
Provider 批量传递store对象 <Provider store={store} <App/> <Provider>, 求和案例react-redux 优化 容器组件和UI组件整合一个文件。 无需自己给容器组件传递store，给包裹一个即可。 使用react-redux后也不用自己再检测redux中状态的改变，容器组件可以自动完成这个工作。 .mapDispatchToProps也可以简单的写一个对象 一个组件要和redux“打交道”要经过几
react 之 zustand
Jasmin博客
02-02 1483
zustand状态管理工具
zustand切片模式
听海边涛声
08-05 210
zustand切片模式
React(二)
m0_68397204的博客
12-14 155
打包指的是将项目中的源代码和资源文件进行处理，生成可在生产环境中运行的静态文件的过程打包命令：npm run build。
learn-react-day-by-day:每天学习reactJs
04-30
总的来说，《每天学习ReactJs》涵盖了React开发的各个方面，从基础到高级，包括组件化开发、状态管理、性能优化、路由、Hooks以及测试策略。通过这个教程，开发者将能深入理解React，并具备构建现代Web应用的能力。
React-Weather-5-day-Forecast-
04-17
在React-Weather-5-day-Forecast项目中，你可以学习到如何处理API请求，将返回的数据绑定到React组件状态，以及如何使用CSS实现响应式设计，使应用在不同设备上都能良好展示。此外，你还能了解到如何利用React生命...
react-native-appstore-day
05-31
在"react-native-appstore-day-master"这个文件夹中，可能包含了项目的所有源代码、资源文件、配置文件等。常见的目录结构可能有`src`（源代码）、`assets`（静态资源）、`node_modules`（依赖库）、`package.json`...
wdft-react-day-1-类代码
02-23
根据压缩包文件名称 "wdft-react-day-1--class-code-master"，我们可以假设这是一个开源项目或者教程的代码仓库，可能包含了一个或多个类组件的实例代码，供学习者实践和理解。 在React中，类组件通常用于管理更...
react-day4-server-starter
03-19
1. **React基础知识**：React是Facebook开发的一款用于构建用户界面的JavaScript库，它以组件化开发为核心，支持虚拟DOM，使得UI更新更加高效。在这个项目中，你需要对React的生命周期方法、状态管理、props传递以及...
react中使用nextjs框架，前端调后端接口跨域解决方式
晚风的博客
08-14 181
react中使用nextjs框架，前端调后端接口跨域解决方式
如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解
计算机图形学
08-14 338
深层次响应式意味着对象的所有属性，无论它们嵌套有多深，都将被Vue的响应式系统追踪。这样，当这些属性的值发生变化时，Vue能够自动检测到这些变化，并更新依赖于这些属性的视图或计算属性。函数将这个对象转换成一个具有深层次响应式的对象。这意味着这个对象的所有属性，包括嵌套的属性，都将被转换成响应式的。，Vue会在将对象转换为响应式对象的过程中，深层地解包这些嵌套的。时，Vue内部是如何处理这个对象的。所引用的值将被直接暴露为响应式对象的属性，而不是作为。直接是一个响应式的对象，而不是一个。
React Router6
最新发布
guai_guai_guai的博客
08-14 703
1.React Router 以三个不同的包发布到npm上，它们分别为：1.react-router:路由的核心库，提供了很多的：组件、钩子2.react-router-dom:包含react-router所有内容，并添加一些专门用于DOM的组件，例如<BrowserRouter>等3.react-router-native:包括react-router所有内容，并添加一些专门用于ReactNative的API，例如：<NativeRouter>等。
react组件优化之React.PureComponent,React.memo
qq_24428851的博客
08-13 446
在开发中我们经常会考虑项目的优化问题，react作为现在前端的热门框架用的人肯定是非常的多。项目的优化问题也是非常重要的一部分，能大大提高项目的流畅度，用户体验会非常好。react项目中会用到大量的组件嵌套，减少一些组件的不必要的渲染，可以大大减少损耗。React.PureComponent和React.memo比较相似，都可以控制组件什么时候应该渲染，但是是浅比较，这意味着对于数组和对象不会进行深层次的比较。下面我们来看一个例子：React.PureComponent要搭配类组件；
React+AntDesign做一个日历，展示节假日，节气，并且在某几个时间上添加活动备注
weixin_43517190的博客
08-14 375
React+AntDesign做一个日历，展示节假日，节气，并且在某几个时间添加备注，有图有代码～
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 570
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
React 学习——react项目中加入echarts图
qq_40269801的博客
08-09 373
react项目中加入echarts图
全屏组件封装（react18+antd）
qq_47040462的博客
08-09 377
基于react+ts封装的公用全屏组件。
react18 + ts 使用video.js 直播.m3u8格式的视频流
qq_34109078的博客
08-14 126
我使用的video.js版本是8.17.3，从 Video.js 7.x 开始，HLS 支持被内置到了 Video.js 中所以不需要安装其他依赖。
react 使用react-viewer --save
05-25
react-viewer 是一个基于 React 的图片浏览器组件，可以在网页中实现图片的预览和放大缩小等功能。如果你想在自己的项目中使用 react-viewer，可以通过以下命令来安装： ``` npm install react-viewer --save ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值