深入理解 React Hooks 原理

React Hooks 是 React 16.8 引入的新特性，它允许你在不编写 class 的情况下使用 state 以及其他的 React 特性。

Fiber 架构与 Hooks

Hooks 的实现严重依赖于 React 的 Fiber 架构 。每个组件实例对应一个 Fiber 节点，而 Hooks 的状态则是存储在 Fiber 节点的 memoizedState 链表中的。

💡 Fiber 本质上是一个 JavaScript 对象，它描述了组件树中的一个工作单元。每次渲染时，React 会遍历 Fiber 树来决定需要更新哪些节点。

useState 的工作流程

当我们调用 useState 时，React 内部做了什么？

function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Xander');
  return (
    <div>
      <p>{name} 点击了 {count} 次</p>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
    </div>
  );
}

为什么调用顺序很重要？

因为 React 依赖 Hooks 调用的顺序 来确定哪个 state 对应哪个 useState。

useEffect 的清理机制

useEffect 返回的清理函数会在下一次 effect 执行前 或组件卸载时调用。

最佳实践

1. 只在顶层调用 Hooks
2. 只在 React 函数中调用 Hooks
3. 使用 ESLint 插件
4. 合理拆分 state
5. 善用自定义 Hook