Context 与跨层级传递

// 1. 创建 —— 参数是「没有 Provider 时的默认值」
const ThemeContext = createContext<Theme>("light");
 
// 2. 提供
function App() {
  const [theme, setTheme] = useState<Theme>("light");
  return (
    <ThemeContext.Provider value={theme}>
      <Layout />
    </ThemeContext.Provider>
  );
}
 
// 3. 消费 —— 任意深度的后代都能读到
function DeepButton() {
  const theme = useContext(ThemeContext);
  return <button className={"btn-" + theme}>点击</button>;
}

<ThemeContext.Provider value="dark">
  <Sidebar />                      {/* 读到 dark */}
  <ThemeContext.Provider value="light">
    <Modal />                      {/* 读到 light */}
  </ThemeContext.Provider>
</ThemeContext.Provider>

type AuthValue = {
  user: User | null;
  login: (c: Credentials) => Promise<void>;
  logout: () => void;
};
 
// 默认值为 null，配合下面的自定义 Hook 强制报错
const AuthContext = createContext<AuthValue | null>(null);
 
export function useAuth(): AuthValue {
  const ctx = useContext(AuthContext);
  if (ctx === null) {
    throw new Error("useAuth 必须在 AuthProvider 内部使用");
  }
  return ctx;
}

// theme-context.tsx
type ThemeValue = {
  theme: Theme;
  toggle: () => void;
};
 
const ThemeContext = createContext<ThemeValue | null>(null);
 
export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>(() => readStoredTheme());
 
  const toggle = useCallback(() => {
    setTheme((t) => (t === "light" ? "dark" : "light"));
  }, []);
 
  useEffect(() => {
    document.documentElement.dataset.theme = theme;
    localStorage.setItem("theme", theme);
  }, [theme]);
 
  const value = useMemo(() => ({ theme, toggle }), [theme, toggle]);
 
  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}
 
export function useTheme() {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error("useTheme 必须在 ThemeProvider 内");
  return ctx;
}

<ThemeProvider>
  <AuthProvider>
    <RouterProvider router={router} />
  </AuthProvider>
</ThemeProvider>

function compose(providers: React.ComponentType<{ children: React.ReactNode }>[]) {
  return function Composed({ children }: { children: React.ReactNode }) {
    return providers.reduceRight(
      (acc, Provider) => <Provider>{acc}</Provider>,
      children as React.ReactElement
    );
  };
}
 
const AppProviders = compose([ThemeProvider, AuthProvider, I18nProvider, ToastProvider]);

// 有问题的写法
function AuthProvider({ children }: Props) {
  const [user, setUser] = useState<User | null>(null);
 
  // 每次 AuthProvider 渲染，这个对象都是新的
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

const login = useCallback(async (c: Credentials) => { /* ... */ }, []);
const logout = useCallback(() => setUser(null), []);
const value = useMemo(() => ({ user, login, logout }), [user, login, logout]);

const value = useMemo(() => ({ user, theme, locale }), [user, theme, locale]);
// theme 一变，只用 user 的组件也会重渲染

// 拆成两个：状态（会变）和操作（永远不变）
const TodoStateContext = createContext<Todo[] | null>(null);
const TodoActionsContext = createContext<Actions | null>(null);
 
function TodoProvider({ children }: Props) {
  const [todos, setTodos] = useState<Todo[]>([]);
 
  // actions 用 useMemo + 函数式更新，依赖为空 —— 引用永远不变
  const actions = useMemo(
    () => ({
      add: (title: string) =>
        setTodos((prev) => [...prev, { id: uid(), title, done: false }]),
      toggle: (id: string) =>
        setTodos((prev) =>
          prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t))
        ),
    }),
    []
  );
 
  return (
    <TodoActionsContext.Provider value={actions}>
      <TodoStateContext.Provider value={todos}>
        {children}
      </TodoStateContext.Provider>
    </TodoActionsContext.Provider>
  );
}

// 不好：在顶层读，导致整棵树重渲染
function Page() {
  const { theme } = useTheme();
  return (
    <div className={theme}>
      <HugeTree />
    </div>
  );
}
 
// 好：只让真正用到的叶子组件读
function Page() {
  return (
    <ThemedWrapper>
      <HugeTree />
    </ThemedWrapper>
  );
}
 
function ThemedWrapper({ children }: { children: React.ReactNode }) {
  const { theme } = useTheme();
  return <div className={theme}>{children}</div>;
}

const TabsContext = createContext<TabsValue | null>(null);
 
function Tabs({ defaultValue, children }: TabsProps) {
  const [active, setActive] = useState(defaultValue);
  const value = useMemo(() => ({ active, setActive }), [active]);
  return <TabsContext.Provider value={value}>{children}</TabsContext.Provider>;
}
 
function Tab({ value, children }: TabProps) {
  const ctx = useContext(TabsContext)!;
  return (
    <button
      className={ctx.active === value ? "active" : ""}
      onClick={() => ctx.setActive(value)}
    >
      {children}
    </button>
  );
}
 
function TabPanel({ value, children }: TabProps) {
  const ctx = useContext(TabsContext)!;
  return ctx.active === value ? <div>{children}</div> : null;
}
 
// 使用方完全不需要管状态
<Tabs defaultValue="a">
  <Tab value="a">概览</Tab>
  <Tab value="b">明细</Tab>
  <TabPanel value="a">…</TabPanel>
  <TabPanel value="b">…</TabPanel>
</Tabs>

type AuthState =
  | { status: "loading" }
  | { status: "anonymous" }
  | { status: "authed"; user: User };
 
type AuthValue = AuthState & {
  login: (c: Credentials) => Promise<void>;
  logout: () => void;
};
 
const AuthContext = createContext<AuthValue | null>(null);
 
export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [state, setState] = useState<AuthState>({ status: "loading" });
 
  // 启动时用本地 token 恢复会话
  useEffect(() => {
    let ignore = false;
    const token = localStorage.getItem("token");
 
    if (!token) {
      setState({ status: "anonymous" });
      return;
    }
 
    api
      .me(token)
      .then((user) => {
        if (!ignore) setState({ status: "authed", user });
      })
      .catch(() => {
        if (!ignore) setState({ status: "anonymous" });
      });
 
    return () => {
      ignore = true;
    };
  }, []);
 
  const login = useCallback(async (c: Credentials) => {
    const { token, user } = await api.login(c);
    localStorage.setItem("token", token);
    setState({ status: "authed", user });
  }, []);
 
  const logout = useCallback(() => {
    localStorage.removeItem("token");
    setState({ status: "anonymous" });
  }, []);
 
  const value = useMemo(
    () => ({ ...state, login, logout }),
    [state, login, logout]
  );
 
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}
 
export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error("useAuth 必须在 AuthProvider 内");
  return ctx;
}

function Header() {
  const auth = useAuth();
 
  if (auth.status === "loading") return <Skeleton />;
  if (auth.status === "anonymous") return <LoginButton onClick={...} />;
 
  // 这里 TS 知道 auth.user 一定存在
  return <Avatar user={auth.user} onLogout={auth.logout} />;
}