深入理解 React Hooks 的设计原理

Hooks 看起来是几个简单的函数调用，但背后依赖 React 内部的 Fiber 链表结构来记录状态。

为什么不能在条件语句里用 Hooks

每个组件的 Hooks 调用会按顺序存成一个链表，React 依赖调用顺序而不是变量名来匹配状态：

function useCustomHook() {
  const [state, setState] = useState(0); // 第 1 个 hook
  useEffect(() => {
    console.log(state);
  }, [state]); // 第 2 个 hook
}

如果某次渲染跳过了 useState，下一个 Hook 就会错位读取到别的状态。

useEffect 的执行时机

useEffect 的回调在浏览器完成绘制后异步执行，不会阻塞页面渲染，这也是它和 useLayoutEffect 的核心区别。

小结

• Hooks 的顺序即身份
• 副作用应该保持纯粹，避免在渲染阶段读写外部状态
• 自定义 Hook 本质上是逻辑复用的约定，而非新特性