🚀React 更新界面全流程:从 setState 到 像素上屏

#金石焕新程

🚀《React 更新界面全流程:从 setState 到 像素上屏》

面试常被追问:

"React 更新界面到底经历了哪些阶段?"

本文用一张图 + 一段可运行代码,带你走通 React 18(含并发特性) 的完整刷新链路。


📊 总览:一次更新 6 步曲

阶段 发生位置 关键 API
① 触发更新 开发者代码 setState / dispatch
② 构造更新对象 React 内部 Update
③ 调度 & 优先级 Fiber Scheduler scheduleUpdateOnFiber
④ Render 阶段(可中断) Fiber beginWorkcompleteWork
⑤ Commit 阶段(同步) DOM commitWorkcommitMutationEffects
⑥ 浏览器绘制 浏览器 requestAnimationFrame → 像素上屏

① 触发更新:setState 不是立刻刷 DOM!

jsx 复制代码
function Counter() {
  const [count, setCount] = useState(0);

  // 触发更新
  const handleClick = () => setCount(c => c + 1);

  return <button onClick={handleClick}>{count}</button>;
}
  • setCount 只是把 更新任务 放进 Fiber 队列,不会立即渲染

② 构造更新对象(Fiber 视角)

js 复制代码
// React 内部伪代码
const update = {
  lane: SyncLane,      // 优先级
  action: c => c + 1,  // 更新函数
  next: null           // 链表结构
};
fiber.updateQueue = appendUpdate(fiber.updateQueue, update);

③ 调度 & 优先级(时间切片)

js 复制代码
// React 18 并发调度
scheduleUpdateOnFiber(rootFiber, lane);
  • 高优先级任务 (用户输入)插队 ,低优先级任务让步
  • 浏览器空闲时继续可中断渲染

④ Render 阶段:Fiber 可中断遍历

plaintext 复制代码
beginWork → completeWork
  • 可中断:长列表渲染可分段进行(避免白屏)。
  • 双缓冲:一边渲染 Fiber 树,一边复用旧树。

⑤ Commit 阶段:同步提交到 DOM

plaintext 复制代码
commitWork
  ├─ commitMutationEffects  // 插入 / 更新 / 删除 DOM
  ├─ commitLayoutEffects    // 调用 useLayoutEffect
  └─ commitPassiveEffects   // 调用 useEffect
  • 同步不可中断,确保 DOM 与 React 树一致。

⑥ 浏览器绘制:像素上屏

  • React 把 styletransform 交给浏览器。
  • 浏览器在下一帧 VSync 信号后完成绘制。

🧪 实战:打断渲染(Concurrent Feature)

jsx 复制代码
import { startTransition } from 'react';

function Search() {
  const [query, setQuery] = useState('');
  const [list, setList] = useState([]);

  const handleChange = (e) => {
    const q = e.target.value;
    setQuery(q);
    startTransition(() => {
      // 低优先级更新:长列表过滤
      setList(filterList(q));
    });
  };

  return (
    <>
      <input value={query} onChange={handleChange} />
      {list.map(item => <li key={item.id}>{item.name}</li>)}
    </>
  );
}
  • startTransition 把长列表过滤标记为低优先级 ,高优先级输入不卡顿

🔍 调试技巧:浏览器 Performance 面板

  1. 火焰图:查看 Render、Commit 耗时。
  2. React DevTools Profiler:识别重渲染组件。
  3. Paint Flashing:高亮重绘区域。

🏁 一句话总结

React 更新 = 调度优先级 + 可中断渲染 + 同步提交 DOM + 浏览器绘制

记住 6 步曲,面试问「React 怎么更新界面」直接答:

"从 setState 触发 → Fiber 调度 → Commit → 像素上屏!"

相关推荐
超级土豆粉4 分钟前
Taro Hooks 完整分类详解
前端·javascript·react.js·taro
iphone1086 分钟前
从零开始学网页开发:HTML、CSS和JavaScript的基础知识
前端·javascript·css·html·网页开发·网页
2503_9284115612 分钟前
7.31 CSS-2D效果
前端·css·css3
辰九九12 分钟前
Vue响应式原理
前端·javascript·vue.js
中等生16 分钟前
为什么现在的前端项目都要'启动'?新手必懂的开发环境变迁
前端·javascript·react.js
Winslei18 分钟前
【加密专栏】OpenHarmony应用开发-加解密之AES128CBCNoPadding
前端
curdcv_po18 分钟前
threejs,画雾
前端
瑶琴AI前端18 分钟前
HBuilderX uniapp项目转vue-cli项目完整步骤(已成功)
前端·vue.js·uni-app
ygming23 分钟前
Q53-code1438- 绝对差不超过限制的最长连续子数组 + Q54- code895- 最大频率栈
前端·算法
养鱼的程序员29 分钟前
零基础搭建个人网站:从 Astro 框架到 GitHub 自动部署完全指南
前端·后端·github