import { useState } from "react";

// React 的心智模型：状态一变，整个函数重新执行
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      点击 {count} 次
    </button>
  );
}

import { useState } from "react";

function Cart() {
  // state 是唯一的输入，其余全是从它现算出来的
  const [items, setItems] = useState([
    { name: "键盘", price: 399, qty: 1 }
  ]);

  // 派生数据：不要用 useState 再存一份，每次渲染现算
  const total = items.reduce((s, i) => s + i.price * i.qty, 0);
  const empty = items.length === 0;

  console.log("组件函数跑了一次，total =", total);

  return (
    <div>
      <p>{empty ? "购物车是空的" : `合计 ${total} 元`}</p>
      <button onClick={() => setItems(list => [
        ...list, { name: "鼠标", price: 99, qty: 1 }
      ])}>加购</button>
    </div>
  );
}
// 点一下按钮，日志 total 从 399 变 498，DOM 上的文字自己跟着变了。
// 你没写过一行「找到 p 标签再改 textContent」的代码 —— 这就是 f(state)。

# ① 纯前端应用 —— Vite（create-vite 9.1.1 → vite 8 + react 19.2）
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev                # 默认 http://localhost:5173

# 产出里你真正要动的就这几个：
#   index.html  vite.config.js  .oxlintrc.json
#   src/main.jsx  src/App.jsx  src/index.css
# 其余是可删的样例：src/App.css、src/assets/、public/、README.md

# ② 需要 SEO / 服务端渲染 / 同仓库写接口 —— Next.js（16.2.11）
npx create-next-app@latest my-app
cd my-app
npm run dev                # 默认 http://localhost:3000

# ③ 下面这条今天还能跑完，但请不要用：
# npx create-react-app my-app   最后一版停在 5.1.0，官方已宣布退役

// index.html —— 整个应用唯一的 HTML，只留一个空壳
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>

// src/main.jsx —— 把 React 接到那个空 div 上，全应用只做这一次
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
  <StrictMode><App /></StrictMode>   // 只包最外一层，且只在开发环境生效
);

// src/App.jsx —— 组件 = 返回 JSX 的函数。名字必须大写开头
export default function App() {
  const user = { name: "张三", unread: 3 };

  return (                          // 漏掉 return 不报错，只是一片空白
    <main>
      <h1>你好，{user.name}</h1>   // {} 里放 JS 表达式
      <p>你有 {user.unread} 条未读</p>
    </main>
  );
}

// .oxlintrc.json —— Vite 8 的 React 模板只开了第一条
{
  "plugins": ["react"],
  "rules": {
    "react/rules-of-hooks": "error",
    "react/exhaustive-deps": "error"     // ← 这行要自己加
  }
}

// 下面这个组件，两条规则各抓到一处（oxlint 1.74）
function Room({ roomId }) {
  const [msg, setMsg] = useState("");

  useEffect(() => {
    console.log("连上", roomId);      // 用了 roomId
  }, []);          // exhaustive-deps: missing dependency: 'roomId'
                   // 后果：换房间后这里永远还在连第一个房间

  if (msg) { useState(1); }         // rules-of-hooks: called conditionally

  return <p>{msg}</p>;
}

// ── 你写的 ──────────────────────────────
function Card({ title, active }) {
  return <h1 className="t" data-on={active}>{title}</h1>;
}
const frag = <><a /><b /></>;

// ── esbuild --jsx=automatic 的产物 ──
import { Fragment, jsx, jsxs } from "react/jsx-runtime";

function Card({ title, active }) {
  return jsx("h1", { className: "t", "data-on": active, children: title });
}
const frag = jsxs(Fragment, {
  children: [jsx("a", {}), jsx("b", {})]
});

// 单个子节点用 jsx，多个用 jsxs。children 只是普通的一个 key。

// ── 首字母决定第一个参数是变量还是字符串──
<Btn />   // → jsx(Btn, {})      变量，React 会调用你的函数
<btn />   // → jsx("btn", {})    字符串，当成 HTML 标签处理

function Inbox({ items, unread }) {
  return (
    <>                                {/* Fragment：并列而不产生 DOM 节点 */}
      <label htmlFor="q" className="lbl">搜索</label>
      <input id="q" disabled maxLength={20} />   {/* 数字要用 {} */}

      {/* ✗ 错：unread 为 0 时，页面上会冒出一个 0 */}
      {unread && <b>{unread} 条未读</b>}

      {/* ✓ 对：左边先变成布尔值 */}
      {unread > 0 && <b>{unread} 条未读</b>}

      {/* ✗ 错：编译期就挂，esbuild 报 Unexpected "if" */}
      {/* {if (items.length) <List />} */}

      {/* ✓ 对：三元是表达式，有值 */}
      {items.length ? <List items={items} /> : <p>暂无邮件</p>}
    </>
  );
}

// 参数上解构，一眼看清这个组件吃哪些 prop
function Button({ label, onClick, variant = "primary", disabled = false }) {
  return (
    <button className={`btn btn-${variant}`} onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
}

// children：标签之间的内容自动成为一个 prop，不用在调用处写出来
function Panel({ title, children }) {
  return (
    <section className="panel">
      <h3>{title}</h3>
      {children}
    </section>
  );
}

// 数据下行、事件上行：子组件不改 props，只通知父组件
function Page() {
  const [n, setN] = useState(0);
  return (
    <Panel title="计数">
      <p>当前 {n}</p>
      <Button label="加一" onClick={() => setN(n + 1)} />
    </Panel>
  );
}

// 一个洞：children。Panel 不关心里面装什么
function Panel({ children }) {
  return <section className="panel">{children}</section>;
}

// 多个洞：slot 模式 —— prop 的值直接就是 JSX
function Layout({ header, children, footer }) {
  return (
    <div>
      <h1>{header}</h1>
      <main>{children}</main>   {/* children 就是没写名字的那个洞 */}
      <footer>{footer}</footer>
    </div>
  );
}

function App() {
  return (
    <Layout header={<b>标题</b>} footer={<small>版权</small>}>
      <p>正文</p>
    </Layout>
  );
}
// 产出：<div><h1><b>标题</b></h1><main><p>正文</p></main>…
// 不需要继承，也不需要插槽语法 —— 元素本来就是值

function UserList({ users, loading, error }) {
  // Hook 必须全部先调完，才能开始提前 return
  const [q, setQ] = useState("");

  // 提前 return：把异常态挑出去，主干只管正常情况
  if (loading) return <Spinner />;
  if (error)   return <p className="err">{error.message}</p>;

  const shown = users.filter(u => u.name.includes(q));

  // 空态用三元，别用 && —— shown.length 为 0 时会渲染出个 0
  return shown.length === 0 ? (
    <p>没有匹配的用户</p>
  ) : (
    <ul>
      {shown.map(u => (
        <li key={u.id}>            {/* key 用数据本身的 id，见 state 章 */}
          {u.name}
          {u.isAdmin && <Badge>管理员</Badge>}  {/* 布尔值，安全 */}
        </li>
      ))}
    </ul>
  );
}

function Counter() {
  // count 在这一次渲染里就是个常量快照，函数体里不会中途变
  const [count, setCount] = useState(2);

  const wrong = () => {
    setCount(count + 1);      // 读到 2，安排「下次是 3」
    setCount(count + 1);      // 还是读到 2，又安排一次「下次是 3」
  };                                 // 结果 3，不是 4

  const right = () => {
    setCount(c => c + 1);     // 收到 2 返回 3
    setCount(c => c + 1);     // 收到上一个的 3 返回 4：排队执行才累加
  };                                 // 结果 4

  const stale = () => {
    setCount(99);
    console.log(count);           // 打出 2：新值要等下次渲染才存在
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={wrong}>连写两次</button>
      <button onClick={right}>函数式两次</button>
    </div>
  );
}

// ❌ 原地改：引用没变，组件函数一次都不重跑，界面纹丝不动
const bad = () => {
  todos.push({ id: 3, text: "跑步" });
  setTodos(todos);            // Object.is(todos, todos) 为真 → 直接退出
};

// ✅ 对象：展开旧的，覆盖要改的字段
setUser(p => ({ ...p, name: "老王" }));

// ✅ 数组三件套：增用展开、删用 filter、改用 map
setTodos(p => [...p, { id: crypto.randomUUID(), text, done: false }]);
setTodos(p => p.filter(t => t.id !== id));
setTodos(p => p.map(t => t.id === id ? { ...t, done: !t.done } : t));

// ✅ 排序：sort 是原地方法，toSorted 返回新数组（原数组不变）
setTodos(p => p.toSorted((a, b) => a.text.localeCompare(b.text)));

// ✅ 嵌套：每一层都要造新的，漏一层那一层就不会更新
setState(p => ({
  ...p,
  profile: { ...p.profile, address: { ...p.profile.address, city } },
}));

import { useState } from "react";
import { flushSync } from "react-dom";

function Demo({ listRef }) {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);
  const [rows, setRows] = useState([]);

  // 以下三处各自都只触发一次重渲染，中间态不会被渲染出来
  const inEvent = () => { setA(x => x + 1); setB(x => x + 1); };
  const inTimer = () => setTimeout(() => {
    setA(x => x + 1); setB(x => x + 1);   // React 18 起这里也批
  }, 0);
  const inPromise = async () => {
    await fetch("/api/ping");
    setA(x => x + 1); setB(x => x + 1);   // 接口回调里也批
  };

  // 逃生口：加完一行要立刻滚到底部，必须先让 DOM 真的更新
  const addAndScroll = (text) => {
    flushSync(() => setRows(p => [...p, text]));
    listRef.current.scrollTop = listRef.current.scrollHeight;
  };

  return <button onClick={inEvent}>{a}-{b}</button>;
}

// ❌ 派生状态存进 state：qty 变了它不跟着变（停在 20）
function Bad({ price, qty }) {
  const [total] = useState(price * qty);   // 只在首次渲染算这一次
  return <span>{total}</span>;
}

// ✅ 渲染时算：单一真源只有 price 和 qty
function Good({ price, qty }) {
  const total = price * qty;
  return <span>{total}</span>;
}

// ✅ 状态提升：两个兄弟共享 selected，就提到它们的公共父级
function Gallery({ photos }) {
  const [selected, setSelected] = useState(0);
  const [keyword, setKeyword] = useState("");

  // 筛选结果是派生的：随渲染现算，不设第二份 state
  const shown = photos.filter(p => p.title.includes(keyword));

  return (
    <>
      <input value={keyword} onChange={e => setKeyword(e.target.value)} />
      <ThumbList items={shown} active={selected} onPick={setSelected} />
      <BigImage photo={shown[selected]} />
    </>
  );
}

// ❌ index 当 key：头插一项后，B 行输入的内容会跑到 A 行去
{items.map((item, index) => (
  <Row key={index} item={item} />
))}

// ❌ 随机数当 key：每次重渲染都重新挂载全部行，状态清空
{items.map(item => <Row key={Math.random()} item={item} />)}

// ✅ 用数据自带的稳定 id，身份跟着数据走
{items.map(item => <Row key={item.id} item={item} />)}

// ✅ 本地新建的项：在「创建那一刻」就生成 id 并存进数据里
const add = (text) => setItems(p => [
  { id: crypto.randomUUID(), text },   // 不是渲染时才算，否则每次都变
  ...p,
]);

// key 只需在同一组兄弟里唯一，不用全局唯一；它也不会作为 prop 传进组件
function Row({ item, key }) {
  console.log(key);            // undefined，而且 React 会为此告警
  return <li>{item.text}<input /></li>;
}
// 组件内部要用这个值，就再传一个普通属性：<Row key={item.id} id={item.id} />

// ✅ 换用户就换 key：EditForm 整个重建，草稿自然清空（挂载次数 1 → 2）
function Page() {
  const [userId, setUserId] = useState("u1");
  return (
    <>
      <UserPicker onPick={setUserId} />
      {/* key 要加在「要被重置的那个组件」上，加在它内部的 div 上无效 */}
      <EditForm key={userId} userId={userId} />
    </>
  );
}

function EditForm({ userId }) {
  // userId 变了 → key 变了 → 这个 useState 会重新初始化
  const [draft, setDraft] = useState("");
  return <textarea value={draft}
           onChange={e => setDraft(e.target.value)} />;
}

// ❌ 反模式：用 effect 手工同步。多渲染一轮，加字段还容易漏
// useEffect(() => { setDraft(""); setErrors({}); }, [userId]);

// ❌ 别把频繁变化的东西当 key：等于每敲一个字就重建整个表单
// <EditForm key={JSON.stringify(form)} />

// reducer 写在组件外：纯函数，不碰 DOM、不发请求、不改入参
function reducer(state, action) {
  switch (action.type) {
    case "added":
      return { ...state, items: [...state.items,
        { id: action.id, text: action.text, done: false }] };
    case "toggled":
      return { ...state, items: state.items.map(t =>
        t.id === action.id ? { ...t, done: !t.done } : t) };
    case "filterChanged":
      // 换筛选顺手退出编辑态：这条约束只需在这里写一次
      return { ...state, filter: action.filter, editingId: null };
    default:
      // 一定要抛：否则打错 type 时静默什么也不发生
      throw new Error("未知 action：" + action.type);
  }
}

function TodoApp() {
  const [state, dispatch] = useReducer(reducer,
    { items: [], filter: "all", editingId: null });

  // 派生值随渲染现算，不进 state
  const shown = state.filter === "done"
    ? state.items.filter(t => t.done) : state.items;

  return <button onClick={() =>
    dispatch({ type: "filterChanged", filter: "done" })}>
    只看已完成（{shown.length}）</button>;
}

// —— 受控：真源在 state，DOM 只负责显示 ——
function Search() {
  const [q, setQ] = useState("");   // 初值给 ""，绝不能给 undefined

  // 有了 state，才能在输入过程中算派生值
  const tooShort = q.trim().length < 2;

  return (
    <>
      <input value={q} onChange={e => setQ(e.target.value)} />
      <button disabled={tooShort}>搜索</button>
    </>
  );
}

// —— 非受控：真源在 DOM，提交时才去问它 ——
function Feedback() {
  const onSubmit = (e) => {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(e.target));
    console.log(data.msg);   // 打字过程中一次渲染都没发生
  };
  return (
    <form onSubmit={onSubmit}>
      {/* defaultValue 而非 value：只在挂载时写一次 */}
      <textarea name="msg" defaultValue="" />
      <button>提交</button>
    </form>
  );
}

function SignupForm() {
  const [form, setForm] = useState({   // 一个对象装下所有字段
    email: "", age: "", plan: "free", agree: false,
  });

  // 一个 handler 管全部：靠 name 定位，用计算属性名写回
  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    // 必须用函数式：同一事件里改两个字段时才不会互相覆盖
    setForm(prev => ({
      ...prev,
      [name]: type === "checkbox" ? checked : value,
    }));
  };

  return (
    <form onSubmit={e => e.preventDefault()}>
      <input name="email" value={form.email} onChange={handleChange} />
      {/* number 拿到的仍是字符串，要算数得自己 Number() */}
      <input name="age" type="number" value={form.age} onChange={handleChange} />
      <select name="plan" value={form.plan} onChange={handleChange}>
        <option value="free">免费</option>
        <option value="pro">专业</option>
      </select>
      <input name="agree" type="checkbox"
             checked={form.agree} onChange={handleChange} />
      <button disabled={!form.agree}>注册</button>
    </form>
  );
}

// React 19：ref 直接写在参数里，不需要 forwardRef（无告警）
function TextField({ label, ref, ...rest }) {
  return <label>{label}<input ref={ref} {...rest} /></label>;
}

function ProfileForm() {
  const emailRef = useRef(null);

  const onSubmit = (e) => {
    e.preventDefault();
    console.log(emailRef.current.value);  // 方式一：ref 读单个字段

    // 方式二：FormData 一次取全，靠的是每个字段的 name
    const data = Object.fromEntries(new FormData(e.target));

    // 未勾选的复选框不会出现在 FormData 里，得自己兜底成布尔
    send({ ...data, vip: data.vip === "on" });
  };

  return (
    <form onSubmit={onSubmit}>
      {/* defaultValue 只在挂载时写一次，之后改它不会更新界面 */}
      <TextField label="邮箱" ref={emailRef}
                 name="email" defaultValue="a@b.com" />
      <input name="nick" defaultValue="老王" />
      <input name="vip" type="checkbox" defaultChecked />
      <button>保存</button>
    </form>
  );
}

import { useActionState } from "react";
import { useFormStatus } from "react-dom";  // 注意是 react-dom

// useFormStatus 只能在 form 的「子组件」里用，写在外层读到的永远是 false
function SubmitButton() {
  const { pending } = useFormStatus();
  return <button type="submit" disabled={pending}>{pending ? "提交中…" : "订阅"}</button>;
}

function Subscribe() {
  // 签名：(prevState, formData) => nextState，第二个参数是初始 state
  const [state, formAction, isPending] = useActionState(
    async (prev, formData) => {
      const email = formData.get("email");
      if (!String(email).includes("@"))
        return { ok: false, msg: "邮箱格式不对" };   // 错误当返回值，不用抛
      await fetch("/api/subscribe", { method: "POST", body: formData });
      return { ok: true, msg: email + " 订阅成功" };
    },
    { ok: null, msg: "" },
  );
  return (
    // action 收到 FormData，React 自动 preventDefault；跑完会重置非受控字段
    <form action={formAction}>
      <input name="email" defaultValue="" disabled={isPending} />
      <SubmitButton />
      <p>{state.msg}</p>
    </form>
  );
}

function EmailField() {
  const [value, setValue] = useState("");
  const [error, setError] = useState(null);

  const validate = (v) => v.includes("@") ? null : "请填写有效的邮箱地址";

  // 首次校验放在失焦：等用户打完了再评判
  const onBlur = (e) => setError(validate(e.target.value));

  // 只在「已经报过错」之后才转为实时校验：错了才实时，没错前别催
  const onChange = (e) => {
    setValue(e.target.value);
    if (error) setError(validate(e.target.value));
  };

  return (
    <label>
      {/* required 留着：辅助技术、自动填充、移动端键盘都靠它 */}
      <input
        type="email" required value={value}
        aria-invalid={error ? "true" : undefined}
        onChange={onChange} onBlur={onBlur}
      />
      {error && <span role="alert">{error}</span>}
    </label>
  );
}

// 想复用原生判断、自己控制文案：给 form 加 noValidate 关掉气泡，再读 validity
// if (el.validity.typeMismatch) setError("邮箱格式不对");

import { useState, useEffect, useLayoutEffect } from "react";

function App() {
  const [n, setN] = useState(0);
  console.log(`render n=${n}`);

  // 绘制前同步执行，整批跑完才轮到 useEffect
  useLayoutEffect(() => {
    console.log(`  layout n=${n}`);
    return () => console.log(`  layout cleanup n=${n}`);
  });

  // [n] 变了才重跑；重跑前先执行上一帧留下的清理
  useEffect(() => {
    console.log(`  effect n=${n}`);
    return () => console.log(`  effect cleanup n=${n}`);
  }, [n]);

  // [] 的闭包永远冻在首帧，卸载时它的清理打印的仍是 n=0
  useEffect(() => () => console.log(`  [] cleanup n=${n}`), []);

  return <button onClick={() => setN(x => x + 1)}>{n}</button>;
}

import { StrictMode, useState, useEffect } from "react";

let total = 0;                      // 故意演示一个不纯的组件
function Item({ n }) {
  total += n;                          // 渲染期间改外部变量 = 副作用
  return <li>{n}</li>;
}

function App() {
  const [n, setN] = useState(0);
  console.log("render", n);            // 打两遍：render 0 | render 0

  useEffect(() => {
    console.log("  建立", n);
    return () => console.log("  清理", n);
  }, [n]);                             // 挂载建立0 → 清理0 → 建立0

  return (
    <ul onClick={() => setN(n + 1)}>
      <Item n={1} /><Item n={2} />
    </ul>
  );
}
// 包 StrictMode 时 total = 6，不包时 = 3。翻倍就是「不纯」的铁证

import { useState, useEffect } from "react";

function ChatRoom({ roomId }) {
  const [msgs, setMsgs] = useState([]);

  useEffect(() => {
    // 资源必须在 effect 内部创建，闭包才对得上
    const conn = new WebSocket(`wss://chat/${roomId}`);
    const onMsg = (e) => setMsgs(m => [...m, e.data]);
    conn.addEventListener("message", onMsg);

    // roomId 变化时：先跑这里断开旧房间，再连新房间
    return () => {
      conn.removeEventListener("message", onMsg);  // 同一个引用才摘得掉
      conn.close();
    };
  }, [roomId]);

  // 反例：清理里写 removeEventListener("message", (e) => ...)
  // 新建的箭头函数和注册时那个不是同一个引用，永远摘不掉

  return <ul>{msgs.map((m, i) => <li key={i}>{m}</li>)}</ul>;
}

import { useState, useEffect } from "react";

// ❌ 依赖撒谎：用了 count 却申报 []
function Bad() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      console.log("定时器读到 count=" + count);  // 永远是 0
    }, 1000);
    return () => clearInterval(id);
  }, []);  // 闭包冻在首帧，之后三次点击一次都没重跑
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

// ✅ 根本不需要读 count：函数式更新只描述「怎么变」
function Good() {
  const [n, setN] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setN(c => c + 1), 1000);
    return () => clearInterval(id);
  }, []);  // 依赖为空是诚实的：effect 体内确实没读任何 state
  return <b>{n}</b>;
}

import { useEffect, useEffectEvent } from "react";

function ChatRoom({ roomId, theme }) {
  // 非响应式：读 roomId 和 theme，但它们都不进依赖数组
  const onConnected = useEffectEvent(() => {
    showToast(`连上 ${roomId}，当时主题=${theme}`);
  });

  useEffect(() => {
    const conn = connect(roomId);
    conn.on("open", onConnected);   // 调用时读到的是最新的 theme
    return () => conn.close();
  }, [roomId]);  // 只申报 roomId：改主题不重连，一条日志都没有

  // ❌ 千万别写成 [roomId, onConnected]
  // useEffectEvent 每次渲染返回的是新引用，写进依赖等于每帧重跑

  return <div className={theme}>{roomId}</div>;
}

import { useState, useEffect } from "react";

function Profile({ userId }) {
  const [user, setUser] = useState(null);
  const [err, setErr] = useState(null);

  useEffect(() => {
    let cancelled = false;        // 兜住取消不掉的那部分
    const ac = new AbortController();  // 真的中断请求，省流量

    (async () => {
      try {
        const res = await fetch(`/api/users/${userId}`, { signal: ac.signal });
        const data = await res.json();
        if (!cancelled) setUser(data);
      } catch (e) {
        // 取消导致的 reject 不是错误，别渲染成错误态
        if (e.name !== "AbortError" && !cancelled) setErr(e);
      }
    })();

    return () => { cancelled = true; ac.abort(); };
  }, [userId]);   // userId 一变：先作废旧请求，再发新的

  if (err) return <p>出错了</p>;
  return <b>{user?.name ?? "加载中"}</b>;
}

// ❌ 派生数据塞进 effect + state：一次交互跑了 4 次渲染
const [first, setFirst] = useState("张");
const [cached, setCached] = useState("");
useEffect(() => { setCached(first + " 三"); }, [first]);
// 首帧 cached 是空字符串，第二帧才补上 —— 屏幕会闪

// ✅ 渲染时直接派生：只跑 2 次渲染，无中间态
const full = first + " 三";

// ❌ 把「提交后的后续」放 effect：路由返回时会莫名再弹一次
useEffect(() => { if (saved) showToast("已保存"); }, [saved]);

// ✅ 用户操作的后续就写在事件处理函数里
async function handleSubmit(e) {
  e.preventDefault();
  await save(draft);
  showToast("已保存");
  onSaved(draft);        // 通知父组件也在这里，别再绕一趟 effect
}

// ✅ 这才是 effect：document.title 是 React 管不着的外部系统
useEffect(() => { document.title = full; }, [full]);

import { useState, useRef, useEffect } from "react";

function StopWatch() {
  const [ms, setMs] = useState(0);
  const timerRef = useRef(null);   // 屏幕不关心 timer id，放 ref
  const inputRef = useRef(null);   // 渲染期是 null，提交后才是真实节点

  useEffect(() => {
    inputRef.current.focus();       // effect 里才读得到
    return () => clearInterval(timerRef.current);
  }, []);

  const start = () => {
    if (timerRef.current) return;    // 防重复启动
    timerRef.current = setInterval(() => setMs(t => t + 100), 100);
  };
  const stop = () => { clearInterval(timerRef.current); timerRef.current = null; };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={start}>开始</button>
      <button onClick={stop}>停</button>
      {/* ms 要上屏，所以它必须是 state 而不是 ref */}
      <b>{ms}</b>
    </div>
  );
}

import { useState, useMemo, useCallback, memo } from "react";

const Row = memo(function Row({ item, onPick }) {
  return <li onClick={() => onPick(item.id)}>{item.name}</li>;
});

function List({ items, onPick }) {
  const [q, setQ] = useState("");
  const [theme, setTheme] = useState("light");

  // 依赖是 [items, q]，所以切 theme 时一次都不重算
  const shown = useMemo(
    () => items.filter(i => i.name.includes(q)).sort((a, b) => a.price - b.price),
    [items, q]
  );

  // 只有下游是 memo 组件时，这层包装才有意义
  const handlePick = useCallback((id) => onPick(id), [onPick]);

  return (
    <ul className={theme}>
      {shown.map(i => <Row key={i.id} item={i} onPick={handlePick} />)}
    </ul>
  );
}

import { createContext, useContext } from "react";

// 括号里是兜底值：只在向上找不到任何 Provider 时才生效
const LevelContext = createContext(0);

function Heading({ children }) {
  const level = useContext(LevelContext);  // 取树上最近的提供者
  const Tag = "h" + level;
  return <Tag>{children}</Tag>;
}

function Section({ children }) {
  // 注意：这里读到的是外层的值，不是下一行自己提供的那个
  const level = useContext(LevelContext);
  // React 19：context 对象本身就能当 Provider 用
  return <LevelContext value={level + 1}>{children}</LevelContext>;
}

// 同一个 Heading，靠嵌套深度渲染成 h1 / h2 / h3
function Page() {
  return (
    <Section><Heading>一级标题</Heading>
      <Section><Heading>二级标题</Heading>
        <Section><Heading>三级标题</Heading></Section>
      </Section>
    </Section>
  );
}

import { useReducer } from "react";

// init 复用于「首次初始化」和「重置」，两处逻辑永不走样
function init(seed) {
  return { items: seed ? [seed] : [], dirty: false };
}

function reducer(state, action) {
  switch (action.type) {
    case "add":
      // 必须返回新对象：改 state 再 return state 屏幕不会更新
      return { ...state, items: [...state.items, action.item], dirty: true };
    case "remove":
      return { ...state, items: state.items.filter(i => i !== action.item), dirty: true };
    case "reset":
      return init(action.payload);
    default:
      // 写错 type 时当场报错，比静默返回 state 好查得多
      throw new Error("未知 action：" + action.type);
  }
}

function Cart({ seed }) {
  // 第三参数：init 只在挂载时调一次，不是每次渲染都算
  const [state, dispatch] = useReducer(reducer, seed, init);

  // dispatch 引用跨渲染恒定，传给 memo 子组件不用包 useCallback
  return <ItemList items={state.items} dispatch={dispatch} />;
}

import { useState, useDeferredValue, useTransition, memo } from "react";

// 必须 memo，否则父组件一重渲染就把它带上，延迟等于没做
const Results = memo(function Results({ query }) {
  const rows = hugeSearch(query);   // 假设渲染上万行，很慢
  return <ul>{rows.map(r => <li key={r.id}>{r.name}</li>)}</ul>;
});

function Search() {
  const [text, setText] = useState("");
  const deferred = useDeferredValue(text);
  const stale = deferred !== text;   // 据此把旧结果变灰，别让用户以为卡死

  return (
    <>
      <input value={text} onChange={e => setText(e.target.value)} />
      <div style={{ opacity: stale ? 0.5 : 1 }}>
        <Results query={deferred} />
      </div>
    </>
  );
}

function Tabs() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState("home");
  // React 19 起 startTransition 可以传 async 函数
  const go = (n) => startTransition(async () => { await preload(n); setTab(n); });
  return <button disabled={isPending} onClick={() => go("posts")}>{tab}</button>;
}

import { useSyncExternalStore } from "react";

// subscribe 定义在组件外：引用天然稳定，不会每帧退订重订
function subscribe(onChange) {
  window.addEventListener("online", onChange);
  window.addEventListener("offline", onChange);
  return () => {
    window.removeEventListener("online", onChange);
    window.removeEventListener("offline", onChange);
  };
}

export function useOnlineStatus() {
  return useSyncExternalStore(
    subscribe,
    () => navigator.onLine,   // 返回布尔值：没变就是同一个引用，安全
    () => true                // 服务端没有 navigator，假定在线
  );
}

// ❌ 快照返回新对象：React 每次比较都判定「变了」，无限重渲染
// () => ({ online: navigator.onLine })

function Banner() {
  const online = useOnlineStatus();
  return online ? null : <p>网络已断开</p>;
}

import { useId, useRef, useImperativeHandle, use, Suspense } from "react";

function Field({ label }) {
  const id = useId();   // 形如 _r_0_，服务端与客户端一致
  // 一个组件里需要多个 id 时，用一个 useId 加后缀，别调多次
  return (
    <p>
      <label htmlFor={id}>{label}</label>
      <input id={id} aria-describedby={id + "-hint"} />
    </p>
  );
}

// React 19：ref 是普通 prop，不用 forwardRef 包
function FancyInput({ ref }) {
  const inner = useRef(null);
  // 只把这两个方法交出去，真实 DOM 节点封在里面
  useImperativeHandle(ref, () => ({
    focus: () => inner.current.focus(),
    clear: () => { inner.current.value = ""; },
  }), []);
  return <input ref={inner} />;
}

// use()：Promise 必须在渲染外创建好并缓存，否则永远挂起
function Comments({ commentsPromise }) {
  const list = use(commentsPromise);   // 不要包 try/catch
  return list.map(c => <p key={c.id}>{c.text}</p>);
}

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

// 默认值只在「找不到任何 Provider」时生效，这里故意给 null 好做校验
const ThemeContext = createContext(null);

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  const toggle = () => setTheme(t => t === "light" ? "dark" : "light");
  // React 19：Context 对象本身就能当 Provider 用，无告警
  return <ThemeContext value={{ theme, toggle }}>{children}</ThemeContext>;
}

// 导出 Hook 而不是 Context 本身：调用方无从绕过校验
export function useTheme() {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error("useTheme 必须用在 ThemeProvider 内部");
  return ctx;
}

function ThemeButton() {
  const { theme, toggle } = useTheme();   // 中间隔几层都无所谓
  return <button onClick={toggle}>当前：{theme}</button>;
}

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

const Ctx = createContext(null);

function App() {
  const [n, setN] = useState(0);        // 和 Context 无关的状态
  const [theme, setTheme] = useState("light");

  // 错：每次渲染新对象 → 改 n 也会让全体消费者重渲染
  // const value = { theme, setTheme };

  // 对：theme 不变则引用不变，改 n 时消费者零渲染
  const value = useMemo(() => ({ theme, setTheme }), [theme]);

  return (
    <Ctx value={value}>
      <button onClick={() => setN(x => x + 1)}>{n}</button>
      <Middle />
    </Ctx>
  );
}

// memo 让 Middle 自己不重渲染，但拦不住下面的 Leaf
const Middle = memo(function Middle() { return <Leaf />; });

function Leaf() {
  const { theme } = useContext(Ctx);  // 订阅关系直连，绕过 props
  return <span>{theme}</span>;
}

import { createContext, useContext, useReducer, memo } from "react";

// 拆成两个：一个装值，一个装派发方法
const CartValue = createContext(null);
const CartDispatch = createContext(null);

export function CartProvider({ children }) {
  const [cart, dispatch] = useReducer(cartReducer, { items: [] });
  // dispatch 的引用由 React 保证稳定，不必 useMemo／useCallback
  return (
    <CartDispatch value={dispatch}>
      <CartValue value={cart}>{children}</CartValue>
    </CartDispatch>
  );
}

function CartBadge() {
  const cart = useContext(CartValue);      // 值变才重渲染
  return <span>{cart.items.length}</span>;
}

// 只订阅 dispatch：购物车怎么变，这个按钮都不重渲染（零渲染）
const AddButton = memo(function AddButton({ item }) {
  const dispatch = useContext(CartDispatch);
  return <button onClick={() => dispatch({ type: "ADD", item })}>加入</button>;
});

// 服务器状态：交给数据层，别自己 useState 存
const { data: user } = useQuery({
  queryKey: ["user", id],
  queryFn: () => fetchUser(id),   // 去重、重试、失效都归它管
});

// 客户端状态：Zustand，一个 store hook，无需 Provider
import { create } from "zustand";

const useCart = create((set) => ({
  items: [],
  coupon: null,
  add: (it) => set((s) => ({ items: [...s.items, it] })),
  setCoupon: (c) => set({ coupon: c }),
}));

function CartCount() {
  // 选择器＝订阅粒度：改 coupon 时本组件零渲染
  const n = useCart((s) => s.items.length);
  return <span>{n}</span>;
}

function CouponTag() {
  const c = useCart((s) => s.coupon);   // 改 items 时本组件零渲染
  return <span>{c ?? "无优惠券"}</span>;
}

import { createContext, useContext, useState, useMemo } from "react";
import { create } from "zustand";
import { persist } from "zustand/middleware";

// 手搓版：整个 store 塞进一个 Context，消费端只能整份拿走
const StoreCtx = createContext(null);
function StoreProvider({ children }) {
  const [state, setState] = useState({ user: "游客", unread: 0 });
  const value = useMemo(() => [state, setState], [state]);
  return <StoreCtx value={value}>{children}</StoreCtx>;
}
function CtxBadge() {
  const [s] = useContext(StoreCtx);  // 只用 unread，改 user 也照样重渲染
  return <span>{s.unread}</span>;
}

// 库版：选择器就是订阅声明，顺带白拿一个持久化中间件
const useApp = create(persist((set) => ({
  user: "游客",
  unread: 0,
  markRead: () => set({ unread: 0 }),
}), { name: "app" }));
function Badge() {
  const unread = useApp((s) => s.unread);  // 改 user 时零渲染
  return <span>{unread}</span>;
}

// 组件外照样读写：不必是组件，也不必被任何 Provider 包住
useApp.getState().markRead();

import { useState } from "react";

// 它就是个普通函数，只不过内部用了 Hook
function useCounter(init = 0) {
  const [n, setN] = useState(init);
  const inc = () => setN(x => x + 1);
  return [n, inc];
}

function Box({ label }) {
  // 每个 Box 实例在自己的 hook 链表上开一个槽，状态互不相干
  const [n, inc] = useCounter();
  return <button onClick={inc}>{label}:{n}</button>;
}

function App() {
  return (
    <>
      <Box label="甲" />
      <Box label="乙" />
    </>
  );
}

// 初始「甲:0乙:0」，在甲上点两下 → 「甲:2乙:0」
// 共享的是逻辑，不是状态。要共享数据请用 Context 或外部 store

import { useState, useEffect } from "react";

function useLocalStorage(key, initial) {
  // 惰性初始化：读存储只在挂载时发生一次，不是每次渲染
  const [value, setValue] = useState(() => {
    const raw = localStorage.getItem(key);
    return raw ? JSON.parse(raw) : initial;
  });
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  return [value, setValue];   // 与 useState 同形，调用方零学习成本
}

function useDebounce(value, delay = 300) {
  const [v, setV] = useState(value);
  useEffect(() => {
    const t = setTimeout(() => setV(value), delay);
    // 清理是关键：value 连变时前一个定时器必须撤掉
    return () => clearTimeout(t);
  }, [value, delay]);
  return v;
}

// 组合使用：输入即时响应，请求只在停手后发出
const [query, setQuery] = useState("");
const debounced = useDebounce(query, 400);

import { useState, useCallback, useMemo } from "react";

// 两项且对称 → 返回数组，调用方自由命名
function useToggle(init = false) {
  const [on, setOn] = useState(init);
  // 函数式更新 → 不依赖 on → 依赖数组为空 → 引用永久稳定
  const toggle = useCallback(() => setOn(o => !o), []);
  return [on, toggle];
}

function Panel() {
  const [open, toggleOpen] = useToggle();      // 同一组件里用两次
  const [dark, toggleDark] = useToggle(true);  // 数组才好改名
  return <button onClick={toggleOpen}>{String(open)}{String(dark)}</button>;
}

// 三项以上或带可选项 → 返回对象，且对象本身也要 useMemo
function useResource(url) {
  const [state, setState] = useState({ data: null, loading: true });
  const refetch = useCallback(() => load(url, setState), [url]);
  // 不包 useMemo 的话，外层对象每次都是新的，白稳了 refetch
  return useMemo(
    () => ({ ...state, refetch }),
    [state, refetch]
  );
}

import { useState, useEffect } from "react";

// 错：show 从 true 变 false 时，第 2 格 Hook 凭空消失
function Bad({ show }) {
  const [a] = useState("A");
  if (show) {
    const [b] = useState("B");   // Rendered fewer hooks than expected.
    return <i>{a}{b}</i>;
  }
  return <i>{a}</i>;
}

// 错：提前 return 同样会少调用后面的 Hook
function AlsoBad({ user }) {
  if (!user) return null;        // 这一行之后的 Hook 全被跳过
  const [name] = useState(user.name);
  return <i>{name}</i>;
}

// 对：Hook 永远在顶层调用，把条件搬进 Hook 内部
function Good({ user, enabled }) {
  const [name, setName] = useState(user?.name ?? "");
  useEffect(() => {
    if (!enabled) return;       // 判断放里面，调用顺序不受影响
    track(name);
  }, [enabled, name]);
  if (!user) return null;        // 提前 return 要放在所有 Hook 之后
  return <i>{name}</i>;
}

import { Profiler, memo, useState } from "react";

// actual：本次真实耗时；base：假设不做任何跳过、全子树重渲染的耗时
// 两者的差价，才是你的 memo 真正省下来的钱
function onRender(id, phase, actual, base) {
  console.log(`${id} ${phase} 本次=${actual.toFixed(2)}ms 不优化则=${base.toFixed(2)}ms`);
}

const Heavy = memo(function Heavy({ rows }) {
  const sorted = [...rows].sort((a, b) => a - b);
  return <li>{sorted.length}</li>;
});

function App() {
  const [n, setN] = useState(0);
  const [rows] = useState([3, 1, 2]);   // 引用稳定，memo 才有机会命中
  return (
    <Profiler id="面板" onRender={onRender}>
      <button onClick={() => setN(n + 1)}>{n}</button>
      <ul><Heavy rows={rows} /></ul>
    </Profiler>
  );
}

// 日志：面板 mount  本次=5.66ms 不优化则=0.86ms  ← 首渲染缓存是净亏
//          面板 update 本次=0.29ms 不优化则=0.53ms  ← 这里才开始赚

import { memo, useState } from "react";

const Child = memo(function Child({ label }) {
  console.log("Child 渲染 " + label);
  return <div>{label}</div>;
});

function App() {
  const [n, setN] = useState(0);
  return (
    <>
      <button onClick={() => setN(n + 1)}>{n}</button>
      <Child label="A 只传字符串" />
      <Child label="B 多传内联对象" style={{ color: "red" }} />
      <Child label="C 多传内联函数" onClick={() => {}} />
    </>
  );
}

// 点一次按钮后的日志（只有两行）：
//   Child 渲染 B 多传内联对象
//   Child 渲染 C 多传内联函数
// A 被跳过，B 和 C 照跑——多传的那一个 prop 就把 memo 废掉了

import { memo, useState, useMemo, useCallback } from "react";

const Row = memo(function Row({ item, onPick }) {
  console.log("Row 渲染 " + item.name);
  return <li onClick={() => onPick(item.id)}>{item.name}</li>;
});

function App({ all }) {
  const [tick, setTick] = useState(0);      // 和列表毫无关系的 state
  const [onlyTodo, setOnlyTodo] = useState(false);

  // 值得包：结果要当 memo 子组件的 prop，不包则每次是新数组
  const visible = useMemo(
    () => all.filter(i => !onlyTodo || !i.done), [all, onlyTodo]);

  // 值得包：同理，否则箭头函数每次新建，Row 的 memo 全废
  const onPick = useCallback((id) => console.log("选中 " + id), []);

  // 不值得包：一次加法而已，包了反而多花一次依赖比较
  const count = visible.length + tick;

  return (
    <>
      <button onClick={() => setTick(t => t + 1)}>{count}</button>
      <ul>{visible.map(i => <Row key={i.id} item={i} onPick={onPick} />)}</ul>
    </>
  );
}
// 点 tick 按钮：Row 的日志一条都没有，两个包都命中了

// 1) 装：npm i -D babel-plugin-react-compiler      版本 1.0.0
// 2) Next 16：next.config.ts 里写顶层的 reactCompiler: true（不再放 experimental）
// 3) Vite/Babel：把插件加进 babel plugins，target 填 "17" / "18" / "19"

// ── 源码：一个 memo、useMemo 都没写 ──
function TodoList({ todos, tab }) {
  const visible = todos.filter(t => t.tab === tab);
  return <List items={visible} />;
}

// ── 编译产物（target 19，逐字照抄，未作删改）──
import { c as _c } from "react/compiler-runtime";
function TodoList(t0) {
  const $ = _c(7);                       // 本组件专属的 7 个缓存槽
  const { todos, tab } = t0;
  let t1;
  if ($[0] !== tab || $[1] !== todos) {   // 依赖变了才重算
    let t2;
    if ($[3] !== tab) {                 // 连 filter 的回调都单独缓存
      t2 = t => t.tab === tab;
      $[3] = tab; $[4] = t2;
    } else { t2 = $[4]; }
    t1 = todos.filter(t2);
    $[0] = tab; $[1] = todos; $[2] = t1;
  } else { t1 = $[2]; }              // 否则原样复用上次的数组
  const visible = t1;
  let t2;
  if ($[5] !== visible) {                // 返回的元素本身也被缓存
    t2 = <List items={visible} />;
    $[5] = visible; $[6] = t2;
  } else { t2 = $[6]; }
  return t2;
}

import { useState } from "react";
const ROW = 32, VIEW = 320;   // 行高与可视区高度

function VirtualList({ items }) {
  const [top, setTop] = useState(0);
  const start = Math.floor(top / ROW);
  // 多渲染两行当缓冲，滚动时不会露白
  const end = Math.min(items.length, start + Math.ceil(VIEW / ROW) + 2);
  const slice = items.slice(start, end);

  return (
    <div onScroll={e => setTop(e.currentTarget.scrollTop)}
         style={{ height: VIEW, overflow: "auto" }}>
      {/* 占位层：撑出真实滚动条高度 */}
      <div style={{ height: items.length * ROW, position: "relative" }}>
        {/* key 必须用数据 id，绝不能用下标——滚动本身就在改下标 */}
        {slice.map((it, i) => (
          <div key={it.id} style={{ position: "absolute",
               top: (start + i) * ROW, height: ROW }}>{it.name}</div>
        ))}
      </div>
    </div>
  );
}
// 传入一万条：本次渲染 12 行，容器里总共 14 个 DOM 节点

import { lazy, Suspense, useState, useTransition } from "react";

// 必须写在组件外：写在组件体内会每次渲染新建类型，导致反复卸载重挂
const Heavy = lazy(() => import("./Heavy.jsx"));

function App({ all }) {
  const [show, setShow] = useState(false);
  const [text, setText] = useState("");
  const [q, setQ] = useState("");
  const [isPending, startTransition] = useTransition();

  return (
    <>
      <input value={text} onChange={e => {
        setText(e.target.value);              // 高优先级：立刻跟手
        startTransition(() => setQ(e.target.value)); // 低优先级：可被打断
      }} />
      {isPending && <span>筛选中…</span>}
      <SlowList all={all} q={q} />

      <button onClick={() => setShow(true)}>打开编辑器</button>
      <Suspense fallback={<p>加载中…</p>}>{show && <Heavy />}</Suspense>
    </>
  );
}
// 一次输入的渲染日志：
//   text="a" q=""  isPending=true   ← 输入框先跟手
//   text="a" q="a" isPending=false  ← 列表随后追上

import type { ReactNode } from "react";

interface CardProps {
  title: string;
  badge?: number;             // 可选 = number | undefined
  onClose?: () => void;      // void 位置能接受任何返回值的函数
  children: ReactNode;        // 想收子内容必须显式声明
}

// 直接标注参数，返回值交给推断——不要 React.FC
export function Card({ title, badge = 0, onClose, children }: CardProps) {
  return (
    <section>
      <h3>{title}{badge > 0 && <em>{badge}</em>}</h3>
      {onClose && <button onClick={onClose}>x</button>}
      {children}
    </section>
  );
}

// 泛型组件：这样能写，写成 const Ok: FC<...> 就写不出来了
const Ok = <T,>({ items }: { items: T[] }) => <span>{items.length}</span>;

export function Demo() {
  return <Card title="标题"><Ok items={[1, 2, 3]} /></Card>;
}

import { useState, useRef, useReducer, useEffect } from "react";

type User = { id: number; name: string };
// action 写成以 type 字段区分的可辨识联合
type Action = { type: "add"; text: string }
             | { type: "remove"; id: number };
type State = { items: { id: number; text: string }[] };
function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "add": return { items: [...state.items, { id: 1, text: action.text }] };
    case "remove": return { items: state.items.filter(i => i.id !== action.id) };
    default: {
      const never: never = action;  // 漏写 case 时这一行编译期报错
      return never;
    }
  }
}

export function Panel() {
  const [user, setUser] = useState<User | null>(null); // 必须显式
  const inputRef = useRef<HTMLInputElement>(null);      // current 可能是 null
  const timerRef = useRef<number>(0);                 // current 就是 number
  const [state, dispatch] = useReducer(reducer, { items: [] });
  useEffect(() => {
    inputRef.current?.focus();            // DOM ref 必须走可选链
    timerRef.current = timerRef.current + 1; // 可变值 ref 直接读写
    dispatch({ type: "add", text: "第 " + state.items.length + " 项" });
  }, []);
  return <input ref={inputRef} placeholder={user?.name ?? "未登录"} />;
}

import { useState, type ChangeEvent, type FormEvent,
         type MouseEvent, type ComponentProps } from "react";

// 反查技巧：不背类型名，直接从元素 props 上把参数类型抠出来
type InputChange = NonNullable<ComponentProps<"input">["onChange"]>;
type E = Parameters<InputChange>[0];   // 就是 ChangeEvent<HTMLInputElement>

export function LoginForm() {
  const [name, setName] = useState("");

  // 抽出来就脱离了 JSX 上下文，必须自己标
  function handleChange(e: ChangeEvent<HTMLInputElement>) {
    setName(e.target.value);          // 泛型把 target 收窄了才有 value
  }
  function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
  }
  function handleClick(e: MouseEvent<HTMLButtonElement>) {
    console.log(e.currentTarget.disabled); // 这里只能用 currentTarget
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* 内联写法 e 自动推断，一个字都不用标 */}
      <input value={name} onChange={e => setName(e.target.value)} />
      <input value={name} onChange={handleChange} />
      <button onClick={handleClick}>提交</button>
    </form>
  );
}

import { useRef, type ComponentProps,
         type ComponentPropsWithoutRef } from "react";

// 借来原生 button 的全部 props，再拼上自己的 variant
type ButtonProps = ComponentProps<"button"> & {
  variant?: "primary" | "ghost";
};

// React 19：ref 就是普通 prop，直接解构，不需要 forwardRef
export function Button(
  { variant = "primary", className, ref, ...rest }: ButtonProps
) {
  return <button ref={ref}
    className={`btn btn-${variant} ${className ?? ""}`} {...rest} />;
}

// 不打算转发 ref 时用 WithoutRef，把意图写进类型里
type TagProps = ComponentPropsWithoutRef<"span"> & { tone: "warn" | "ok" };
export function Tag({ tone, ...rest }: TagProps) {
  return <span data-tone={tone} {...rest} />;
}

export function Demo() {
  const btnRef = useRef<HTMLButtonElement>(null);
  // type、disabled、onClick 全是白借来的，类型一应俱全
  return <Button ref={btnRef} type="submit" disabled
    onClick={e => console.log(e.currentTarget)}>保存</Button>;
}

import { useState, type ReactNode,
         type Dispatch, type SetStateAction } from "react";

type ListProps<T> = {
  items: readonly T[];             // readonly：表明组件不改它
  keyOf: (item: T) => string | number;
  renderItem: (item: T, index: number) => ReactNode;
};
// 用 function 声明，避开 .tsx 里 <T> 被当成 JSX 标签的麻烦
function List<T>({ items, keyOf, renderItem }: ListProps<T>) {
  if (items.length === 0) return <p>暂无数据</p>;
  return <ul>{items.map((it, i) =>
    <li key={keyOf(it)}>{renderItem(it, i)}</li>)}</ul>;
}
type User = { id: number; name: string };
// setter 传给子组件必须写全，否则子组件用不了函数式更新
function NameEditor({ set }: { set: Dispatch<SetStateAction<User | null>> }) {
  return <button onClick={() =>
    set(u => (u ? { ...u, name: "改了" } : u))}>改名</button>;
}
export function App() {
  const [users] = useState<User[]>([{ id: 1, name: "阿伟" }]);
  const [cur, setCur] = useState<User | null>(null);
  // T 从 items 推断出来，renderItem 里的 u 自动就是 User
  return <>
    <List items={users} keyOf={u => u.id}
      renderItem={u => <b onClick={() => setCur(u)}>{u.name}{cur?.id}</b>} />
    <NameEditor set={setCur} />
  </>;
}

// 手写版：生产可直接抄。两个钩子分工——一个决定显示什么，一个负责上报
class ErrorBoundary extends React.Component {
  state = { error: null };

  // 渲染阶段调用：必须是纯函数，只能返回新 state
  static getDerivedStateFromError(error) {
    return { error };
  }

  // 提交阶段调用：这里才允许做副作用（上报）
  componentDidCatch(error, info) {
    report(error, info.componentStack);
  }

  render() {
    if (this.state.error) {
      // 把 reset 交出去，让降级 UI 能提供「重试」
      return this.props.fallback(
        this.state.error,
        () => this.setState({ error: null })
      );
    }
    return this.props.children;
  }
}

// 事件里的错误边界接不住，只能自己捞给它（库版用 showBoundary）
<button onClick={async () => {
  try { await submit(); } catch (e) { showBoundary(e); }
}}>提交</button>

import { Suspense, lazy } from "react";

// lazy 把动态 import 包成组件，加载期间自动挂起
const Chart = lazy(() => import("./Chart"));

// 把「边界 + 等高骨架」封成一个组件，业务代码里就不会漏写
function Block({ height, children }) {
  return (
    <Suspense fallback={<Skeleton height={height} />}>
      {children}
    </Suspense>
  );
}

function Dashboard() {
  // Summary 是同步的，不受任何挂起影响，立刻就能看到
  // 两个独立边界：图表慢不会拖住评论，反之亦然
  // 骨架高度对齐真实内容，才不会在数据落地时抖一下
  return (
    <main>
      <Summary />
      <Block height={320}><Chart /></Block>
      <Block height={200}><Comments /></Block>
    </main>
  );
}

import { use, Suspense } from "react";

// 模块级缓存：同一个 id 永远返回同一个 Promise 实例
const cache = new Map();
function fetchUser(id) {
  if (!cache.has(id)) {
    cache.set(id, fetch("/api/user/" + id).then(r => r.json()));
  }
  return cache.get(id);
}

function Profile({ id }) {
  // 挂起后本函数会整个重跑，此时 fetchUser 返回的是同一个 Promise
  const user = use(fetchUser(id));
  // 不写 if (loading)，也不写 if (error)——两者各有归属
  return <h2>{user.name}</h2>;
}

// 边界在外管「坏了」，Suspense 在内管「还没好」
<ErrorBoundary fallback={<p>加载失败</p>}>
  <Suspense fallback={<Skeleton />}>
    <Profile id={7} />
  </Suspense>
</ErrorBoundary>