现代前端状态管理困境与破局：从Context API到Zustand的优雅演进

// 1. 创建Context
const UserContext = createContext();

// 2. 提供者组件
function App() {
  const [user, setUser] = useState({ name: '小慧', id: 1 });
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Header />
      <Profile />
    </UserContext.Provider>
  );
}

// 3. 消费者组件（使用useContext Hook）
function Profile() {
  const { user } = useContext(UserContext);
  return <div>Hello, {user.name}</div>;
}

const AppStateContext = createContext();

function App() {
  const [user, setUser] = useState({ name: '小慧' });
  const [theme, setTheme] = useState('dark');

  // 当theme改变时，value引用发生变化
  const value = { user, setUser, theme, setTheme };

  return (
    <AppStateContext.Provider value={value}>
      {/* 假设Header只消费theme */}
      <Header />
      {/* 假设Profile只消费user */}
      <Profile />
    </AppStateContext.Provider>
  );
}

function Header() {
  const { theme } = useContext(AppStateContext);
  console.log('Header rendered with theme:', theme);
  return <header className={theme}>Header</header>;
}

function Profile() {
  const { user } = useContext(AppStateContext);
  console.log('Profile rendered with user:', user.name);
  return <div>Profile: {user.name}</div>;
}

const UserContext = createContext();
const ThemeContext = createContext();

function App() {
  return (
    <ThemeContext.Provider value={useState('dark')}>
      <UserContext.Provider value={useState({ name: '小慧' })}>
        <Header />
        <Profile />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
}

const value = useMemo(() => ({ user, setUser }), [user]);

import { create } from 'zustand';

// 创建一个store
const useBearStore = create((set, get) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
  // 可以访问get()来读取当前状态，而不需要触发set
  logBears: () => console.log(`Current bears: ${get().bears}`),
}));

function BearCounter() {
  // 组件只订阅了bears状态！
  const bears = useBearStore((state) => state.bears);
  return <h1>{bears} around here...</h1>;
}

function Controls() {
  // 这个组件只订阅了actions，与bears的值无关，所以bears变化时它不会重新渲染！
  const increasePopulation = useBearStore((state) => state.increasePopulation);
  return <button onClick={increasePopulation}>one up</button>;
}

const useAuthStore = create((set) => ({
  user: null,
  loading: false,
  login: async (credentials) => {
    set({ loading: true });
    try {
      const user = await api.login(credentials);
      set({ user, loading: false });
    } catch (error) {
      set({ loading: false });
      // 处理错误
    }
  },
  logout: () => set({ user: null }),
}));

import { devtools, persist } from 'zustand/middleware';

const useAppStore = create(
  devtools( // 连接到Redux DevTools
    persist( // 持久化到localStorage
      (set, get) => ({
        // ... store定义
      }),
      {
        name: 'app-storage', // localStorage的key
      }
    )
  )
);

// stores/useCartStore.js
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

export const useCartStore = create(
  devtools((set, get) => ({
    items: [],
    total: 0,
    // 添加商品
    addItem: (newItem) => {
      set((state) => {
        const existingItem = state.items.find(item => item.id === newItem.id);
        if (existingItem) {
          // 数量增加
          return {
            items: state.items.map(item =>
              item.id === newItem.id
                ? { ...item, quantity: item.quantity + 1 }
                : item
            ),
          };
        } else {
          // 新增商品
          return { items: [...state.items, { ...newItem, quantity: 1 }] };
        }
      }, false, 'cart/addItem'); // DevTools action名称
      get().calculateTotal(); // 计算总价
    },
    // 计算总价
    calculateTotal: () => {
      const total = get().items.reduce((sum, item) => sum + item.price * item.quantity, 0);
      set({ total }, false, 'cart/calculateTotal');
    },
    // 清空购物车
    clearCart: () => set({ items: [], total: 0 }, false, 'cart/clearCart'),
  }))
);

// components/CartIcon.jsx - 只关心商品总数
function CartIcon() {
  const itemCount = useCartStore((state) =>
    state.items.reduce((total, item) => total + item.quantity, 0)
  );
  return <div>Cart ({itemCount})</div>;
}

// components/ProductList.jsx - 只关心商品列表和addItem action
function ProductList({ products }) {
  const addItem = useCartStore((state) => state.addItem);
  return (
    <div>
      {products.map(product => (
        <button key={product.id} onClick={() => addItem(product)}>
          Add {product.name}
        </button>
      ))}
    </div>
  );
}