Hooks 规则与十大常见陷阱

function Chat({ userId }: { userId: number | null }) {
  const [name, setName] = useState("");        // 第 1 个 Hook
  // ❌ 条件里调 Hook：userId 为空时，这个 useState 不执行
  if (userId !== null) {
    const [online, setOnline] = useState(false);   // 第 2 个 Hook
  }
  const [draft, setDraft] = useState("");      // 第 3 个 Hook
}

function LikeButton() {
  const [liked, setLiked] = useState(false);

  function handleClick() {
    // ❌ 事件处理器运行在渲染结束之后，槽位链表早已封存
    //    React 直接报 Invalid hook call
    const [popup, setPopup] = useState(false);
    setLiked(true);
  }

  return <button onClick={handleClick}>点赞</button>;
}

function LikeButtonFixed() {
  // ✅ 需要哪些状态，在渲染顶层「预报」好
  const [liked, setLiked] = useState(false);
  const [popup, setPopup] = useState(false);

  function handleClick() {
    setLiked(true);  // 事件处理器只负责「改值」，不负责「建槽」
    setPopup(true);
  }

  return <button onClick={handleClick}>点赞</button>;
}

setCount(count + 1);   // ❌ 两次都读到本次渲染的 count = 0
setCount(count + 1);   //    结果只 +1，不是 +2

setCount(c => c + 1);  // ✅ 更新函数排队依次执行
setCount(c => c + 1);  //    永远基于「最新值」，结果 +2

useEffect(() => {
  const timer = setInterval(() => setCount(count + 1), 1000);
  return () => clearInterval(timer);
}, []);   // ❌ 闭包锁死首帧的 count = 0 → 界面永远卡在 1

// ✅ 更新函数拿「最新值」，不经过闭包里的旧 count
useEffect(() => {
  const timer = setInterval(() => setCount(c => c + 1), 1000);
  return () => clearInterval(timer);
}, []);

// ❌ 引用没变 → React 认为 state 没变 → 界面不动
user.age = 26;
setUser(user);
todos.push(newTodo);
setTodos(todos);

// ✅ 造新对象 / 新数组，引用变了才触发渲染
setUser({ ...user, age: 26 });
setTodos([...todos, newTodo]);

// ❌ total 是 items 的派生值，却单独占一个 state，还要用 effect 同步
const [items, setItems] = useState<Item[]>([]);
const [total, setTotal] = useState(0);
useEffect(() => {
  setTotal(items.reduce((sum, i) => sum + i.price, 0));
}, [items]);       // items 变 → 先渲染旧 total，再 setState 再渲染一次

// ✅ 渲染时直接算：items 一变，total 天然就是新的
const total = items.reduce((sum, i) => sum + i.price, 0);

// ❌ 撒谎：effect 里用了 roomId，依赖却写 []
useEffect(() => {
  const conn = createConnection(roomId);
  conn.connect();
  return () => conn.disconnect();
}, []);
// 症状：切换到别的房间，连上的还是旧房间

// ✅ 用了谁，就声明谁
useEffect(() => {
  const conn = createConnection(roomId);
  conn.connect();
  return () => conn.disconnect();
}, [roomId]);

// ❌ 只订阅、不退订：组件卸载后监听器还挂在 window 上
//    轻则内存泄漏，重则对已卸载组件 setState 报错
useEffect(() => {
  window.addEventListener("resize", onResize);
}, []);

// ✅ 成对出现：订阅/退订、连接/断开、起定时器/清定时器
useEffect(() => {
  window.addEventListener("resize", onResize);
  return () => window.removeEventListener("resize", onResize);
}, []);

// 形态一：渲染期间 setState —— 渲染 → setState → 再渲染 → 直到报错
function OrderTotal({ price, count }: { price: number; count: number }) {
  const [total, setTotal] = useState(0);
  setTotal(price * count);   // ❌ 渲染函数体里直接 setState
  return <p>合计：{total}</p>;
}
// ✅ 这本来就是派生值问题（陷阱 5）——渲染时直接算
const total = price * count;

// 形态二：依赖「每渲染都新的引用」—— effect 狂跑，请求风暴
const params = { keyword };       // 每次渲染都是新对象
useEffect(() => {
  search(params).then(setResult);
}, [params]);                     // ❌ 依赖每次都「变了」

// ✅ 依赖原始值；确需传对象，用 useMemo 稳定引用（第 11 篇）
useEffect(() => {
  search({ keyword }).then(setResult);
}, [keyword]);

// ❌ key=index：删掉第一项后，李四「顶」到位置 0，
//    React 以为位置 0 还是张三那行 —— 行内状态全部错位
{todos.map((t, i) => (
  <TodoRow key={i} todo={t} />
))}

// ✅ key=稳定 id：无论怎么删 / 排 / 插，React 都认得「谁是谁」
{todos.map(t => (
  <TodoRow key={t.id} todo={t} />
))}