React | Context API 与 Zustand

各位开发者同仁大家好，今天我们将讨论 React 上下文 API 和 Zustand。

介绍

React 的 useContext 是一个内置的 hook，它允许你在应用程序内共享状态，而无需在每一层手动传递 props。
Zustand 是一个小巧、快速且可扩展的 Bearbones 状态管理库，旨在为 React 应用程序中的全局状态管理提供更直接的方式。

使用上下文概述

useContext是什么？

useContext 是一个 React hook，它允许你使用上下文值，而无需将组件包装在 Context.Consumer 中。

如何使用 useContext

1. 创建上下文



import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext();

const MyProvider = ({ children }) => {
  const [state, setState] = useState('default value');

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
};

2. 吸收上下文



const MyComponent = () => {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState('new value')}>Change State</button>
    </div>
  );
};

使用案例：

多个组件共享状态
避免螺旋桨钻井

状态概述

什么是 Zustand？

Zustand 是一个小巧、快速且灵活的状态管理库，它使用 Hooks 来管理 React 应用中的状态。与 Redux 等一些更全面的状态管理解决方案相比，它更轻量级、更易于使用。

如何使用 Zustand

1. 安装 Zustand：



npm install zustand

2. 创建店铺



import create from 'zustand';

const useStore = create((set) => ({
  state: 'default value',
  setState: (newState) => set({ state: newState })
}));

3. 消费商店



const MyComponent = () => {
  const { state, setState } = useStore();

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState('new value')}>Change State</button>
    </div>
  );
};

用例

全球状态管理
中小型应用
性能关键型应用

useContext 和 Zustand 之间的区别

	上下文 API	祖斯坦特
设置复杂度	简单直接，是 React 的一部分。	需要额外的库和设置，但提供了更多功能。
表现	对于嵌套过深的组件和频繁的重新渲染，可能会导致性能问题。	针对性能进行了优化，最大限度地减少了重新渲染次数，并提高了可扩展性。
国家管理	适用于更简单的状态共享。	更适合复杂的状态管理需求，具有中间件、持久化和操作等功能。
可扩展性	对于大型应用而言，可扩展性较差。	通过更好地分离关注点，提高可扩展性。
持久性	useContext 本身并不内置跨会话持久化状态的功能。如果您需要持久化状态（例如，跨页面重新加载），通常需要使用浏览器存储 API（例如 localStorage 或 sessionStorage）手动实现。这需要额外的代码来保存和检索存储中的上下文状态，以及在应用程序启动时从存储中初始化上下文状态。	Zustand 内置了状态持久化支持。Zustand 可以轻松集成浏览器存储 API，让您能够以最少的样板代码实现状态的持久化和恢复。这通常是通过使用 Zustand 提供的中间件来实现的，例如 zustand/middleware。

持久状态

安装 Zusstand 中间件：



npm install zustand zustand/middleware

创建一个持久化存储



import create from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(
  persist(
    (set) => ({
      state: 'default value',
      setState: (newState) => set({ state: newState })
    }),
    {
      name: 'my-store', // unique name
      getStorage: () => localStorage // use localStorage or sessionStorage for persistence
    }
  )
);

照常消费。



const MyComponent = () => {
  const { state, setState } = useStore();

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState('new value')}>Change State</button>
    </div>
  );
};