状态管理方案对比（Context、Zustand、Jotai 选型指南）

引言

在 React 应用中，状态管理一直是核心挑战。本文将深入对比三种主流方案：React Context、Zustand 和 Jotai，帮助你做出明智的技术选型。

一、React Context - 原生解决方案

基础用法

const ThemeContext = React.createContext('light');

function App() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const { theme, setTheme } = useContext(ThemeContext);
  return <button onClick={() => setTheme('dark')}>切换主题</button>;
}

性能优化

// 问题：每次渲染都会创建新对象，导致子组件重复渲染
const value = { theme, setTheme }; // ❌

// 解决方案：使用 useMemo 稳定引用
const value = useMemo(() => ({ theme, setTheme }), [theme, setTheme]); // ✅

// 或者拆分多个 Context
const ThemeContext = createContext();
const SetThemeContext = createContext();

二、Zustand - 轻量级状态库

核心特性

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>{count}</button>;
}

Zustand 特性对比

特性	Context	Zustand
Bundle 大小	0KB (原生)	~1KB
样板代码	多	少
性能优化	手动	自动
DevTools	需配置	内置
中间件	无	丰富

三、Jotai - 原子化状态管理

原子设计

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

原子家族

import { atomFamily } from 'jotai/utils';

const todoAtomFamily = atomFamily((id) =>
  atom({ id, text: '', done: false })
);

function TodoList({ ids }) {
  return ids.map(id => <TodoItem key={id} id={id} />);
}

function TodoItem({ id }) {
  const [todo, setTodo] = useAtom(todoAtomFamily(id));
  // ...
}

四、性能对比

场景	Context	Zustand	Jotai
全局状态更新	慢	快	最快
细粒度更新	需优化	中等	优秀
组件重渲染	容易过度	按需	精确
大型列表	差	好	优秀

五、选型决策树

需要状态管理？
├─ 简单应用 → Context 足够
├─ 中型应用 → Zustand (平衡性最佳)
└─ 复杂应用/高性能需求 → Jotai
    ├─ 需要细粒度控制 → Jotai
    └─ 需要简单 API → Zustand

混合使用策略

// Context 用于主题、语言等低频更新
const ThemeContext = createContext();

// Zustand 用于业务状态
const useUserStore = create(/* ... */);

// Jotai 用于高频交互状态
const cursorAtom = atom({ x: 0, y: 0 });

总结

方案	适用场景	学习曲线	生态成熟度
Context	小型应用、主题切换	低	高 (原生)
Zustand	中型应用、快速开发	低	中
Jotai	大型应用、高性能	中	中

推荐原则：

1. 从简单开始，不要过早优化
2. 根据团队熟悉度选择
3. 考虑长期维护成本
4. 允许混合使用不同方案