为什么React Hooks不能用在if/for等条件/循环语句中

在 React 中，Hooks 不能直接用在 if、for 或其他条件/循环语句中。

原因

React 要求 Hooks 必须在组件的顶层被调用，不能在条件语句、循环或嵌套函数中使用。这背后有两个关键原因：

1. 保证 Hooks 的调用顺序一致

React 内部通过调用顺序来追踪每个 Hook 对应的 state。例如：

// 第一次渲染
useState('name')  // 第1个Hook → name state
useState(0)       // 第2个Hook → age state
useEffect(() => {}) // 第3个Hook → effect

// 第二次渲染时，React 按顺序分配：
// 第1个调用 → name state
// 第2个调用 → age state  
// 第3个调用 → effect

如果在 if 中使用 Hook：

// ❌ 错误示例
if (someCondition) {
  useState('name')  // 条件为 false 时，这个 Hook 不执行
}
useState(0)         // 原本的第2个 Hook 变成了第1个

这会导致 Hook 顺序错乱，React 无法正确匹配 state。

2. 避免状态混乱

// ❌ 错误示例
function MyComponent({ id }) {
  if (id) {
    useEffect(() => {
      fetchData(id)
    }, [id])  // 危险！Hook 在条件中
  }
  
  const [count, setCount] = useState(0)  // 顺序可能改变
  // ...
}

解决方案

在条件中使用 Hooks 的正确方式

// ✅ 将条件写在 Hook 内部
function MyComponent({ id }) {
  useEffect(() => {
    if (id) {
      fetchData(id)
    }
  }, [id])
  
  // 或者在条件中使用 Hook 的返回值
  const [count, setCount] = useState(0)
  
  if (count > 5) {
    return <div>超过限制</div>  // 可以在条件中提前 return
  }
  
  return <div>{count}</div>
}

在循环中使用

// ✅ 不能这样，但可以：
// 错误：在循环中调用 Hook
for (let i = 0; i < 5; i++) {
  useState(i)  // ❌ 错误
}

// 正确：将 Hook 的结果用于循环
const [items, setItems] = useState([])  // ✅ Hook 在顶层
const renderedItems = items.map(item => <Item key={item.id} />)

总结

• 可以做的：在 Hooks 内部写条件判断
• 不能做的：在条件语句或循环中调用 Hooks

这个规则是 React 的设计原则，目的是保持 Hooks 调用顺序的一致性，确保状态正确管理。

---

React Hooks 的完整管理方式

从源码层面详细讲解 React 如何管理 Hooks，包括创建、更新、销毁的完整流程。

1. 三层数据结构

React 使用三层结构管理 Hooks：

// 第一层：Fiber 节点（每个组件实例）
type Fiber = {
  memoizedState: Hook | null,        // 指向第一个 Hook
  updateQueue: UpdateQueue | null,    // 更新队列
  stateNode: any,                     // 真实 DOM 节点
  alternate: Fiber | null,            // 双缓冲副本
  // ... 其他 Fiber 属性
}

// 第二层：Hook 节点（链表结构）
type Hook = {
  memoizedState: any,          // 当前 state/effect
  baseState: any,              // 基础 state（用于计算）
  baseQueue: Update | null,    // 基础更新队列
  queue: UpdateQueue | null,    // 更新队列
  next: Hook | null,           // 指向下一个 Hook
}

// 第三层：更新队列（环形链表）
type UpdateQueue<S, A> = {
  pending: Update<A> | null,   // 待处理的更新（环形链表）
  interleaved: Update<A> | null,
  lanes: Lanes,
  dispatch: (A => mixed) | null,
  lastRenderedReducer: ((S, A) => S) | null,
  lastRenderedState: S | null,
}

type Update<A> = {
  action: A,                   // setState 传入的值
  next: Update<A> | null,      // 下一个更新
  priority: number,            // 优先级
  // ...
}

2. Hooks 的完整生命周期

阶段一：挂载阶段（Mount）

// React 内部实现（简化版）
function mountWorkInProgressHook(): Hook {
  const hook: Hook = {
    memoizedState: null,
    baseState: null,
    baseQueue: null,
    queue: null,
    next: null,
  }

  if (workInProgressHook === null) {
    // 第一个 Hook
    currentlyRenderingFiber.memoizedState = workInProgressHook = hook
  } else {
    // 后续 Hook，添加到链表末尾
    workInProgressHook = workInProgressHook.next = hook
  }
  
  return workInProgressHook
}

// mountState 实现
function mountState(initialState) {
  // 1. 创建 Hook 节点
  const hook = mountWorkInProgressHook()
  
  // 2. 初始化 state
  if (typeof initialState === 'function') {
    hook.memoizedState = initialState()
  } else {
    hook.memoizedState = initialState
  }
  
  // 3. 创建更新队列
  const queue = {
    pending: null,
    dispatch: null,
    lastRenderedReducer: basicStateReducer,
    lastRenderedState: initialState,
  }
  hook.queue = queue
  
  // 4. 创建 dispatch 函数
  const dispatch = (queue.dispatch = dispatchAction.bind(
    null,
    currentlyRenderingFiber,
    queue,
  ))
  
  return [hook.memoizedState, dispatch]
}

阶段二：更新阶段（Update）

// updateWorkInProgressHook - 复用旧 Hook
function updateWorkInProgressHook(): Hook {
  let nextCurrentHook: Hook | null
  
  if (currentHook === null) {
    // 获取 Fiber 对应的旧 Hook 链表的头节点
    const current = currentlyRenderingFiber.alternate
    if (current !== null) {
      nextCurrentHook = current.memoizedState
    } else {
      nextCurrentHook = null
    }
  } else {
    // 获取下一个旧 Hook
    nextCurrentHook = currentHook.next
  }
  
  // 关键检测：Hook 数量不一致
  if (nextCurrentHook === null) {
    throw new Error(
      'Rendered more hooks than during the previous render.'
    )
  }
  
  currentHook = nextCurrentHook
  
  // 创建新的 Hook 节点，复用旧数据
  const newHook: Hook = {
    memoizedState: currentHook.memoizedState,
    baseState: currentHook.baseState,
    baseQueue: currentHook.baseQueue,
    queue: currentHook.queue,
    next: null,
  }
  
  if (workInProgressHook === null) {
    currentlyRenderingFiber.memoizedState = workInProgressHook = newHook
  } else {
    workInProgressHook = workInProgressHook.next = newHook
  }
  
  return workInProgressHook
}

// updateState 实现
function updateState(initialState) {
  const hook = updateWorkInProgressHook()
  const queue = hook.queue
  const pending = queue.pending
  
  if (pending !== null) {
    // 处理所有待处理的更新
    let firstUpdate = pending.next
    let newState = hook.memoizedState
    
    // 遍历环形链表，应用所有更新
    let update = firstUpdate
    do {
      const action = update.action
      newState = action(newState)  // 或者直接赋值
      update = update.next
    } while (update !== null && update !== firstUpdate)
    
    hook.memoizedState = newState
    queue.pending = null
  }
  
  return [hook.memoizedState, queue.dispatch]
}

3. 双缓冲机制（Fiber 双缓冲）

React 使用双缓冲技术管理 Hooks 状态：

// 双缓冲工作原理
function renderWithHooks(current, workInProgress, Component, props) {
  // current: 当前屏幕显示的 Fiber 树（旧）
  // workInProgress: 正在构建的 Fiber 树（新）
  
  currentlyRenderingFiber = workInProgress
  
  // 重置 Hooks 状态
  workInProgressHook = null
  currentHook = null
  
  // 将 current 树的 Hooks 复制到 workInProgress
  if (current !== null) {
    currentHook = current.memoizedState  // 从旧树获取 Hooks
  }
  
  // 执行组件，内部会调用各种 Hooks
  let children = Component(props)
  
  // 渲染完成后，workInProgress 树成为新的 current
  finishRendering()
  
  return children
}

4. 状态更新的调度流程

// dispatchAction - setState 的实现
function dispatchAction(fiber, queue, action) {
  // 1. 创建更新对象
  const update = {
    action,
    next: null,
    priority: getCurrentPriorityLevel(),
  }
  
  // 2. 将更新添加到环形链表
  const pending = queue.pending
  if (pending === null) {
    // 第一个更新，指向自己形成环形
    update.next = update
  } else {
    update.next = pending.next
    pending.next = update
  }
  queue.pending = update
  
  // 3. 调度更新
  scheduleUpdateOnFiber(fiber)
}

// 处理更新队列
function processUpdateQueue(workInProgress) {
  let queue = workInProgress.updateQueue
  let pending = queue.pending
  
  if (pending !== null) {
    // 移除环形链表的循环引用
    const first = pending.next
    let last = pending
    let newState = workInProgress.memoizedState
    
    // 处理所有更新
    let update = first
    do {
      const action = update.action
      if (typeof action === 'function') {
        newState = action(newState)
      } else {
        newState = action
      }
      update = update.next
    } while (update !== null && update !== first)
    
    workInProgress.memoizedState = newState
    queue.pending = null  // 清空队列
  }
}

5. 不同类型 Hooks 的管理

useState 管理

function useState(initialState) {
  const dispatcher = resolveDispatcher()
  return dispatcher.useState(initialState)
}

// 不同阶段的 dispatcher
const HooksDispatcherOnMount = {
  useState: mountState,
  useEffect: mountEffect,
  useContext: readContext,
  // ...
}

const HooksDispatcherOnUpdate = {
  useState: updateState,
  useEffect: updateEffect,
  useContext: readContext,
  // ...
}

useEffect 管理

function mountEffect(create, deps) {
  const hook = mountWorkInProgressHook()
  const nextDeps = deps === undefined ? null : deps
  
  // Effect 有特殊的存储结构
  hook.memoizedState = {
    create,     // effect 函数
    destroy: null,  // cleanup 函数
    deps: nextDeps,
  }
  
  // 将 effect 添加到 fiber 的 updateQueue 中
  pushEffect(
    HookPassive | HookHasEffect,
    create,
    undefined,
    nextDeps,
  )
  
  return
}

function updateEffect(create, deps) {
  const hook = updateWorkInProgressHook()
  const nextDeps = deps === undefined ? null : deps
  const prevState = hook.memoizedState
  
  // 比较依赖是否变化
  if (prevState !== null && nextDeps !== null) {
    const prevDeps = prevState.deps
    if (areHookInputsEqual(nextDeps, prevDeps)) {
      // 依赖没变，跳过执行
      pushEffect(HookPassive, create, undefined, nextDeps)
      return
    }
  }
  
  // 依赖变化，需要执行
  hook.memoizedState = {
    create,
    destroy: prevState?.destroy,
    deps: nextDeps,
  }
  pushEffect(HookPassive | HookHasEffect, create, undefined, nextDeps)
}

6. 完整的执行示例

// 示例组件
function App() {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('John')
  
  useEffect(() => {
    console.log('Count changed:', count)
  }, [count])
  
  const handleClick = () => {
    setCount(count + 1)
    setCount(c => c + 1)  // 函数式更新
  }
  
  return <button onClick={handleClick}>{count}</button>
}

// 第一次渲染（Mount）：
// 1. useState(0) → 创建 Hook1，memoizedState = 0
// 2. useState('John') → 创建 Hook2，memoizedState = 'John'  
// 3. useEffect → 创建 Hook3，添加到 effect 队列
// 链表结构：Hook1 → Hook2 → Hook3

// 点击按钮后：
// 1. setCount(1) 创建 update1
// 2. setCount(c => c + 1) 创建 update2
// 更新队列（环形链表）：update1 → update2 → update1

// 第二次渲染（Update）：
// 1. useState(0) → 复用 Hook1，应用两个更新，memoizedState = 2
// 2. useState('John') → 复用 Hook2，memoizedState = 'John'
// 3. useEffect → 比较依赖，count 变化，执行 effect

7. 内存管理与清理

// Fiber 删除时的 Hook 清理
function safelyCallDestroy(current, nearestMountedAncestor, destroy) {
  try {
    destroy()  // 执行 useEffect 返回的 cleanup 函数
  } catch (error) {
    // 错误处理
  }
}

// 组件卸载时清理所有 Hooks
function commitUnmount(fiber) {
  // 遍历 Hook 链表，执行所有 cleanup
  let nextEffect = fiber.memoizedState
  while (nextEffect !== null) {
    const effect = nextEffect.memoizedState
    if (effect !== null && effect.destroy !== undefined) {
      safelyCallDestroy(fiber, null, effect.destroy)
    }
    nextEffect = nextEffect.next
  }
}

总结

React Hooks 的管理方式核心特点：

1. 链表结构：使用单向链表存储 Hook 节点，依赖固定的调用顺序
2. 双缓冲：通过 Fiber 双缓冲机制支持并发渲染
3. 环形更新队列：高效处理状态更新的批量操作
4. 分阶段调度：区分 mount 和 update 阶段，使用不同的 dispatcher
5. 优先级机制：支持高优先级更新打断低优先级更新

这种设计使 React 能够在保证性能的同时，提供简单易用的 Hooks API。