前端状态管理全景：从 useState 到服务端状态的选型决策

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount((c) => c + 1)}>加一</button>
    </div>
  );
}

import { createContext, useMemo, useState } from 'react';

export const ThemeContext = createContext({ theme: 'light', setTheme: () => {} });

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  // 没有 useMemo 时，每次渲染都会生成新对象，导致所有消费方重渲染
  const value = useMemo(() => ({ theme, setTheme }), [theme]);

  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    case 'reset': return { count: 0 };
    default: return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      <span>{state.count}</span>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'reset' })}>重置</button>
    </>
  );
}

import { createSlice, configureStore } from '@reduxjs/toolkit';

const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [] },
  reducers: {
    addItem(state, action) {
      // Immer 允许"看起来像可变"的写法，内部仍生成不可变状态
      state.items.push(action.payload);
    },
    removeItem(state, action) {
      state.items = state.items.filter((item) => item.id !== action.payload.id);
    },
  },
});

export const { addItem, removeItem } = cartSlice.actions;

export const store = configureStore({
  reducer: { cart: cartSlice.reducer },
  // 默认已启用 redux-devtools、redux-thunk，无需额外配置
});

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { combineReducers } from '@reduxjs/toolkit';

const rootReducer = combineReducers({ cart: cartSlice.reducer });

const persistedReducer = persistReducer(
  { key: 'root', storage, whitelist: ['cart'] },
  rootReducer
);

export const store = configureStore({ reducer: persistedReducer });
export const persistor = persistStore(store);

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

export const useUserStore = create(
  persist(
    (set, get) => ({
      user: null,
      login: (user) => set({ user }),
      logout: () => set({ user: null }),
      isLoggedIn: () => get().user !== null,
    }),
    { name: 'user-storage' } // 自动持久化到 localStorage
  )
);

const username = useUserStore((state) => state.user?.name);

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);
const doubleAtom = atom((get) => get(countAtom) * 2);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const [double] = useAtom(doubleAtom);
  return (
    <div>
      <span>{count} / 两倍：{double}</span>
      <button onClick={() => setCount((c) => c + 1)}>+</button>
    </div>
  );
}

import { signal, computed, effect } from '@preact/signals';

const count = signal(0);
const double = computed(() => count.value * 2);

// 任何读取 count.value 的 effect 都会自动订阅
effect(() => {
  console.log(`count 变化为：${count.value}，双倍为：${double.value}`);
});

count.value += 1; // 自动触发上述 effect

import { useQuery } from '@tanstack/react-query';

function UserProfile({ userId }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () =>
      fetch(`/api/users/${userId}`).then((res) => res.json()),
    staleTime: 5 * 60 * 1000, // 5 分钟内视为"新鲜"，不重新请求
    gcTime: 30 * 60 * 1000,   // 缓存保留 30 分钟
  });

  if (isLoading) return <div>加载中…</div>;
  if (error) return <div>出错了：{error.message}</div>;
  return <div>{data.name}</div>;
}

import { useMutation, useQueryClient } from '@tanstack/react-query';

function UpdateName({ userId }) {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: (name) =>
      fetch(`/api/users/${userId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name }),
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['user', userId] });
    },
  });

  return <button onClick={() => mutation.mutate('新名字')}>改名</button>;
}

import { useSearchParams } from 'react-router-dom';

function ProductList() {
  const [searchParams, setSearchParams] = useSearchParams();
  const category = searchParams.get('category') ?? 'all';
  const page = Number(searchParams.get('page') ?? '1');

  const setCategory = (next) => {
    // 更新 URL 查询参数，触发对应状态变化
    setSearchParams((prev) => ({ ...Object.fromEntries(prev), category: next, page: '1' }));
  };

  return (
    <div>
      <button onClick={() => setCategory('electronics')}>电子</button>
      <p>当前分类：{category}，页码：{page}</p>
    </div>
  );
}

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

export const usePreferencesStore = create(
  persist(
    (set) => ({
      theme: 'light',
      locale: 'zh-CN',
      setTheme: (theme) => set({ theme }),
      setLocale: (locale) => set({ locale }),
    }),
    {
      name: 'preferences',
      partialize: (state) => ({ theme: state.theme, locale: state.locale }),
    }
  )
);

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

export const useAppStore = create(
  devtools((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
  }))
);

// 不再导出单例，而是导出工厂函数
import { createStore } from 'zustand';

export const createAppStore = () =>
  createStore((set) => ({
    user: null,
    setUser: (user) => set({ user }),
  }));

import { useSyncExternalStore } from 'react';

const store = {
  state: { count: 0 },
  listeners: new Set(),
  subscribe(listener) {
    store.listeners.add(listener);
    return () => store.listeners.delete(listener);
  },
  getSnapshot() {
    return store.state;
  },
  emit() {
    store.listeners.forEach((l) => l());
  },
};

function CounterView() {
  const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot);
  return <span>{snapshot.count}</span>;
}