Rendering Model 渲染机制

最后更新：2026-10-28

React 的更新分两步：先执行组件函数得到新的 JSX（render），再把与上一次的差异提交到真实 DOM（commit）。触发条件包括状态更新、订阅的 Context 变化或父组件重渲染。

ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。

📝 语法

触发更新（setState / props 变化 / 父组件重渲染）
  → Render：执行组件函数，得到新的 JSX（虚拟 DOM）
  → Commit：把与上一次的差异应用到真实 DOM
  // 注意：render ≠ 改 DOM，渲染阶段绝不读写真实页面

返回值：无返回值，作为编码约定/心智模型使用。

示例可直接运行：展开后自动渲染，编辑代码即时生效。

输出结果：

显示「父组件计数」与子组件文案；每点一次按钮两个数字同步加一，控制台同时打印父、子组件的渲染日志——体现「函数重跑 + 差异提交」的两步模型。

ℹ️ 说明 「渲染」指重新执行组件函数，不等于页面变化：render 后若没有差异，DOM 一个字节都不会动。

⚠️ 注意 组件函数必须是纯函数：渲染阶段不能发请求、改外部变量、写 DOM，这些副作用应放进 useEffect。

💡 提示 用 DevTools 的 Profiler 面板能看到每次提交里哪些组件渲染了、耗时多少。

更多案例整理中，敬请期待。

Q React 什么时候会重新渲染组件？

A 组件自身的状态或订阅的 Context 变化、props 变化、以及父组件重渲染时。父组件渲染会让所有子组件默认跟着渲染。

Q 父组件更新时子组件一定会渲染吗？

A 默认会跟着执行函数；但如果子组件用 memo 包裹且 props 引用不变，就会跳过这次渲染。

Q render 和 commit 的区别是什么？

A render 是执行组件函数计算新 JSX 的阶段，可以被打断重跑；commit 是把差异真正写入 DOM 的阶段，页面在这一步才变化。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。