请阐述 React Hooks 背后的实现机制，并说明它们与传统的生命周期方法在功能和用法上有哪些不同？
考察说明
考察对 React Hooks 底层实现的理解以及与传统生命周期方法的差异，评估对 React 内部机制的掌握程度。
回答思路
- 【回答框架 1】React Hooks 的核心是基于 Fiber 架构和链表结构。每个函数组件对应一个 Fiber 节点，Hooks 以链表形式挂在 Fiber 节点的 memoizedState 属性上。通过 next 指针连接，形成有序链表，保证了 Hook 的调用顺序和状态连续性。
- 【回答框架 2】Hook 的创建和更新过程：首次渲染时，mount 阶段的函数（如 mountState, mountEffect）会创建 Hook 对象并添加到链表尾部；更新时，update 阶段的函数从链表头部按顺序取出对应的 Hook，复用其状态，从而保证状态不丢失。
- 【回答框架 3】useState 的底层：状态被存储在 Hook 的 memoizedState 中，更新函数（如 dispatchAction）会触发更新，其核心是调度器 scheduleUpdateOnFiber，将更新放入队列，并进行异步渲染，以批量处理更新。
- 【回答框架 4】useEffect 的底层：副作用被收集到 Fiber 节点的 effectTag 上，在 commit 阶段统一执行。通过依赖数组 diff 来决定是否执行副作用，有利于优化避免不必要的操作。
- 【回答框架 5】与生命周期方法的区别：生命周期方法（如 componentDidMount, componentDidUpdate）只在类组件中可用，且是按阶段（mount/update/unmount）触发的；Hooks 提供更细粒度的控制，如 useEffect 可以在每次渲染后有条件地执行，而 useLayoutEffect 则在 DOM 变更后同步执行。Hooks 打破了生命周期的强制顺序，更灵活，但要求开发者遵循 Hooks 调用规则（顶层调用，不嵌套）。
- 【关键点 1】Hooks 基于单向链表存储状态，顺序敏感，因此不可条件调用。
- 【关键点 2】Fiber 节点上的 memoizedState 保存了 Hook 链表的头部。
- 【关键点 3】useEffect 在 commit 阶段异步执行，而 useLayoutEffect 在 DOM 变更后同步执行。
- 【关键点 4】生命周期方法属于类组件，而 Hooks 专用于函数组件，两者无法直接混用。
- 【易错点 1】不能依赖 Hooks 调用顺序的稳定性，否则在条件或循环中调用会导致状态错乱。
- 【易错点 2】生命周期方法与 Hooks 的对应关系并非一一对应，比如 componentDidMount 和 componentWillUnmount 可以合并到单个 useEffect 中，但需注意依赖数组的差别。
- 【易错点 3】对 useEffect 的依赖数组理解不足可能导致副作用执行时机不符合预期，例如空数组只执行一次，但若依赖了外部变量则可能错失更新。