useContext：跨层传递的广播机制

import { useState } from "react";

type ThemeProps = {
  theme: "light" | "dark";
  onToggleTheme: () => void;
};

function App() {
  const [theme, setTheme] = useState<"light" | "dark">("light");
  return (
    <Page theme={theme}
      onToggleTheme={() => setTheme(t => (t === "light" ? "dark" : "light"))} />
  );
}

// Page、Section 自己不用，却必须「接过再传下」
function Page({ theme, onToggleTheme }: ThemeProps) {
  return <Section theme={theme} onToggleTheme={onToggleTheme} />;
}
function Section({ theme, onToggleTheme }: ThemeProps) {
  return <ThemedButton theme={theme} onToggleTheme={onToggleTheme} />;
}

// 真正的消费者，在最底层
function ThemedButton({ theme, onToggleTheme }: ThemeProps) {
  return <button className={theme} onClick={onToggleTheme}>切换主题</button>;
}

import { createContext, useContext, useState } from "react";

type Theme = "light" | "dark";

// 1. 创建频道：参数是「默认值」，上层没 Provider 时兜底用
const ThemeContext = createContext<Theme>("light");

function App() {
  const [theme, setTheme] = useState<Theme>("light");
  // 2. Provider 开播：value 一变，广播给整棵子树
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

// 中间层干干净净，不再沾任何主题 props
function Page() { return <Section />; }
function Section() { return <ThemedButton />; }

function ThemedButton() {
  // 3. 收听：不管隔着多少层，直接拿到当前值
  const theme = useContext(ThemeContext);
  return <button className={theme}>切换主题</button>;
}

type User = { id: number; name: string; role: "ADMIN" | "USER" };

// 默认值 null：没包 Provider 就等于「未登录」
const UserContext = createContext<User | null>(null);

function UserCard() {
  const user = useContext(UserContext);
  if (!user) return <p>未登录</p>;
  return <p>{user.name}（{user.role}）</p>;
}

<ThemeContext.Provider value="light">
  <Header />          // useContext 读到 "light"

  <ThemeContext.Provider value="dark">
    <SettingsPanel /> // 读到 "dark"——离它最近的 Provider 说了算
  </ThemeContext.Provider>

  <Footer />          // 仍是 "light"，不受里面那段覆盖影响
</ThemeContext.Provider>

import { createContext, useContext, useMemo, useState } from "react";
import type { ReactNode } from "react";

type Theme = "light" | "dark";
type ThemeContextValue = { theme: Theme; toggleTheme: () => void };

// 故意不给默认值：用 null 明确表达「必须在 Provider 内使用」
const ThemeContext = createContext<ThemeContextValue | null>(null);

export function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<Theme>("light");
  // useMemo 稳定 value 引用——为什么必须，下一站细讲
  const value = useMemo(
    () => ({
      theme,
      toggleTheme: () => setTheme(t => (t === "light" ? "dark" : "light")),
    }),
    [theme]
  );
  return (
    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
  );
}

// 对外唯一的「读接口」：忘了包 Provider，第一时间炸出来
export function useTheme() {
  const ctx = useContext(ThemeContext);
  if (ctx === null) {
    throw new Error("useTheme 必须在 <ThemeProvider> 内部使用");
  }
  return ctx;
}

import { useTheme } from "./theme-context";

function ThemedButton() {
  const { theme, toggleTheme } = useTheme();
  return <button className={theme} onClick={toggleTheme}>切换主题</button>;
}

function App() {
  const [theme, setTheme] = useState<Theme>("light");
  const [keyword, setKeyword] = useState("");  // 毫不相干的搜索词

  // ❌ value 是内联对象：App 每次渲染都产生新引用
  return (
    <ThemeContext.Provider
      value={{ theme, toggleTheme: () => setTheme(t => (t === "light" ? "dark" : "light")) }}
    >
      <input value={keyword} onChange={e => setKeyword(e.target.value)} />
      <Page />
    </ThemeContext.Provider>
  );
}

const value = useMemo(
  () => ({
    theme,
    toggleTheme: () => setTheme(t => (t === "light" ? "dark" : "light")),
  }),
  [theme]   // theme 不变 → value 引用不变 → 广播静默
);

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