React函数组件render前不执行side effect的原因及相关疑问

架构老林

2026-8-27

为什么React不在render阶段前执行side effect

首先要明确React最核心的设计原则：组件的render过程必须是纯函数——相同的props、state、context输入，必须返回一致的JSX输出，过程中不能产生任何可观测的外部影响。这是React状态一致性、可重渲染、并发特性的底层基础，你之前总结的两点是这个设计带来的直观表现，但不是全部原因。

你提到的「异步side effect不会阻塞渲染」确实是事实，但阻塞渲染只是render阶段执行副作用的问题之一，哪怕是完全不阻塞的异步逻辑，放在render阶段执行依然会违反React的设计约束，带来更多难以排查的问题，具体原因包括：

破坏render纯函数特性，导致渲染结果不可预测
不管同步还是异步副作用，只要放在render顶层执行，就可能在渲染计算过程中修改外部状态、甚至触发组件自身state更新，直接导致当次渲染的输入输出不匹配。哪怕是看似无侵入的读操作（比如直接读localStorage、读全局变量），如果渲染过程中其他逻辑修改了这些值，同一次render前后读到的结果不一致，最终渲染出的UI就会出现前后矛盾的问题。如果副作用里直接修改了组件state，还会立刻触发重渲染，陷入无限循环。
而useEffect的执行时机是在当次渲染结果完全提交到DOM之后，此时当次渲染的输出已经固定，不会被副作用逻辑干扰，执行时机完全确定。
无法适配React并发渲染的机制
React 18之后的并发渲染是可中断、可重试、甚至可以直接丢弃未完成的低优先级渲染结果的。如果把副作用放在render阶段执行，一旦React因为高优先级任务插队中断当前渲染，或者判定某次渲染不需要提交直接丢弃，已经执行的副作用是完全无法回滚的：比如你在render里发了埋点上报、注册了全局事件监听，最后这次渲染根本没展示给用户，不仅副作用白执行，还可能留下未清理的监听器导致内存泄漏。
useEffect只会在渲染结果真正提交到DOM、用户实际看到对应UI之后才执行，和实际展示的界面状态严格绑定，不会出现「UI没更新，副作用先跑了」的错位。就算渲染过程被中断，未提交的渲染对应的副作用根本不会触发，完全不需要额外的回滚逻辑。
无法保证cleanup逻辑的执行时机一致性
useEffect的cleanup机制（return的清理函数）能正常工作的前提，是副作用的执行和组件生命周期、渲染提交时机严格对齐：只有当组件卸载、或者下一次同个effect需要执行前，上一次的cleanup才会运行。如果副作用放在render阶段，render本身可能因为各种原因频繁重跑、被中断、被丢弃，cleanup根本找不到确定的触发时机，很容易出现重复订阅、重复解绑、内存泄漏的问题。
哪怕是异步副作用，放在render阶段也会产生无意义的性能开销
render阶段的触发频率远高于你的预期：父组件无关state更新、context值变化、甚至高频交互（比如鼠标移动、滚动）触发的组件重渲染，都会让组件函数从头执行一遍。如果把异步副作用（比如接口请求、埋点上报）放在render顶层，哪怕加了判断逻辑，也很容易因为意外的重渲染重复触发，产生大量无意义的请求和性能损耗。而useEffect可以通过依赖数组精确控制执行时机，只有当你关心的依赖项真正变化时，才会重新运行副作用。

你之前提到的两个认知是对的，但属于表层表现：

放在render顶层的副作用会随每次重渲染重复执行，而useEffect可以通过依赖数组控制执行时机，还支持cleanup逻辑
同步的耗时副作用放在render阶段会直接阻塞渲染，而useEffect里的逻辑会在渲染提交后执行，不会阻塞首屏/更新的绘制

举个最常见的异步副作用的反例：

// 错误写法：副作用直接写在render顶层
function UserProfile({ userId }) {
  // 异步请求确实不阻塞渲染，但只要组件重渲染就会执行
  // 父组件随便一个无关的state更新，都会导致重复发请求
  fetch(`/api/user/${userId}`)
    .then(res => res.json())
    .then(data => setUser(data))

  return <div>{user?.name}</div>
}

对应的正确写法是用useEffect包裹：

function UserProfile({ userId }) {
  useEffect(() => {
    const controller = new AbortController()
    fetch(`/api/user/${userId}`, { signal: controller.signal })
      .then(res => res.json())
      .then(data => setUser(data))
    // 清理逻辑：userId变化或者组件卸载时，取消上一次未完成的请求
    return () => controller.abort()
  }, [userId]) // 只有userId真正变化时，才会重新执行副作用

  return <div>{user?.name}</div>
}

本质上React把副作用放到render提交之后执行，核心目的不是单纯为了不阻塞渲染，而是为了保证副作用永远和当前展示给用户的UI状态保持一致，从设计层面避免状态错位、内存泄漏、重复执行这类问题。

内容的提问来源于stack exchange，提问作者Yeonuk