React中使用Zustand用做状态管理库

React中使用Zustand用做状态管理库

在构建 React 应用程序时，状态管理是一个至关重要的方面。为了更轻松地管理应用程序的状态，开发人员通常会寻找简单、高效且功能强大的状态管理库。Zustand 就是这样一款优秀的库，它提供了一种简单而强大的方式来管理 React 应用程序的状态。

1.什么是Zustand？

Zustand 是一个基于 React Hooks 的状态管理库，旨在简化全局和局部状态的管理。它提供了一个函数式 API，使得状态管理变得简单、直观且高效。Zustand 的核心理念是将状态管理保持简单，同时提供足够的灵活性来应对各种复杂的状态需求。

2.为什么选择 Zustand？

**1.简单易用：**Zustand 的 API 设计非常直观，使用起来非常简单。通过几行代码就可以实现状态的创建、访问和更新。

**2.高性能：**Zustand 内部采用了精巧的订阅机制，只会更新与当前组件相关的状态，从而提高性能并降低不必要的重新渲染。

**3.灵活性：**Zustand 支持中间件、状态订阅、状态分片等高级特性，可以根据具体需求进行定制和扩展。

3.如何使用Zustand？

1.首先安装 Zustand：

npm install zustand

2.创建store

import create from "zustand";
import { persist } from "zustand/middleware"; //persist 的中间件, 该中间件通过 localStorage 来持久化来自应用程序的数据, 这样, 当我们刷新页面或者完全关闭页面时, 状态不会重置

const fetchAddFund = (second) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("半导体");
    }, second || 3000);
  });
};//异步操作

let store = (set, get) => ({
  fundList: ["白酒", "医疗", "军工"], //定义初始化数据
  addFundList: (fund) => {
    set((state) => ({
      fundList: [...state.fundList, fund],
    }));
  },//操作state的函数
  minusFundList: () => {
    set((state) => {
      state.fundList.splice(state.fundList.length - 1, 1);
      return {
        fundList: state.fundList,
      };
    });
  },
  fetchAddFundList: async (second) => {
    const res = await fetchAddFund(second);
    set((state) => ({
      fundList: [...state.fundList, res],
    }));
  },//异步函数方法
  getFundList: () => {
    console.log(get().fundList); //get()方法可获取state数据
  },
});

store = persist(store, { name: "fund" }); //数据持久化处理，localStorage里会存储数据

const useStore = create(store); //定义一个store函数useStore

export default useStore;

3.在组件内部使用

import React, { useState } from "react";

import useStore from "./Store";

import { Button, Input } from "antd";

const ZustandDemo = () => {
  const state = useStore(); //获取store暴露的数据
  const {
    fundList,
    addFundList,
    minusFundList,
    fetchAddFundList,
    getFundList,
  } = state; //结构拿到自己需要的数据和方法

  const [fund, setFund] = useState();

  return (
    <>
      {fundList.map((fund, index) => (
        <div key={index}>{fund}</div>
      ))}
      <Input value={fund} onChange={(e) => setFund(e.target.value)} />
      <Button onClick={() => addFundList(fund)}>添加输入的新基金</Button>
      <Button onClick={() => minusFundList()}>去除最后的基金</Button>
      <Button onClick={() => fetchAddFundList()}>
        3秒后添加异步获取的基金
      </Button>
      <Button onClick={() => getFundList()}>打印基金</Button>
    </>
  );
};

export default ZustandDemo;

案例效果如下

以上例子里，组件内获取state，可通过

 const state = useStore(); 获取所有数据

或者通过

const fundList = useStore(state => state.fundList); 获取单个数据

4.结语

Zustand 是一个功能强大且易于使用的 React 状态管理库，适用于各种规模和类型的应用程序。它的简洁和性能优势使得状态管理变得更加轻松和高效。无论是初学者还是有经验的前端开发人员，都可以通过学习和应用 Zustand 来提升应用程序的状态管理质量。gitHub地址