 

04-渲染机制与原理

React 渲染机制与底层原理：虚拟 DOM、Fiber 架构、Diff 策略、key、重渲染范围、批处理、并发渲染与合成事件，深入 React 18/19 与源码走读。

4.7 批处理

React 会把「同一个事件循环里发生的多次 setState」合并成一次渲染——这叫批处理；React 18 之前只在合成事件里批处理，React 18+ 在所有场景（含 setTimeout、Promise、原生事件）都自动批处理。

陌上寒2026-10-14阅读()去评论

父组件重渲染时，子组件默认也会重渲染（因为父组件重新执行时会重新调用子组件函数/创建新元素）——想阻断必须用 React.memo（且 props 引用稳定）、children 透传或状态下移。

陌上寒2026-10-13阅读()去评论

压缩、裁剪、加水印、抠图、拼接都在本地完成。不限张数、不限次数，图片不会传到服务器。

2026-10-14

key 是 React 判断「新旧列表中的元素是否是同一个」的身份标识——它决定组件是「复用」还是「重建」；用 index 或随机值会在列表变动时造成状态错位或性能灾难。

陌上寒2026-10-13阅读()去评论

React 的 diff 只做「同层比较」「类型不同直接重建」「用 key 标识同一元素」三件事，把理论上 O(n³) 的树比较降到 O(n)——代价是放弃「跨层复用」。

陌上寒2026-10-13阅读()去评论

React 的一次更新分「render 阶段（可中断、必须纯、算出变更）」与「commit 阶段（不可中断、真正改 DOM、执行 effect）」；理解这个划分就理解了「为什么副作用必须放 Effect 里」。

陌上寒2026-10-13阅读()去评论

Fiber 把 React 的渲染从「不可中断的递归」改造成「可中断的链表遍历」——每个 Fiber 节点是一个「工作单元」，带父子兄弟指针与优先级，从而支持时间切片、优先级调度与并发渲染。

陌上寒2026-10-13阅读()去评论

虚拟 DOM 是「用普通 JS 对象描述 UI 结构」的一层抽象；React 通过比较新旧两棵对象树来算出最小 DOM 操作——它的价值是「可预测的更新模型 + 跨平台能力」，而不是「比直接操作 DOM 更快」。

陌上寒2026-10-13阅读()去评论