构建一个完整的 React 状态管理方案：从 Context 到 Zustand

这是一篇关于React的深度技术文章

React 生态中有太多的状态管理方案。本文从最基础的 Context 开始，逐步演进到 Zustand，帮助你理解每种方案的适用场景。

方案一：useState + Props Drilling

最简单的状态管理就是 useState 配合 props 传递：

function App() {
  const [count, setCount] = useState(0);
  return <Counter count={count} onIncrement={() => setCount(c => c + 1)} />;
}
 
function Counter({ count, onIncrement }) {
  return (
    <div>
      <Display count={count} />
      <Button onClick={onIncrement} />
    </div>
  );
}
 
function Display({ count }) {
  return <span>{count}</span>;
}
 
function Button({ onClick }) {
  return <button onClick={onClick}>+1</button>;
}

适用场景：组件层级浅、状态简单缺点：Props drilling 让中间组件传递不需要的 props

方案二：React Context

当状态需要被多个深层组件共享时，Context 是标准方案：

import { createContext, useContext, useReducer } from 'react';
 
// 1. 定义状态和 Action
interface CounterState {
  count: number;
  loading: boolean;
}
 
type CounterAction =
  | { type: 'INCREMENT' }
  | { type: 'DECREMENT' }
  | { type: 'SET_LOADING'; payload

Context 的缺点：

Provider value 变化导致所有消费者重新渲染
多个 Context 嵌套导致 "Provider Hell"
不适合高频更新的状态

方案三：Context + 选择器优化

通过拆分 Context 减少不必要的渲染：

// 拆分状态和 dispatch
const CounterStateContext = createContext<CounterState | null>(null);
const CounterDispatchContext = createContext<React.Dispatch<CounterAction> | null>(null);
 
// 只读组件只订阅 state context
function CounterDisplay() {
  const state = useContext(CounterStateContext)!;
  return

方案四：Zustand —— 轻量级状态管理

Zustand 解决了 Context 的性能问题，API 极其简洁：

import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
 
interface CounterStore {
  count: number;
  loading: boolean;
  increment: () => void;
  decrement: () => void;
  incrementAsync: () => Promise<void>;

方案五：Jotai —— 原子化状态

Jotai 适合需要细粒度状态控制的场景：

import { atom, useAtom } from 'jotai';
import { atomWithStorage } from 'jotai/utils';
 
// 定义原子
const countAtom = atomWithStorage('count', 0);
const doubledAtom = atom(get => get(countAtom) * 2);
 
// 异步原子
const userAtom = atom(async () =>

对比总结

方案	适用场景	学习成本	性能
useState	局部状态	低	最佳
Context + useReducer	全局但低频更新	低	一般
Zustand	全局通用方案	低	优秀
Jotai	细粒度原子化	中	优秀
Redux Toolkit	大型团队	高	优秀

我的推荐

小型项目：useState + Context 足矣
中型项目：Zustand —— 简单、高性能
需要细粒度：Jotai
大型团队有规范需求：Redux Toolkit

个人最常使用的是 Zustand，它用最小的 API 解决了 90% 的状态管理需求。

本页目录