前端状态管理选型：本地、全局与服务器状态的边界

function App() {
  const [theme, setTheme] = useState<"dark" | "light">("dark");
  return (
    <Layout theme={theme}>
      {/* Layout 不用 theme，只负责转发 */}
      <Sidebar theme={theme}>
        <UserMenu theme={theme} />   {/* 只有这里真正要用 */}
      </Sidebar>
    </Layout>
  );
}

const ThemeContext = createContext<{ theme: Theme; setTheme: (t: Theme) => void }>(
  null as never
);

function App() {
  const [theme, setTheme] = useState<Theme>("dark");
  // 反模式：value 内联对象，每次渲染都是新引用，所有消费者全部重渲染
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Page />
    </ThemeContext.Provider>
  );
}

const ThemeContext = createContext<Theme>("dark");
const ThemeUpdateContext = createContext<(t: Theme) => void>(() => {});

function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>("dark");
  return (
    // 稳定的 setter 单独一个 Context，theme 变化不影响它的消费者
    <ThemeUpdateContext.Provider value={setTheme}>
      <ThemeContext.Provider value={theme}>
        {children}
      </ThemeContext.Provider>
    </ThemeUpdateContext.Provider>
  );
}

// Zustand：一个 hook 搞定，set 合并语义
import { create } from "zustand";

const useCart = create<{
  items: string[];
  add: (id: string) => void;
}>((set) => ({
  items: [],
  add: (id) => set((s) => ({ items: [...s.items, id] })),
}));

function CartBadge() {
  const items = useCart((s) => s.items);   // 选择器订阅，精确重渲染
  return <span>{items.length}</span>;
}

// Pinia：defineStore 按领域划分，Vue 响应式原生
import { defineStore } from "pinia";

export const useCartStore = defineStore("cart", {
  state: () => ({ items: [] as string[] }),
  actions: {
    add(id: string) {
      this.items.push(id);
    },
  },
  getters: {
    count: (state) => state.items.length,
  },
});

// Redux Toolkit：createSlice 收敛 action/type 样板
import { createSlice, configureStore } from "@reduxjs/toolkit";

const cartSlice = createSlice({
  name: "cart",
  initialState: { items: [] as string[] },
  reducers: {
    itemAdded(state, action: PayloadAction<string>) {
      state.items.push(action.payload);   // Immer 提供可写语法
    },
  },
});

export const store = configureStore({ reducer: { cart: cartSlice.reducer } });

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

function ProductList({ categoryId }: { categoryId: string }) {
  const { data, status, error } = useQuery({
    queryKey: ["products", categoryId],   // key 决定缓存粒度与共享
    queryFn: () => fetchProducts(categoryId),
    staleTime: 60_000,                     // 1 分钟内直接用缓存
  });

  if (status === "pending") return <Skeleton />;
  if (status === "error") return <ErrorView message={error.message} />;
  return <List items={data} />;
}