React Hooks 原理：链表存储与闭包陷阱

React Hooks 依赖函数组件每次渲染时按固定顺序调用的特性，其内部通过链表将 Hook 状态与组件 Fiber 节点关联。

一、Hook 链表结构

每个函数组件对应一个 memoizedState 链表，每个节点保存 state、queue 与 next 指针。这也是 Hooks 不能在条件语句中调用的根本原因：顺序错乱会导致状态与 Hook 错位。

二、闭包陷阱

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      console.log(count); // 永远打印初始值 0
    }, 1000);
    return () => clearInterval(timer);
  }, []); // 依赖数组为空，闭包捕获了首次渲染的 count
}

解决方案：将 count 加入依赖数组，或使用 useRef 保存最新值，或改用函数式更新 setCount(c => c + 1)。