FiberNode (函数组件)
  ├── memoizedState ──> Hook1 ──next──> Hook2 ──next──> Hook3 ──next──> null
  │                      │              │
  │                      │              └── memoizedState: 依赖数组 + effect 对象
  │                      └── memoizedState: state 值
  │                          queue: 更新队列（环形链表）
  └── ...

const hook = {
  memoizedState: null, // useState 存 state；useEffect 存 effect 对象；useMemo 存 [value, deps]
  baseState: null,     // 计算新 state 的基础值
  baseQueue: null,     // 上次渲染被跳过的更新（优先级不足时留下的）
  queue: null,         // 本次的更新队列
  next: null,          // 指向下一个 Hook，构成单向链表
};

// ===== 极简版实现：只演示"按下标取状态"这一核心机制 =====
let hookStates = []; // 相当于 fiber.memoizedState 链表
let hookIndex = 0;   // 相当于遍历链表的游标

function useState(initial) {
  const currentIndex = hookIndex; // 关键：靠"第几次调用"定位自己的槽位
  hookStates[currentIndex] =
    hookStates[currentIndex] === undefined ? initial : hookStates[currentIndex];

  const setState = (action) => {
    const prev = hookStates[currentIndex];
    hookStates[currentIndex] = typeof action === 'function' ? action(prev) : action;
    render(); // 触发重新渲染
  };

  hookIndex++; // 游标后移，下一个 Hook 用下一个槽位
  return [hookStates[currentIndex], setState];
}

function render() {
  hookIndex = 0; // 每次渲染都从头开始遍历，这就是"顺序必须稳定"的原因
  App();
}

// ❌ 错误写法：条件调用
function App() {
  const [count, setCount] = useState(0);
  if (count > 0) {
    // 第一次渲染 count===0，不执行；第二次 count===1，执行
    // 于是 name 在第一次渲染时占用槽位 1，第二次渲染时槽位 1 被 name 占用、
    // 而原本槽位 1 的 age 被挤到槽位 2 —— 整条链表错位
    const [name] = useState('kwai');
  }
  const [age, setAge] = useState(18);
}

// react-reconciler/src/ReactFiberHooks.js（简化）
function renderWithHooks(current, workInProgress, Component, props) {
  currentlyRenderingFiber = workInProgress;
  workInProgress.memoizedState = null; // 清空，准备重建链表
  ReactCurrentDispatcher.current =
    current === null ? HooksDispatcherOnMount : HooksDispatcherOnUpdate;

  const children = Component(props); // ← 只有这一行执行期间，Hook 才是合法的

  ReactCurrentDispatcher.current = ContextOnlyDispatcher; // 出了这里就报错
  return children;
}

function Panel({ visible, id }) {
  // ✅ Hook 无条件调用，条件写在内部
  const [detail, setDetail] = useState(null);

  useEffect(() => {
    if (!visible) return; // 条件写在 effect 内部
    fetchDetail(id).then(setDetail);
  }, [visible, id]);

  // ✅ 提前 return 必须放在所有 Hook 之后
  if (!visible) return null;
  return <div>{detail?.name}</div>;
}

// react-reconciler/src/ReactFiberHooks.js
function areHookInputsEqual(nextDeps, prevDeps) {
  if (prevDeps === null) return false; // 上次没传依赖 → 永远不相等 → 每次都执行
  for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
    if (is(nextDeps[i], prevDeps[i])) continue; // Object.is
    return false;
  }
  return true;
}

import { useState, useEffect } from 'react';

function EffectDemo() {
  const [count, setCount] = useState(0);
  const [other, setOther] = useState(0);

  // 情况一：不传依赖 —— 每次渲染后都跑
  useEffect(() => {
    console.log('[A] 每次渲染都执行, count =', count);
    return () => console.log('[A] 清理, 上一次的 count =', count);
  });

  // 情况二：空数组 —— 只在挂载后跑一次
  useEffect(() => {
    console.log('[B] 只在挂载时执行一次');
    const timer = setInterval(() => console.log('tick'), 1000);
    // 卸载时清理，必须写，否则组件卸载后定时器还在跑 → 内存泄漏
    return () => {
      console.log('[B] 卸载时清理');
      clearInterval(timer);
    };
  }, []);

  // 情况三：有依赖 —— count 变才跑，other 变不跑
  useEffect(() => {
    console.log('[C] count 变化时执行, count =', count);
    const controller = new AbortController();
    fetch(`/api/item/${count}`, { signal: controller.signal })
      .then((r) => r.json())
      .catch((e) => {
        if (e.name !== 'AbortError') throw e;
      });
    // 清理：取消上一次未完成的请求，避免竞态（老请求后返回覆盖新数据）
    return () => controller.abort();
  }, [count]);

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

[A] 清理, 上一次的 count = 0     ← 先清理旧的
[A] 每次渲染都执行, count = 0    ← 再执行新的

// ❌ 定时器里的 count 永远是 0
useEffect(() => {
  const t = setInterval(() => {
    setCount(count + 1); // 闭包捕获的是首次渲染的 count = 0
  }, 1000);
  return () => clearInterval(t);
}, []);

// ✅ 方案一：函数式更新，不依赖外部 count
useEffect(() => {
  const t = setInterval(() => setCount((c) => c + 1), 1000);
  return () => clearInterval(t);
}, []);

// ✅ 方案二：把 count 放进依赖（代价是每秒重建定时器）
useEffect(() => {
  const t = setInterval(() => setCount(count + 1), 1000);
  return () => clearInterval(t);
}, [count]);

// ✅ 方案三：用 ref 存最新值（适合"我要读最新值但不想重跑 effect"）
const latest = useRef(count);
latest.current = count;
useEffect(() => {
  const t = setInterval(() => console.log(latest.current), 1000);
  return () => clearInterval(t);
}, []);

// ❌ options 每次渲染都是新对象 → effect 每次都执行 → setState → 再渲染 → 死循环
function List({ pageSize }) {
  const options = { pageSize, sort: 'desc' };
  useEffect(() => {
    fetchList(options).then(setData);
  }, [options]);
}

// ✅ 依赖原始值
useEffect(() => {
  fetchList({ pageSize, sort: 'desc' }).then(setData);
}, [pageSize]);

// ✅ 或者用 useMemo 稳定引用
const options = useMemo(() => ({ pageSize, sort: 'desc' }), [pageSize]);

// 不传第二参数 —— 等于没优化，每次渲染都返回新函数
const f1 = useCallback(() => doSth(a));        // deps 为 undefined，永远判定"依赖变了"

// 空数组 —— 函数引用永远不变，但闭包里的 a 永远停留在首次渲染的值
const f2 = useCallback(() => doSth(a), []);    // ⚠️ stale closure

// 有依赖 —— a 变了才生成新函数，闭包里的 a 是最新的（推荐）
const f3 = useCallback(() => doSth(a), [a]);

React 渲染完成
  → commit mutation 阶段：真实 DOM 被修改
  → useLayoutEffect 同步执行（DOM 已更新，但屏幕还没画）  ← 可以读布局、改 DOM，不会闪烁
  → 浏览器 paint（用户看到画面）
  → useEffect 异步执行（下一帧或调度空闲时）              ← 不阻塞绘制

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

// ---------- 子组件：用 memo 包裹 ----------
const TodoItem = memo(function TodoItem({ todo, onToggle, style }) {
  console.log('渲染 TodoItem:', todo.id);
  return (
    <li style={style} onClick={() => onToggle(todo.id)}>
      {todo.done ? '✅' : '⬜'} {todo.text}
    </li>
  );
});

// ---------- 父组件 ----------
export default function TodoList() {
  const [todos, setTodos] = useState(() =>
    Array.from({ length: 1000 }, (_, i) => ({ id: i, text: `任务 ${i}`, done: false }))
  );
  const [keyword, setKeyword] = useState(''); // 与列表项渲染无关的高频状态

  // ✅ 用 useCallback 稳定回调引用
  // 依赖数组为空是安全的：这里用了函数式更新，没有捕获任何外部变量
  const handleToggle = useCallback((id) => {
    setTodos((prev) =>
      prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t))
    );
  }, []);

  // ✅ 用 useMemo 稳定对象引用（否则 style 每次都是新对象，memo 直接失效）
  const itemStyle = useMemo(() => ({ cursor: 'pointer', lineHeight: 1.8 }), []);

  // ✅ 昂贵计算用 useMemo 缓存：keyword 变才重算
  const filtered = useMemo(
    () => todos.filter((t) => t.text.includes(keyword)),
    [todos, keyword]
  );

  return (
    <>
      <input value={keyword} onChange={(e) => setKeyword(e.target.value)} />
      <ul>
        {filtered.map((todo) => (
          <TodoItem
            key={todo.id}
            todo={todo}       // 引用只在这一项被修改时才变（map 只重建被改的那项？不，见下）
            onToggle={handleToggle}
            style={itemStyle}
          />
        ))}
      </ul>
    </>
  );
}

// ❌ 反例 1：memo 了，但每次传新函数
<TodoItem onToggle={(id) => handleToggle(id)} />   // 内联箭头函数，每次都是新引用

// ❌ 反例 2：memo 了，但每次传新对象
<TodoItem style={{ color: 'red' }} config={{ a: 1 }} />

// ❌ 反例 3：memo 了，但传了 children
<Card>{<Foo />}</Card>   // children 是 React Element，每次 createElement 都是新对象

// ❌ 反例 4：useCallback 了，但父组件没有 memo 子组件
// useCallback 单独用对渲染性能没有任何帮助，反而多一次依赖比较

const Row = memo(
  function Row({ data }) {
    return <div>{data.name}</div>;
  },
  // 自定义比较函数：返回 true 表示"相等，跳过渲染"（注意与 shouldComponentUpdate 语义相反）
  (prevProps, nextProps) => prevProps.data.id === nextProps.data.id
);

先用 React DevTools Profiler 定位真实瓶颈
  → 能不能通过"状态下放 / 内容提升（children 作为 props 传入）"从结构上避免重渲染？
    → 能：用结构优化，零运行时成本，优先做
    → 不能：再上 memo + useCallback + useMemo，并用 Profiler 验证确实变快了

// ❌ keyword 每次变化，整棵子树都重渲染
function Page() {
  const [keyword, setKeyword] = useState('');
  return (
    <>
      <input value={keyword} onChange={(e) => setKeyword(e.target.value)} />
      <HeavyTree />   {/* 被迫跟着重渲染 */}
    </>
  );
}

// ✅ 把高频状态下放到子组件，或把重内容作为 children 传入
function Page() {
  return (
    <SearchBox>
      <HeavyTree />   {/* HeavyTree 的 Element 在 Page 里创建，SearchBox 内部 state 变化不会重建它 */}
    </SearchBox>
  );
}
function SearchBox({ children }) {
  const [keyword, setKeyword] = useState('');
  return (
    <>
      <input value={keyword} onChange={(e) => setKeyword(e.target.value)} />
      {children}      {/* children 引用不变，React 复用整棵子树，无需 memo */}
    </>
  );
}

import { useState, useCallback } from 'react';

// ---------- 子组件：完全受控，自己不持有状态 ----------
function SearchInput({ value, placeholder, onChange, onSearch }) {
  return (
    <div>
      <input
        value={value}                                   // 父 → 子：props 下行
        placeholder={placeholder}
        onChange={(e) => onChange(e.target.value)}      // 子 → 父：回调上行
        onKeyDown={(e) => e.key === 'Enter' && onSearch(value)}
      />
      <button onClick={() => onSearch(value)}>搜索</button>
    </div>
  );
}

// ---------- 父组件：持有状态（状态提升） ----------
export default function SearchPage() {
  const [keyword, setKeyword] = useState('');
  const [list, setList] = useState([]);

  const handleSearch = useCallback(async (kw) => {
    const res = await fetch(`/api/search?q=${encodeURIComponent(kw)}`);
    setList(await res.json());
  }, []);

  return (
    <>
      <SearchInput
        value={keyword}
        placeholder="请输入关键词"
        onChange={setKeyword}      // 直接把 setter 传下去
        onSearch={handleSearch}
      />
      <ul>{list.map((it) => <li key={it.id}>{it.name}</li>)}</ul>
    </>
  );
}

import { forwardRef, useImperativeHandle, useRef, useState } from 'react';

// React 19 之前需要 forwardRef；React 19 起 ref 可以直接作为 props 传入函数组件
const FormModal = forwardRef(function FormModal(props, ref) {
  const [visible, setVisible] = useState(false);
  const inputRef = useRef(null);

  // 只暴露想给外部的 API，而不是整个 DOM / 整个组件内部
  useImperativeHandle(ref, () => ({
    open() {
      setVisible(true);
      // 等 DOM 更新后聚焦
      requestAnimationFrame(() => inputRef.current?.focus());
    },
    close() {
      setVisible(false);
    },
    validate() {
      return inputRef.current?.value.trim().length > 0;
    },
  }), []); // 依赖数组语义与 useMemo 一致

  if (!visible) return null;
  return (
    <div className="modal">
      <input ref={inputRef} />
      <button onClick={() => setVisible(false)}>关闭</button>
    </div>
  );
});

function Parent() {
  const modalRef = useRef(null);
  return (
    <>
      <button onClick={() => modalRef.current.open()}>打开弹窗</button>
      <button onClick={() => console.log(modalRef.current.validate())}>校验</button>
      <FormModal ref={modalRef} />
    </>
  );
}

import { createContext, useContext, useMemo, useState, useCallback } from 'react';

// 1. 拆分成"值 Context"和"操作 Context"，避免值变化时连带 dispatch 消费者一起重渲染
const ThemeStateContext = createContext(null);
const ThemeActionsContext = createContext(null);

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggle = useCallback(() => {
    setTheme((t) => (t === 'light' ? 'dark' : 'light'));
  }, []);

  // 2. actions 引用永远稳定 → 只用 toggle 的组件永远不会因为 theme 变化而重渲染
  const actions = useMemo(() => ({ toggle, setTheme }), [toggle]);

  return (
    <ThemeActionsContext.Provider value={actions}>
      {/* 3. value 直接传原始值，避免 {{ theme }} 这种每次新建对象的写法 */}
      <ThemeStateContext.Provider value={theme}>
        {children}
      </ThemeStateContext.Provider>
    </ThemeActionsContext.Provider>
  );
}

// 4. 封装自定义 Hook，顺带做"是否在 Provider 内"的校验
export function useTheme() {
  const ctx = useContext(ThemeStateContext);
  if (ctx === null) throw new Error('useTheme 必须在 ThemeProvider 内部使用');
  return ctx;
}
export function useThemeActions() {
  const ctx = useContext(ThemeActionsContext);
  if (ctx === null) throw new Error('useThemeActions 必须在 ThemeProvider 内部使用');
  return ctx;
}

// ---------- 深层组件直接消费，无需逐层传 props ----------
function DeepButton() {
  const theme = useTheme();
  const { toggle } = useThemeActions();
  return <button onClick={toggle}>当前主题：{theme}</button>;
}

import { useState, useRef, useEffect, useCallback, useMemo } from 'react';

/**
 * 倒计时 Hook
 * @param {number} initialSeconds 初始秒数
 * @param {object} options
 * @param {number} options.interval 刷新间隔（毫秒），默认 1000
 * @param {boolean} options.autoStart 是否自动开始，默认 true
 * @param {Function} options.onEnd 倒计时结束回调
 * @returns {{ seconds:number, isRunning:boolean, formatted:string,
 *             start:Function, pause:Function, reset:Function }}
 */
export function useCountdown(initialSeconds, options = {}) {
  const { interval = 1000, autoStart = true, onEnd } = options;

  const [seconds, setSeconds] = useState(initialSeconds);
  const [isRunning, setIsRunning] = useState(autoStart);

  // 用 ref 存 onEnd：这样 onEnd 变化不会导致 effect 重跑（否则使用方传内联函数就每次重建定时器）
  const onEndRef = useRef(onEnd);
  onEndRef.current = onEnd;

  // 用「结束时间戳」而不是「每次减 1」来计算，避免 setInterval 累积误差、
  // 以及页面切到后台被浏览器节流后时间不准的问题
  const endTimeRef = useRef(0);

  useEffect(() => {
    if (!isRunning || seconds <= 0) return;

    // 每次进入运行态，用当前剩余秒数重新锚定结束时间
    endTimeRef.current = Date.now() + seconds * 1000;

    const timer = setInterval(() => {
      const rest = Math.max(0, Math.ceil((endTimeRef.current - Date.now()) / 1000));
      setSeconds(rest);
      if (rest <= 0) {
        clearInterval(timer);
        setIsRunning(false);
        onEndRef.current?.(); // 读 ref 拿到最新回调，规避 stale closure
      }
    }, interval);

    // 清理：暂停、依赖变化、组件卸载时都会走到这里
    return () => clearInterval(timer);
    // 注意：这里故意不把 seconds 放进依赖，否则每秒重建定时器。
    // isRunning 从 false → true 时才需要重新锚定 endTime，这已由 isRunning 依赖覆盖。
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isRunning, interval]);

  const start = useCallback(() => setIsRunning(true), []);
  const pause = useCallback(() => setIsRunning(false), []);
  const reset = useCallback(
    (next = initialSeconds) => {
      setIsRunning(false);
      setSeconds(next);
    },
    [initialSeconds]
  );

  // 派生数据用 useMemo，而不是再开一个 state + useEffect
  const formatted = useMemo(() => {
    const m = String(Math.floor(seconds / 60)).padStart(2, '0');
    const s = String(seconds % 60).padStart(2, '0');
    return `${m}:${s}`;
  }, [seconds]);

  return { seconds, isRunning, formatted, start, pause, reset };
}

// ---------- 使用：短信验证码按钮 ----------
function SmsButton({ phone }) {
  const { seconds, isRunning, start } = useCountdown(60, { autoStart: false });

  const handleSend = async () => {
    await fetch('/api/sms', { method: 'POST', body: JSON.stringify({ phone }) });
    start();
  };

  return (
    <button disabled={isRunning} onClick={handleSend}>
      {isRunning ? `${seconds} 秒后重发` : '获取验证码'}
    </button>
  );
}

import { useState, useRef, useCallback, useEffect } from 'react';

/**
 * 请求 Hook
 * @param {(params:any, signal:AbortSignal) => Promise<any>} service 请求函数
 * @param {object} options
 * @param {boolean} options.manual 是否手动触发，默认 false（挂载即请求）
 * @param {any[]}   options.deps 自动重新请求的依赖
 * @param {any}     options.defaultParams 首次自动请求的参数
 * @param {Function} options.onSuccess / options.onError
 */
export function useRequest(service, options = {}) {
  const {
    manual = false,
    deps = [],
    defaultParams,
    onSuccess,
    onError,
  } = options;

  const [state, setState] = useState({
    data: undefined,
    error: undefined,
    loading: !manual,
  });

  // 只保留最新一次请求的"令牌"，用于竞态判定
  const requestIdRef = useRef(0);
  const controllerRef = useRef(null);
  const mountedRef = useRef(true);

  // 把可能变化的外部依赖存进 ref，保证 run 的引用可以稳定
  const serviceRef = useRef(service);
  serviceRef.current = service;
  const onSuccessRef = useRef(onSuccess);
  onSuccessRef.current = onSuccess;
  const onErrorRef = useRef(onError);
  onErrorRef.current = onError;

  useEffect(() => {
    mountedRef.current = true;
    return () => {
      mountedRef.current = false;
      controllerRef.current?.abort(); // 卸载时取消在途请求
    };
  }, []);

  const run = useCallback(async (params) => {
    // 1. 取消上一次未完成的请求（省流量、也防止服务端压力）
    controllerRef.current?.abort();
    const controller = new AbortController();
    controllerRef.current = controller;

    // 2. 自增请求 id，只有 id 最大的那次结果才允许写入 state（解决竞态）
    const id = ++requestIdRef.current;

    setState((s) => ({ ...s, loading: true, error: undefined }));

    try {
      const data = await serviceRef.current(params, controller.signal);
      // 3. 三重防护：组件已卸载 / 已被更新的请求覆盖 / 已被取消
      if (!mountedRef.current || id !== requestIdRef.current) return;
      setState({ data, error: undefined, loading: false });
      onSuccessRef.current?.(data, params);
      return data;
    } catch (error) {
      if (error.name === 'AbortError') return; // 主动取消，不算错误
      if (!mountedRef.current || id !== requestIdRef.current) return;
      setState({ data: undefined, error, loading: false });
      onErrorRef.current?.(error, params);
    }
  }, []); // 依赖为空，run 引用永久稳定，使用方可以安心放进 effect 依赖

  const refresh = useCallback(() => run(defaultParams), [run, defaultParams]);

  const cancel = useCallback(() => {
    controllerRef.current?.abort();
    requestIdRef.current++; // 让在途结果失效
    setState((s) => ({ ...s, loading: false }));
  }, []);

  // 自动请求
  useEffect(() => {
    if (manual) return;
    run(defaultParams);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);

  return { ...state, run, refresh, cancel };
}

// ---------- 使用 ----------
function UserDetail({ userId }) {
  const { data, loading, error, refresh } = useRequest(
    (id, signal) => fetch(`/api/user/${id}`, { signal }).then((r) => r.json()),
    { deps: [userId], defaultParams: userId }
  );

  if (loading) return <Skeleton />;
  if (error) return <Error onRetry={refresh} />;
  return <div>{data.name}</div>;
}

□ 命名以 use 开头
□ 内部 Hook 只在顶层调用，无条件分支
□ 返回的函数用 useCallback 包裹，引用稳定
□ 派生数据用 useMemo，不用额外 state + useEffect
□ 所有副作用（定时器 / 订阅 / 事件监听 / 请求）都有对应清理
□ 处理竞态：异步结果落地前校验"我还是最新的那次吗"
□ 回调型参数（onSuccess 等）用 ref 存，避免污染依赖数组
□ 对外 API 语义化，隐藏内部实现细节
□ SSR 安全：不在渲染期间访问 window / document

// React 15 的 mountComponent 本质是这样的递归（示意）
function reconcile(element, parentInstance) {
  const instance = instantiate(element);
  const dom = instance.mount();          // 创建 DOM
  parentInstance.appendChild(dom);
  element.props.children.forEach((child) =>
    reconcile(child, instance)           // ← 递归，调用栈由 JS 引擎管理，无法中断
  );
}

// ---------- React Element：createElement 的返回值 ----------
// <div className="box"><span key="a">hi</span></div> 编译后
const element = {
  $$typeof: Symbol.for('react.element'), // 防 XSS 的标记，JSON 无法伪造 Symbol
  type: 'div',                            // 'div' | 函数组件 | 类组件 | Symbol(Fragment)
  key: null,
  ref: null,
  props: { className: 'box', children: { /* 又一个 element */ } },
};
// 特点：不可变、轻量、每次 render 都重新创建、只描述"要渲染什么"，不含任何状态

// ---------- Fiber Node：工作单元 ----------
function FiberNode(tag, pendingProps, key, mode) {
  // ===== 静态属性：描述"我是什么" =====
  this.tag = tag;                 // FunctionComponent=0 / ClassComponent=1 / HostComponent=5 ...
  this.key = key;
  this.elementType = null;
  this.type = null;               // 对应 element.type
  this.stateNode = null;          // HostComponent → 真实 DOM；ClassComponent → 类实例

  // ===== 链表指针：把树变成可循环遍历的结构 =====
  this.return = null;             // 父 Fiber（"归"的时候回到哪里）
  this.child = null;              // 第一个子 Fiber
  this.sibling = null;            // 下一个兄弟 Fiber
  this.index = 0;                 // 在兄弟中的位置，diff 时用来判断是否需要移动

  // ===== 工作单元属性：描述"这次要干什么" =====
  this.pendingProps = pendingProps; // 本次新的 props
  this.memoizedProps = null;        // 上次渲染完成后的 props
  this.updateQueue = null;          // 更新队列（类组件的 setState / 函数组件的 effect 链表）
  this.memoizedState = null;        // 类组件 → state；函数组件 → Hook 单向链表的头节点
  this.dependencies = null;         // 消费的 Context 列表

  // ===== 副作用与调度 =====
  this.flags = NoFlags;           // 本节点的副作用标记：Placement/Update/Deletion/Passive...
  this.subtreeFlags = NoFlags;    // 子树是否有副作用（用于 commit 阶段快速跳过整棵干净子树）
  this.deletions = null;          // 需要删除的子 Fiber
  this.lanes = NoLanes;           // 本节点待处理更新的优先级
  this.childLanes = NoLanes;      // 子树待处理更新的优先级

  // ===== 双缓存 =====
  this.alternate = null;          // 指向另一棵树中的对应节点
}

        App
       /   \
    Header  List
             |
          Item ── Item ── Item

App.child = Header
Header.sibling = List,  Header.return = App
List.child = Item1,     List.return = App
Item1.sibling = Item2,  Item1.return = List

// 可中断的工作循环：每处理完一个 Fiber 就检查是否该让出主线程
function workLoopConcurrent() {
  while (workInProgress !== null && !shouldYield()) {
    //                                ↑ 关键：Scheduler 判断当前时间片（5ms）是否用完
    performUnitOfWork(workInProgress);
  }
}

// 同步模式没有 shouldYield，一口气做完
function workLoopSync() {
  while (workInProgress !== null) {
    performUnitOfWork(workInProgress);
  }
}

function performUnitOfWork(unitOfWork) {
  const current = unitOfWork.alternate;
  // "递"阶段：根据新 props 计算，创建/复用子 Fiber，返回第一个子节点
  let next = beginWork(current, unitOfWork, renderLanes);
  unitOfWork.memoizedProps = unitOfWork.pendingProps;

  if (next === null) {
    // 没有子节点了 → 进入"归"阶段
    completeUnitOfWork(unitOfWork);
  } else {
    workInProgress = next;
  }
}

function completeUnitOfWork(unitOfWork) {
  let completedWork = unitOfWork;
  do {
    // "归"阶段：创建真实 DOM（离屏）、处理 props、把子树的 flags 向上冒泡
    completeWork(completedWork.alternate, completedWork, renderLanes);

    const siblingFiber = completedWork.sibling;
    if (siblingFiber !== null) {
      workInProgress = siblingFiber; // 有兄弟，转去处理兄弟的"递"
      return;
    }
    completedWork = completedWork.return; // 没兄弟，回到父节点继续"归"
    workInProgress = completedWork;
  } while (completedWork !== null);
}

首屏（mount）：
  fiberRoot.current ──> HostRootFiber(current，空)
                          ↕ alternate
                        HostRootFiber(workInProgress) ──> 构建整棵新树
  commit 后：fiberRoot.current = workInProgress 树

更新（update）：
  fiberRoot.current ──> 树 A（屏幕上显示的）
                          ↕ alternate
                        树 B（复用上一次的那棵，作为新的 workInProgress）
  构建完成 commit 后：fiberRoot.current = 树 B
  下一次更新时，树 A 又成为 workInProgress —— 两棵树交替复用，避免每次都新建全部对象

// 创建/复用 workInProgress 节点
function createWorkInProgress(current, pendingProps) {
  let workInProgress = current.alternate;
  if (workInProgress === null) {
    // 首次：新建一个，并与 current 建立 alternate 双向指向
    workInProgress = createFiber(current.tag, pendingProps, current.key, current.mode);
    workInProgress.stateNode = current.stateNode; // 复用真实 DOM，不重新创建
    workInProgress.alternate = current;
    current.alternate = workInProgress;
  } else {
    // 复用上一棵树的节点对象，只重置本次需要重算的字段（对象复用，减少 GC 压力）
    workInProgress.pendingProps = pendingProps;
    workInProgress.type = current.type;
    workInProgress.flags = NoFlags;
    workInProgress.subtreeFlags = NoFlags;
    workInProgress.deletions = null;
  }
  // 从 current 同步不变的状态
  workInProgress.child = current.child;
  workInProgress.memoizedProps = current.memoizedProps;
  workInProgress.memoizedState = current.memoizedState;
  workInProgress.updateQueue = current.updateQueue;
  workInProgress.lanes = current.lanes;
  workInProgress.childLanes = current.childLanes;
  return workInProgress;
}

① 触发更新
   this.setState / useState 的 dispatch / root.render
     → 创建 Update 对象，挂到对应 Fiber 的 updateQueue（环形链表）
     → markUpdateLaneFromFiberToRoot：从触发节点沿 return 指针向上,
        把 lane 记录到每一层的 childLanes，一直到 FiberRoot
     → scheduleUpdateOnFiber → ensureRootIsScheduled

② 调度（Scheduler）
   根据 lane 算出优先级 → Scheduler.scheduleCallback(priority, performConcurrentWorkOnRoot)
   Scheduler 用 MessageChannel 产生宏任务（不是 requestIdleCallback：兼容性差、触发不稳定）
   同步优先级（如离散事件、flushSync）走 performSyncWorkOnRoot，不可中断

③ Render / Reconciler 阶段  ★可中断★
   renderRootConcurrent → workLoopConcurrent
     beginWork（递）：
       - 判断能否 bailout（props 全等 && 没有本节点的更新 && 子树无更新 lane）
       - 不能则调用组件函数 / render()，得到新的 children Element
       - reconcileChildren：diff，生成/复用子 Fiber，打上 Placement / Update / Deletion 标记
     completeWork（归）：
       - HostComponent：createInstance 创建离屏 DOM，appendAllChildren 拼接子 DOM
       - diffProperties 计算属性差异，存入 updateQueue
       - bubbleProperties：把子树的 flags 冒泡到 subtreeFlags
   结束后得到一棵带完整副作用标记的 workInProgress 树（finishedWork）
   ▲ 这个阶段是纯计算，没有操作真实 DOM，所以中断/丢弃/重跑都安全
   ▲ 也正因为可能重跑，render 阶段的代码必须是纯的（这就是 StrictMode 双调用要暴露的问题）

④ Commit 阶段  ★同步、不可中断★
   commitRoot 分三个子阶段：
   a. before mutation：读取变更前的 DOM 状态
      - 类组件 getSnapshotBeforeUpdate
      - 调度 useEffect 的异步执行（scheduleCallback(NormalPriority, flushPassiveEffects)）
   b. mutation：真正操作 DOM
      - Placement：插入/移动节点     - Update：更新属性、文本
      - Deletion：删除节点，同时执行 useLayoutEffect 的清理函数、componentWillUnmount
      - 【这一步之后切换 fiberRoot.current = finishedWork】
        切换点选在 mutation 之后、layout 之前：保证 componentWillUnmount 里读到的是旧树，
        而 componentDidMount/Update 与 useLayoutEffect 里读到的是新树
   c. layout：DOM 已更新但浏览器还没绘制
      - componentDidMount / componentDidUpdate
      - useLayoutEffect 的回调（同步执行，会阻塞绘制）
      - ref 的赋值
   → 浏览器 paint
   → useEffect 的回调此时才被异步执行

// React 17 / React 18 legacy 模式：同步渲染，无并发能力
ReactDOM.render(<App />, container);

// React 18 concurrent 模式：开启可中断渲染 + 自动批处理
import { createRoot } from 'react-dom/client';
createRoot(container).render(<App />);

// react-reconciler/src/ReactFiberLane.js（节选）
export const SyncLane            = 0b0000000000000000000000000000010;
export const InputContinuousLane = 0b0000000000000000000000000001000;
export const DefaultLane         = 0b0000000000000000000000000100000;
export const TransitionLane1     = 0b0000000000000000000000001000000;
// ... TransitionLane1..16
export const RetryLane1          = 0b0000000010000000000000000000000;
export const IdleLane            = 0b0100000000000000000000000000000;
export const OffscreenLane       = 0b1000000000000000000000000000000;

低优先级 transition 渲染进行到一半（workInProgress 停在某个节点）
  → 用户点击按钮，产生 SyncLane 更新
  → ensureRootIsScheduled 发现新 lane 优先级更高
  → 丢弃当前的 workInProgress 树（不是保存，是丢弃！因为状态可能已经不一致）
  → 从根节点重新开始，以高优先级 lane 渲染
  → 高优先级 commit 完成
  → 剩余的 transition lane 重新调度，从头再渲染一次

import { useState, useTransition, memo } from 'react';

const HugeList = memo(function HugeList({ keyword, items }) {
  // 故意做一个昂贵的渲染
  const filtered = items.filter((it) => it.name.includes(keyword));
  return (
    <ul>
      {filtered.map((it) => (
        <li key={it.id}>{it.name}</li>
      ))}
    </ul>
  );
});

export default function SearchPage({ items }) {
  const [input, setInput] = useState('');       // 紧急状态：输入框的值
  const [keyword, setKeyword] = useState('');   // 非紧急状态：用于过滤列表
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    const value = e.target.value;
    setInput(value);                            // 紧急更新：立刻反映到输入框，绝不能卡

    startTransition(() => {
      setKeyword(value);                        // 非紧急更新：可被打断、可被丢弃
    });
  };

  return (
    <>
      <input value={input} onChange={handleChange} />
      {/* isPending 让我们能给一个"正在更新"的视觉反馈，而不是白屏或卡死 */}
      <div style={{ opacity: isPending ? 0.5 : 1 }}>
        <HugeList keyword={keyword} items={items} />
      </div>
    </>
  );
}

function Results({ keyword }) {
  // deferredKeyword 会"滞后"于 keyword：紧急渲染用旧值，空闲时再用新值渲染一次
  const deferredKeyword = useDeferredValue(keyword);
  const isStale = keyword !== deferredKeyword;

  return (
    <div style={{ opacity: isStale ? 0.6 : 1 }}>
      <HugeList keyword={deferredKeyword} />
    </div>
  );
}

<Suspense fallback={<Skeleton />}>
  <Comments postId={id} />
</Suspense>

// app/posts/[id]/page.jsx —— 默认就是服务端组件（Next.js App Router）
// 没有 'use client'，所以这段代码永远不会出现在浏览器的 bundle 里
import { db } from '@/lib/db';
import { marked } from 'marked';       // 一个 100KB 的 markdown 库，客户端零负担
import LikeButton from './LikeButton'; // 客户端组件

export default async function PostPage({ params }) {
  // ✅ 服务端组件可以是 async 函数，直接 await
  // ✅ 可以直接访问数据库 / 文件系统 / 内部服务，无需暴露 API 接口
  // ✅ 密钥、连接串留在服务端，不会泄漏
  const post = await db.post.findUnique({ where: { id: params.id } });
  const html = marked(post.content);

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: html }} />
      {/* 把服务端取到的数据作为 props 传给客户端组件（props 必须可序列化） */}
      <LikeButton postId={post.id} initialCount={post.likes} />
    </article>
  );
}

// app/posts/[id]/LikeButton.jsx
'use client'; // ← 边界指令：这个文件及其 import 的模块会进客户端 bundle

import { useState } from 'react';

export default function LikeButton({ postId, initialCount }) {
  const [count, setCount] = useState(initialCount); // 只有客户端组件能有状态
  return <button onClick={() => setCount((c) => c + 1)}>👍 {count}</button>;
}

// ① 同层比较：跨层级移动不会复用
// 更新前
<div>
  <Counter />   {/* 有内部 state */}
</div>
// 更新后
<div>
  <span>
    <Counter />  {/* 层级变了 → 旧的 Counter 被卸载（state 丢失），新的重新挂载 */}
  </span>
</div>

// ② 类型不同直接重建
<div><Counter /></div>  →  <p><Counter /></p>
// div 和 p 的 type 不同 → 整棵子树销毁重建，Counter 的 state 丢失

// ③ 类型相同则复用 DOM，只更新变化的属性
<div className="a" title="x" />  →  <div className="b" title="x" />
// 复用同一个 DOM 节点，只执行 dom.className = 'b'

// ❌ 在组件内部定义组件
function Parent() {
  function Child() { return <input />; }  // 每次 Parent 渲染，Child 都是一个全新的函数
  return <Child />;                       // type 每次都不同 → 每次都卸载重建 → input 失焦、state 丢失
}

function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren, lanes) {
  let resultingFirstChild = null;
  let previousNewFiber = null;
  let oldFiber = currentFirstChild;
  let lastPlacedIndex = 0;   // 「最后一个可以保持不动的旧节点」在旧列表中的下标
  let newIdx = 0;

  // ===== 第一轮：从左到右逐个比较同下标的新旧节点 =====
  for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
    const newFiber = updateSlot(returnFiber, oldFiber, newChildren[newIdx], lanes);
    if (newFiber === null) break;   // key 不同 → 无法就地复用，跳出第一轮
    // ... 挂接链表
    lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
    previousNewFiber = newFiber;
    oldFiber = oldFiber.sibling;
  }

  // ===== 第二轮的三种收尾情况 =====
  // 情况 A：新节点遍历完了 → 剩下的旧节点全部删除
  if (newIdx === newChildren.length) {
    deleteRemainingChildren(returnFiber, oldFiber);
    return resultingFirstChild;
  }

  // 情况 B：旧节点遍历完了 → 剩下的新节点全部插入
  if (oldFiber === null) {
    for (; newIdx < newChildren.length; newIdx++) {
      const newFiber = createChild(returnFiber, newChildren[newIdx], lanes);
      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
      // ... 挂接
    }
    return resultingFirstChild;
  }

  // 情况 C：新旧都有剩余（说明发生了移动/乱序）
  //   把剩余旧节点放进 Map<key ?? index, fiber>，然后遍历剩余新节点去 Map 里捞
  const existingChildren = mapRemainingChildren(returnFiber, oldFiber);
  for (; newIdx < newChildren.length; newIdx++) {
    const newFiber = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx], lanes);
    if (newFiber !== null) {
      if (newFiber.alternate !== null) {
        existingChildren.delete(newFiber.key === null ? newIdx : newFiber.key);
      }
      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
    }
    // ... 挂接
  }
  // Map 里没被复用的旧节点全部删除
  existingChildren.forEach((child) => deleteChild(returnFiber, child));
  return resultingFirstChild;
}

// 判断是否需要移动：React 只标记"向右移动"
function placeChild(newFiber, lastPlacedIndex, newIndex) {
  newFiber.index = newIndex;
  const current = newFiber.alternate;
  if (current !== null) {
    const oldIndex = current.index;
    if (oldIndex < lastPlacedIndex) {
      // 这个节点在旧列表中的位置，比"已确定不动的最右边界"还靠左 → 需要移动
      newFiber.flags |= Placement;
      return lastPlacedIndex;
    }
    return oldIndex;              // 不需要移动，更新右边界
  }
  newFiber.flags |= Placement;    // 全新节点，需要插入
  return lastPlacedIndex;
}

// 旧：['B', 'C']            新：['A', 'B', 'C']
// 用 index 作 key：
//   key=0: 'B' → 'A'   复用节点，改文本
//   key=1: 'C' → 'B'   复用节点，改文本
//   key=2: 无  → 'C'   新建节点
//   结果：2 次文本更新 + 1 次插入

// 用 id 作 key：
//   'B'、'C' 完全复用，只在头部插入一个 'A'
//   结果：1 次插入

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: '写周报' },
    { id: 2, text: '改 bug' },
  ]);

  const addFirst = () =>
    setTodos((prev) => [{ id: 3, text: '开会' }, ...prev]); // 插到最前面

  return (
    <>
      <button onClick={addFirst}>头部插入</button>
      {todos.map((todo, index) => (
        // ❌ 用 index 做 key
        <div key={index}>
          {todo.text}
          {/* 非受控输入框，值存在真实 DOM 里，不受 React 数据流管理 */}
          <input defaultValue="" placeholder="备注" />
          {/* 子组件有自己的 state */}
          <Checkbox />
        </div>
      ))}
    </>
  );
}

// 旧：[{id:1,'A'}, {id:2,'B'}, {id:3,'C'}]   删除 id=2
// 新：[{id:1,'A'}, {id:3,'C'}]
// 用 index：key=0 'A'→'A'（不变）；key=1 'B'→'C'（复用了 B 的 DOM 和状态，只改文本！）；key=2 删除
//   → B 的 input 内容、勾选状态跑到了 C 这一行
// 用 id：  精确删除 id=2 的节点，A、C 完全不动

// 点击表头排序：[A,B,C] → [C,B,A]
// 用 index：三行的 DOM 全部原地复用，只把文本换了一遍
//   → 每行的展开状态、勾选状态、动画完全错乱；有过渡动画的话看不到"移动"效果，只看到内容突变
// 过滤同理：筛选条件一变，下标与数据的对应关系整体错位

// ✅ 最好：后端返回的稳定唯一 id
{list.map((item) => <Row key={item.id} data={item} />)}

// ✅ 次选：能唯一标识业务实体的字段组合
{list.map((item) => <Row key={`${item.type}-${item.code}`} data={item} />)}

// ✅ 数据本身没有 id 时：在数据进入 state 的那一刻生成并固化 id，而不是在渲染时生成
const [list, setList] = useState(() => raw.map((it) => ({ ...it, _key: crypto.randomUUID() })));

// ⚠️ key 只需在「同一父节点的兄弟之间」唯一，不需要全局唯一

// 切换用户时，希望表单内部的所有状态完全重置
<ProfileForm key={userId} userId={userId} />
// userId 变化 → key 变化 → React 认为是不同的组件 → 卸载旧的、挂载新的 → state 全部重置
// 这比在组件内写 useEffect(() => resetAllStates(), [userId]) 干净得多，也是官方推荐做法