React 状态管理方案对比

// useState 基础用法
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

// useState 惰性初始化：昂贵的初始计算只跑一次
function TodoList() {
  // ❌ 每次渲染都会执行 heavyParse
  // const [todos, setTodos] = useState(heavyParse(localStorage.getItem('todos')));

  // ✅ 只在首次渲染执行
  const [todos, setTodos] = useState(() =>
    heavyParse(localStorage.getItem('todos'))
  );

  return <ul>{todos.map(t => <li key={t.id}>{t.text}</li>)}</ul>;
}

// useContext 跨组件状态共享
const ThemeContext = createContext('light');

function App() {
  const [theme, setTheme] = useState('dark');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Layout />
    </ThemeContext.Provider>
  );
}

function Layout() {
  return (
    <div>
      <Header />
      <Main />
    </div>
  );
}

function Header() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <header className={`header-${theme}`}>
      <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </header>
  );
}

// useReducer 复杂状态管理
const formReducer = (state, action) => {
  switch (action.type) {
    case 'SET_FIELD':
      return { ...state, [action.field]: action.value };
    case 'SET_ERROR':
      return { ...state, errors: { ...state.errors, [action.field]: action.error } };
    case 'RESET':
      return action.initialState;
    default:
      return state;
  }
};

function Form() {
  const initialState = { username: '', email: '', errors: {} };
  const [state, dispatch] = useReducer(formReducer, initialState);

  const handleChange = (field) => (e) => {
    dispatch({ type: 'SET_FIELD', field, value: e.target.value });
  };

  return (
    <form>
      <input
        value={state.username}
        onChange={handleChange('username')}
      />
      {state.errors.username && <span>{state.errors.username}</span>}
    </form>
  );
}

// ❌ 反例：把频繁变化的值和稳定的值放同一个 Context
const AppContext = createContext(null);
function BadProvider({ children }) {
  const [user, setUser] = useState(null);      // 很少变
  const [mouse, setMouse] = useState({ x: 0, y: 0 }); // 每次移动都变
  // mouse 变化会让所有读 user 的组件也一起重渲染
  return (
    <AppContext.Provider value={{ user, setUser, mouse, setMouse }}>
      {children}
    </AppContext.Provider>
  );
}

// ✅ 正例：按更新频率拆分 Context
const UserContext = createContext(null);
const MouseContext = createContext(null);

function GoodProvider({ children }) {
  const [user, setUser] = useState(null);
  const [mouse, setMouse] = useState({ x: 0, y: 0 });

  // 用 useMemo 稳定 value 引用，避免 Provider 重渲染时误触发
  const userValue = useMemo(() => ({ user, setUser }), [user]);
  const mouseValue = useMemo(() => ({ mouse, setMouse }), [mouse]);

  return (
    <UserContext.Provider value={userValue}>
      <MouseContext.Provider value={mouseValue}>
        {children}
      </MouseContext.Provider>
    </UserContext.Provider>
  );
}

// 只读 user 的组件不会因为鼠标移动而重渲染
const Avatar = memo(function Avatar() {
  const { user } = useContext(UserContext);
  return <img src={user?.avatar} alt="" />;
});

// Redux Toolkit 完整示例：同步 + 异步
import { createSlice, configureStore, createAsyncThunk } from '@reduxjs/toolkit';

// 异步 thunk：处理数据请求
export const fetchTodos = createAsyncThunk('todos/fetch', async (userId) => {
  const res = await fetch(`/api/todos?userId=${userId}`);
  return res.json();
});

const todosSlice = createSlice({
  name: 'todos',
  initialState: { list: [], status: 'idle', error: null },
  reducers: {
    // 得益于 Immer，可以"看似直接修改"，底层仍是不可变更新
    addTodo: (state, action) => {
      state.list.push({ id: Date.now(), text: action.payload, done: false });
    },
    toggleTodo: (state, action) => {
      const todo = state.list.find(t => t.id === action.payload);
      if (todo) todo.done = !todo.done;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchTodos.pending, (state) => { state.status = 'loading'; })
      .addCase(fetchTodos.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.list = action.payload;
      })
      .addCase(fetchTodos.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export const { addTodo, toggleTodo } = todosSlice.actions;

const store = configureStore({
  reducer: { todos: todosSlice.reducer },
});

// React 组件中使用 Redux
import { useSelector, useDispatch } from 'react-redux';

function TodoApp() {
  const { list, status } = useSelector((state) => state.todos);
  const dispatch = useDispatch();

  useEffect(() => { dispatch(fetchTodos(1)); }, [dispatch]);

  if (status === 'loading') return <div>Loading...</div>;

  return (
    <ul>
      {list.map((todo) => (
        <li key={todo.id} onClick={() => dispatch(toggleTodo(todo.id))}>
          {todo.done ? '✓ ' : ''}{todo.text}
        </li>
      ))}
    </ul>
  );
}

// Zustand 基础 store
import { create } from 'zustand';
import { persist, devtools } from 'zustand/middleware';

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

function CounterWithZustand() {
  const { count, increment, decrement, reset } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

// Zustand 选择器优化：只订阅需要的字段
function OptimizedCounter() {
  // 组件只在 count 变化时重渲染，其他字段变化不影响
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  );
}

// Zustand 中间件组合：持久化 + devtools
const useCartStore = create(
  devtools(
    persist(
      (set, get) => ({
        items: [],
        addItem: (product) =>
          set((state) => ({ items: [...state.items, product] })),
        removeItem: (id) =>
          set((state) => ({ items: state.items.filter((i) => i.id !== id) })),
        total: () => get().items.reduce((sum, i) => sum + i.price, 0),
      }),
      { name: 'cart-storage' } // localStorage key
    )
  )
);

import { atom, useAtom } from 'jotai';

// 基础 atom
const countAtom = atom(0);

// 派生 atom：自动依赖 countAtom
const doubleCountAtom = atom((get) => get(countAtom) * 2);

// 可写派生 atom
const decrementAtom = atom(
  (get) => get(countAtom),
  (get, set) => set(countAtom, get(countAtom) - 1)
);

// 异步 atom：直接在 atom 里发请求
const userAtom = atom(async (get) => {
  const id = get(countAtom);
  const res = await fetch(`/api/users/${id}`);
  return res.json();
});

function CounterWithJotai() {
  const [count, setCount] = useAtom(countAtom);
  const [doubleCount] = useAtom(doubleCountAtom);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Double: {doubleCount}</p>
      <button onClick={() => setCount((c) => c + 1)}>+</button>
    </div>
  );
}

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

function UserList() {
  const queryClient = useQueryClient();

  const { data: users, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then((res) => res.json()),
    staleTime: 5 * 60 * 1000, // 5 分钟内数据视为新鲜，不重新请求
  });

  // 乐观更新：先更新 UI，再请求，失败则回滚
  const mutation = useMutation({
    mutationFn: (newUser) =>
      fetch('/api/users', {
        method: 'POST',
        body: JSON.stringify(newUser),
      }).then((r) => r.json()),
    onMutate: async (newUser) => {
      await queryClient.cancelQueries({ queryKey: ['users'] });
      const previous = queryClient.getQueryData(['users']);
      queryClient.setQueryData(['users'], (old) => [...old, newUser]);
      return { previous };
    },
    onError: (err, newUser, context) => {
      queryClient.setQueryData(['users'], context.previous); // 回滚
    },
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['users'] });
    },
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
      <button onClick={() => mutation.mutate({ id: Date.now(), name: 'New User' })}>
        Add User
      </button>
    </div>
  );
}

function StateManagementExample() {
  // 第一层：组件内部 UI 状态
  const [isModalOpen, setIsModalOpen] = useState(false);

  // 第二层：全局客户端状态（登录用户）
  const user = useUserStore((state) => state.user);

  // 第三层：服务器状态（根据用户拉取数据）
  const { data: posts } = useQuery({
    queryKey: ['posts', user.id],
    queryFn: () => fetchPosts(user.id),
  });

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      {isModalOpen && <Modal onClose={() => setIsModalOpen(false)} />}
      <PostList posts={posts} />
    </div>
  );
}

// 温度换算：摄氏和华氏输入框共享同一个温度状态
function Calculator() {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('c');

  const celsius = scale === 'f' ? toCelsius(temperature) : temperature;
  const fahrenheit = scale === 'c' ? toFahrenheit(temperature) : temperature;

  return (
    <>
      <TemperatureInput
        scale="c"
        value={celsius}
        onChange={(v) => { setScale('c'); setTemperature(v); }}
      />
      <TemperatureInput
        scale="f"
        value={fahrenheit}
        onChange={(v) => { setScale('f'); setTemperature(v); }}
      />
    </>
  );
}

// 受控组件：每次输入都触发 setState，React 是唯一数据源
function ControlledInput() {
  const [value, setValue] = useState('');
  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}

// 非受控组件：DOM 自己存值，提交时才用 ref 读一次
function UncontrolledInput() {
  const inputRef = useRef(null);
  const handleSubmit = () => console.log(inputRef.current.value);
  return (
    <>
      <input ref={inputRef} defaultValue="" />
      <button onClick={handleSubmit}>提交</button>
    </>
  );
}

import { useForm } from 'react-hook-form';

function SignupForm() {
  const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm();

  const onSubmit = async (data) => {
    await api.signup(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', { required: '邮箱必填', pattern: /^\S+@\S+$/ })} />
      {errors.email && <span>{errors.email.message}</span>}

      <input type="password" {...register('password', { minLength: { value: 8, message: '至少 8 位' } })} />
      {errors.password && <span>{errors.password.message}</span>}

      <button disabled={isSubmitting}>注册</button>
    </form>
  );
}

// Next.js App Router 中读写 URL 查询参数
'use client';
import { useRouter, useSearchParams, usePathname } from 'next/navigation';

function SearchBox() {
  const router = useRouter();
  const pathname = usePathname();
  const params = useSearchParams();
  const q = params.get('q') ?? '';

  const onSearch = (value) => {
    const next = new URLSearchParams(params);
    next.set('q', value);
    router.push(`${pathname}?${next.toString()}`); // 状态存进 URL
  };

  return <input value={q} onChange={(e) => onSearch(e.target.value)} />;
}

import { createMachine } from 'xstate';

const orderMachine = createMachine({
  id: 'order',
  initial: 'pending',
  states: {
    pending: { on: { PAY: 'paid' } },          // 待支付只能去已支付
    paid: { on: { SHIP: 'shipped', REFUND: 'refunded' } },
    shipped: { on: { CONFIRM: 'done' } },
    refunded: { type: 'final' },
    done: { type: 'final' },
  },
});
// 非法转换（如 pending 直接 SHIP）会被状态机自动忽略，杜绝了无效状态

import { createContext, useContext, useReducer } from 'react';

const StateContext = createContext(null);
const DispatchContext = createContext(null);

const initialState = { user: null, cart: [], theme: 'light' };

function rootReducer(state, action) {
  switch (action.type) {
    case 'LOGIN':
      return { ...state, user: action.payload };
    case 'ADD_TO_CART':
      return { ...state, cart: [...state.cart, action.payload] };
    case 'TOGGLE_THEME':
      return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
    default:
      return state;
  }
}

export function StoreProvider({ children }) {
  const [state, dispatch] = useReducer(rootReducer, initialState);
  return (
    <StateContext.Provider value={state}>
      <DispatchContext.Provider value={dispatch}>
        {children}
      </DispatchContext.Provider>
    </StateContext.Provider>
  );
}

// dispatch 引用稳定，只 dispatch 的组件永远不会因 state 变化而重渲染
export const useAppState = () => useContext(StateContext);
export const useDispatch = () => useContext(DispatchContext);

function CartButton() {
  const dispatch = useDispatch(); // 不订阅 state
  return (
    <button onClick={() => dispatch({ type: 'ADD_TO_CART', payload: { id: 1 } })}>
      加入购物车
    </button>
  );
}

// ❌ 深层嵌套的手动不可变更新，又长又易错
function reducer(state, action) {
  return {
    ...state,
    user: {
      ...state.user,
      address: {
        ...state.user.address,
        city: action.payload,
      },
    },
  };
}

// ✅ 用 Immer：写"可变"代码，产出不可变结果
import { produce } from 'immer';

function reducerWithImmer(state, action) {
  return produce(state, (draft) => {
    draft.user.address.city = action.payload;
  });
}

// ❌ 嵌套结构：同一个 user 在多条 post 里重复，改名要遍历所有 post
const bad = {
  posts: [
    { id: 1, title: 'A', author: { id: 10, name: 'Tom' } },
    { id: 2, title: 'B', author: { id: 10, name: 'Tom' } },
  ],
};

// ✅ 规范化结构：user 只存一份，post 只存引用 id
const good = {
  posts: {
    byId: {
      1: { id: 1, title: 'A', authorId: 10 },
      2: { id: 2, title: 'B', authorId: 10 },
    },
    allIds: [1, 2],
  },
  users: {
    byId: { 10: { id: 10, name: 'Tom' } },
  },
};

// 改名只需一处
function renameUser(state, id, name) {
  return produce(state, (draft) => {
    draft.users.byId[id].name = name;
  });
}

// ❌ 冗余：把 fullName 也存进状态，firstName 改了忘了同步就出 bug
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [fullName, setFullName] = useState(''); // 多余！

// ✅ 派生：渲染时直接算
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const fullName = `${firstName} ${lastName}`; // 永远同步

// 如果计算昂贵，用 useMemo 缓存
const expensiveDerived = useMemo(
  () => heavyCompute(list),
  [list]
);

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((r) => r.json());

function Profile({ id }) {
  const { data, error, isLoading, mutate } = useSWR(
    `/api/user/${id}`,
    fetcher,
    { revalidateOnFocus: true, dedupingInterval: 2000 }
  );

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>加载失败</div>;

  return (
    <div>
      <h1>{data.name}</h1>
      <button onClick={() => mutate()}>刷新</button>
    </div>
  );
}

// Zustand persist 在 SSR 下的安全写法
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(
  persist(
    (set) => ({ count: 0, inc: () => set((s) => ({ count: s.count + 1 })) }),
    {
      name: 'app-store',
      skipHydration: true, // 手动控制 hydration 时机
    }
  )
);

// 组件里在客户端挂载后再读取，避免首帧不匹配
function Counter() {
  const [mounted, setMounted] = useState(false);
  const count = useStore((s) => s.count);
  useEffect(() => setMounted(true), []);
  if (!mounted) return null; // 首帧返回占位，避免 hydration mismatch
  return <div>{count}</div>;
}

// 用 Profiler API 在代码里量化渲染耗时
import { Profiler } from 'react';

function onRender(id, phase, actualDuration) {
  console.log(`${id} [${phase}] 耗时 ${actualDuration.toFixed(2)}ms`);
}

function App() {
  return (
    <Profiler id="ProductList" onRender={onRender}>
      <ProductList />
    </Profiler>
  );
}

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

interface BearState {
  bears: number;
  fish: number;
  addBear: () => void;
  eatFish: () => void;
}

// 中间件从内到外：immer -> persist -> subscribeWithSelector -> devtools
export const useBearStore = create<BearState>()(
  devtools(
    subscribeWithSelector(
      persist(
        immer((set) => ({
          bears: 0,
          fish: 10,
          // immer 中间件让你能直接"修改"草稿，底层仍是不可变更新
          addBear: () => set((s) => { s.bears += 1; }, false, 'addBear'),
          eatFish: () => set((s) => { s.fish -= 1; }, false, 'eatFish'),
        })),
        {
          name: 'bear-storage',
          partialize: (s) => ({ bears: s.bears }), // 只持久化 bears，不存 fish
          version: 2,
          migrate: (persisted, from) => {
            // 从旧版本迁移，避免用户 localStorage 里的老结构报错
            if (from < 2) return { bears: (persisted as any).bears ?? 0 };
            return persisted as any;
          },
        }
      )
    ),
    { name: 'BearStore' } // devtools 里显示的实例名
  )
);

import { create, StateCreator } from 'zustand';

interface CartSlice {
  items: string[];
  addItem: (id: string) => void;
}
interface UserSlice {
  userId: string | null;
  login: (id: string) => void;
}
type Store = CartSlice & UserSlice;

const createCartSlice: StateCreator<Store, [], [], CartSlice> = (set) => ({
  items: [],
  addItem: (id) => set((s) => ({ items: [...s.items, id] })),
});

const createUserSlice: StateCreator<Store, [], [], UserSlice> = (set) => ({
  userId: null,
  login: (id) => set({ userId: id }),
});

export const useStore = create<Store>()((...a) => ({
  ...createCartSlice(...a),
  ...createUserSlice(...a),
}));

import { useShallow } from 'zustand/react/shallow';

// 错误：每次 render 都返回新对象，永远不相等 -> 每次都重渲染
const { bears, fish } = useBearStore((s) => ({ bears: s.bears, fish: s.fish }));

// 正确：useShallow 逐字段浅比较，只有 bears/fish 真正变化才重渲染
const { bears, fish } = useBearStore(
  useShallow((s) => ({ bears: s.bears, fish: s.fish }))
);

function Cursor() {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    // subscribeWithSelector 中间件让 subscribe 支持选择器
    return useCursorStore.subscribe(
      (s) => s.position,
      (pos) => { if (ref.current) ref.current.style.transform = `translate(${pos.x}px,${pos.y}px)`; }
    );
  }, []);
  return <div ref={ref} className="cursor" />;
}

import { atom } from 'jotai';

const priceAtom = atom(100);
const countAtom = atom(2);

// 只读派生 atom：依赖变化时自动重算，带缓存
const totalAtom = atom((get) => get(priceAtom) * get(countAtom));

// 读写派生 atom：get 读，set 写回多个源 atom
const discountedAtom = atom(
  (get) => get(totalAtom) * 0.8,
  (get, set, newTotal: number) => {
    set(priceAtom, newTotal / get(countAtom) / 0.8);
  }
);

import { atomFamily, atomWithStorage } from 'jotai/utils';
import { atom } from 'jotai';

// 每个 todoId 对应一个独立 atom，互不影响重渲染
const todoAtomFamily = atomFamily((id: string) =>
  atom({ id, done: false })
);

// 异步 atom：组件用 useAtom 读取时自动触发 Suspense
const userAtom = atom(async (get) => {
  const res = await fetch(`/api/user/${get(userIdAtom)}`);
  return res.json();
});

// 持久化 atom：值自动同步到 localStorage
const themeAtom = atomWithStorage('theme', 'light');

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

interface Todo { id: string; title: string; done: boolean; }

// entityAdapter 提供规范化的 { ids: [], entities: {} } 结构 + CRUD reducers
const todosAdapter = createEntityAdapter<Todo>({
  sortComparer: (a, b) => a.title.localeCompare(b.title),
});

export const fetchTodos = createAsyncThunk('todos/fetch', async () => {
  const res = await fetch('/api/todos');
  return (await res.json()) as Todo[];
});

const todosSlice = createSlice({
  name: 'todos',
  initialState: todosAdapter.getInitialState({ loading: false }),
  reducers: {
    // 直接"改" state，Immer 生成不可变更新
    toggle: (state, action) => {
      const t = state.entities[action.payload];
      if (t) t.done = !t.done;
    },
    addOne: todosAdapter.addOne, // 直接复用 adapter 的 reducer
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchTodos.pending, (s) => { s.loading = true; })
      .addCase(fetchTodos.fulfilled, (s, a) => {
        s.loading = false;
        todosAdapter.setAll(s, a.payload);
      });
  },
});

// adapter 自动生成记忆化的 selectors
export const { selectAll, selectById } = todosAdapter.getSelectors();
export const { toggle, addOne } = todosSlice.actions;
export default todosSlice.reducer;

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['Todo'],
  endpoints: (build) => ({
    getTodos: build.query<Todo[], void>({
      query: () => 'todos',
      providesTags: ['Todo'],
    }),
    addTodo: build.mutation<Todo, Partial<Todo>>({
      query: (body) => ({ url: 'todos', method: 'POST', body }),
      invalidatesTags: ['Todo'], // 新增后自动让 getTodos 缓存失效并重取
    }),
  }),
});

export const { useGetTodosQuery, useAddTodoMutation } = api;

import { createListenerMiddleware } from '@reduxjs/toolkit';

export const listenerMiddleware = createListenerMiddleware();

// 监听 login 成功，自动去拉取用户配置
listenerMiddleware.startListening({
  actionCreator: loginSuccess,
  effect: async (action, api) => {
    api.cancelActiveListeners(); // 防抖：取消上一次未完成的
    await api.delay(300);
    api.dispatch(fetchUserSettings(action.payload.userId));
  },
});

const mutation = useMutation({
  mutationFn: (id: string) => api.like(id),
  onMutate: async (id) => {
    await queryClient.cancelQueries({ queryKey: ['post', id] }); // 取消在途请求
    const prev = queryClient.getQueryData(['post', id]);
    queryClient.setQueryData(['post', id], (old: any) => ({ ...old, liked: true }));
    return { prev }; // 返回快照，供出错回滚
  },
  onError: (_e, id, ctx) => {
    queryClient.setQueryData(['post', id], ctx?.prev); // 回滚
  },
  onSettled: (_d, _e, id) => {
    queryClient.invalidateQueries({ queryKey: ['post', id] }); // 最终以服务器为准
  },
});

const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
  queryKey: ['feed'],
  queryFn: ({ pageParam }) => api.getFeed({ cursor: pageParam }),
  initialPageParam: 0,
  getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
});

// data.pages 是二维结构，展平后渲染
const items = data?.pages.flatMap((p) => p.items) ?? [];

// hover 时预取详情，进入详情页直接命中缓存
function Row({ id }: { id: string }) {
  const qc = useQueryClient();
  const prefetch = () =>
    qc.prefetchQuery({ queryKey: ['detail', id], queryFn: () => api.getDetail(id) });
  return <li onMouseEnter={prefetch}>...</li>;
}

// 依赖查询：user 加载完才查 projects（enabled 控制）
const { data: user } = useQuery({ queryKey: ['user'], queryFn: api.getUser });
const { data: projects } = useQuery({
  queryKey: ['projects', user?.id],
  queryFn: () => api.getProjects(user!.id),
  enabled: !!user?.id, // user 就绪前不发请求
});

import { createContext, useContextSelector } from 'use-context-selector';

const StoreContext = createContext<{ count: number; name: string }>(null!);

function Count() {
  // 只订阅 count，name 变化时本组件不重渲染
  const count = useContextSelector(StoreContext, (v) => v.count);
  return <span>{count}</span>;
}

是服务器数据（需缓存/失效/重取）吗？
├── 是 → React Query / SWR / RTK Query
└── 否 → 需要跨组件共享吗？
        ├── 否 → useState / useReducer（就近原则）
        └── 是 → 更新频率高吗 / 需要精确重渲染吗？
                ├── 低频且简单 → Context + useReducer
                ├── 中等，想要轻量无 Provider → Zustand
                ├── 组件级细粒度、大量派生 → Jotai
                └── 大型团队、需时间旅行/中间件生态 → Redux Toolkit