React Hooks

问题：函数组件每次渲染都会重新执行，局部变量无法跨渲染保持

function Counter() {
  let count = 0;          // 每次渲染都被重置为 0
  return <button onClick={() => count++}>{count}</button>;
}
// 永远显示 0

解决：把状态存在 Fiber 节点的 memoizedState 链表上，跨渲染持久保存

const [count, setCount] = useState(0);
// count 来自 Fiber.memoizedState，渲染间保持不变

// 自定义 Hook 最佳实践：单一职责 + 返回数组
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        if (!cancelled) setData(data);
      })
      .catch((err) => {
        if (!cancelled) setError(err);
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => {
      cancelled = true;
    }; // 清理函数防止内存泄漏
  }, [url]);

  return [data, loading, error]; // 返回数组，便于重命名
}

useEffect vs useLayoutEffect 的执行时序图：

  setState 触发
       │
       ▼
  ┌─────────────────────────────────────────────────────────────────┐
  │                     Render 阶段（可中断）                        │
  │  beginWork → completeWork → 生成 workInProgress 树              │
  └─────────────────────────────────────────────────────────────────┘
       │
       ▼
  ┌─────────────────────────────────────────────────────────────────┐
  │                     Commit 阶段（不可中断）                      │
  │                                                                 │
  │  ┌──────────────┬───────────────────┬────────────────────────┐ │
  │  │  Mutation    │    Layout         │     Passive Effects    │ │
  │  │  DOM 插入/   │ useLayoutEffect   │      useEffect         │ │
  │  │  更新/删除    │ (同步执行)         │    (异步调度)           │ │
  │  └──────────────┴───────────────────┴────────────────────────┘ │
  │                   ↑                     ↑                       │
  │                   │                     │                       │
  │             DOM 已更新              浏览器已绘制                  │
  │             浏览器尚未绘制          用户已看到新 UI               │
  └─────────────────────────────────────────────────────────────────┘

  实际执行时序：
  ─────────────────────────────────────────────────────────────→ 时间
  │                    │                      │
  │ DOM 更新完成        │ useLayoutEffect      │ useEffect
  │                    │ 同步执行（阻塞绘制）    │ 通过 MessageChannel
  │                    │ 可以测量 DOM 尺寸      │ 异步执行（不阻塞）
  │                    │ 可以同步修改样式        │ 浏览器可能已绘制一帧
  │                    │                      │
  │                    ↓                      ↓
  │              浏览器绘制开始            如果样式不对
  │              看到正确的 UI            会闪烁一帧

// useEffect：浏览器绘制后异步执行（通过 MessageChannel 调度）
useEffect(() => {
  // 此时浏览器可能已经绘制了一帧
  // 适合：数据获取、订阅、日志上报
  fetch("/api/data").then(setData);
}, [deps]);

// useLayoutEffect：DOM 修改后、浏览器绘制前同步执行
useLayoutEffect(() => {
  // 此时 DOM 已更新，但浏览器尚未绘制
  // 适合：测量 DOM 布局、同步修改样式避免闪烁
  const rect = ref.current.getBoundingClientRect();
  setPosition({ top: rect.bottom + 8, left: rect.left });
}, [deps]);

// 不该用的场景：简单计算
const fullName = useMemo(
  () => firstName + " " + lastName,
  [firstName, lastName],
);
// 不如直接写 const fullName = firstName + ' ' + lastName;

// 不该用的场景：不传给子组件的函数
const handleClick = useCallback(() => {
  console.log("clicked");
}, []);
// 如果 handleClick 不传给 memo 子组件，useCallback 没有意义

// 该用的场景：昂贵计算
const sorted = useMemo(
  () => [...items].sort((a, b) => a.price - b.price),
  [items],
);
// 10000 条数据排序，只在 items 变化时重新计算（复制后排序，不修改原数组）

// 该用的场景：传给 memo 子组件的回调
const handleClick = useCallback(
  (id) => {
    dispatch({ type: "SELECT", id });
  },
  [dispatch],
);
// 保持引用稳定，让 MemoizedChild 的 React.memo 生效

// useRef：修改不触发 re-render
const countRef = useRef(0);
countRef.current = 1; // 不触发 re-render

// useState：修改触发 re-render
const [count, setCount] = useState(0);
setCount(1); // 触发 re-render

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

// 1. 访问 DOM 元素
function Input() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  return <input ref={inputRef} />;
}

// 2. 保存不需触发渲染的值（定时器 ID、上一次的值）
function Timer() {
  const timerRef = useRef(null);
  const start = () => {
    timerRef.current = setInterval(() => {}, 1000);
  };
  const stop = () => {
    clearInterval(timerRef.current);
  };
  return (
    <>
      <button onClick={start}>开始</button>
      <button onClick={stop}>停止</button>
    </>
  );
}

// 3. 解决闭包陷阱（保存最新值供异步回调读取）
function Counter() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count; // 每次渲染都同步最新值

  useEffect(() => {
    const timer = setInterval(() => {
      console.log(countRef.current); // 总是最新值
    }, 1000);
    return () => clearInterval(timer);
  }, []); // 依赖为空，不会因为 count 变化而重建定时器

  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
}

Hooks 链表在 Fiber 节点上的存储结构图解：

  Fiber 节点（函数组件 Counter）
  ┌──────────────────────────────────────────────────────────┐
  │  tag: FunctionComponent                                   │
  │  type: Counter                                            │
  │  memoizedState: ──┐  ← Hook 链表的头节点                   │
  │  ...              │                                       │
  └───────────────────┼───────────────────────────────────────┘
                      ▼
              Hook1 (useState)
              ┌──────────────────┐
              │ memoizedState: 0 │  ← count 的当前值
              │ queue: {pending} │  ← 更新队列（环形链表）
              │ next: ──────────┼──┐
              └──────────────────┘  │
                                    ▼
              Hook2 (useState)
              ┌──────────────────┐
              │ memoizedState: ''│  ← name 的当前值
              │ queue: {pending} │
              │ next: ──────────┼──┐
              └──────────────────┘  │
                                    ▼
              Hook3 (useEffect)
              ┌──────────────────┐
              │ memoizedState: { │  ← effect 的依赖和回调
              │   deps: [count], │
              │   create: fn,    │
              │   destroy: fn    │
              │ }                │
              │ next: null       │  ← 链表结尾
              └──────────────────┘

  首次渲染时 React 的执行过程：
  ┌─────────────────────────────────────────────────────────────┐
  │ 1. useState(0)   → 创建 Hook1，挂到 fiber.memoizedState     │
  │ 2. useState('')  → 创建 Hook2，Hook1.next = Hook2           │
  │ 3. useEffect(fn) → 创建 Hook3，Hook2.next = Hook3           │
  └─────────────────────────────────────────────────────────────┘

  二次渲染时 React 的执行过程：
  ┌─────────────────────────────────────────────────────────────┐
  │ 1. useState(0)   → 读取 Hook1，返回 memoizedState (0)       │
  │ 2. useState('')  → 读取 Hook1.next = Hook2，返回 ''         │
  │ 3. useEffect(fn) → 读取 Hook2.next = Hook3，比较依赖         │
  │                                                              │
  │ 如果条件语句跳过了 Hook2：                                 │
  │ 1. useState(0)   → 读取 Hook1 正确                        │
  │ 2. useEffect(fn) → 读取 Hook1.next = Hook2 → 拿到 '' 错了！│
  └─────────────────────────────────────────────────────────────┘

// Hook 的数据结构（每行注释）
type Hook = {
  memoizedState: any,            // 当前值（useState 的值、useEffect 的依赖等）
  baseState: any,                // 基础状态（跳过中间更新时的起点）
  baseQueue: Update<any> | null, // 被跳过的低优先级更新队列
  queue: UpdateQueue<any> | null,// 更新队列（存放 setState 的更新）
  next: Hook | null,             // 指向下一个 Hook（链表的 next 指针）
};

// Fiber 节点上的 memoizedState 就是 Hook 链表的头节点
// fiber.memoizedState → Hook1(useState) → Hook2(useEffect) → Hook3(useMemo) → null
//
// 关键：React 按调用顺序遍历链表，所以 Hook 不能放在条件语句中！

setState 更新队列的环形链表图解：

  第一次 setCount(1)：
  queue.pending = ──┐
       ┌────────────┘
       ▼
  ┌──────────┐
  │ action:1 │
  │ next: ───┼──→ 自己（环形）
  └──────────┘

  第二次 setCount(c => c + 1)：
  queue.pending = ──┐
       ┌────────────┘
       ▼
  ┌──────────┐    ┌──────────┐
  │ action:  │    │ action:  │
  │ c => c+1 │    │ 1        │
  │ next: ───┼──→ │ next: ───┼──→ 回到 pending
  └──────────┘    └──────────┘

  Render 阶段批量消费：
  从 pending.next 开始，沿着 next 指针遍历
  action: 1 → 最终值: 1
  action: c => c+1 → 最终值: 2
  → 一次渲染拿到最终状态 2

// dispatch 的实现（简化版，每行注释）
function dispatchAction(fiber, queue, action) {
  const update = { action, next: null }; // 创建更新对象

  // 把更新加入环形链表队列
  const pending = queue.pending; // 队列尾部
  if (pending === null) {
    update.next = update; // 队列为空，自己指向自己（环形）
  } else {
    update.next = pending.next; // 新节点指向队列头部
    pending.next = update; // 尾部指向新节点
  }
  queue.pending = update; // 更新尾部指针

  // 调度一次渲染（不保证同步执行，由调度器按优先级安排）
  scheduleUpdateOnFiber(fiber);
  // Render 阶段会批量消费队列中的所有更新
}