React 并不会在每次状态更新时重建整个组件树或全量虚拟 DOM；它仅重新执行状态变更组件及其子组件的 render（函数组件即重新执行函数体），生成局部虚拟 DOM 片段，并通过高效 diff 算法比对前后差异，最终只提交最小化的真实 DOM 更新。
react 并不会在每次状态更新时重建整个组件树或全量虚拟 dom；它仅重新执行状态变更组件及其子组件的 `render`（函数组件即重新执行函数体），生成局部虚拟 dom 片段，并通过高效 diff 算法比对前后差异，最终只提交最小化的真实 dom 更新。
在 React 的渲染模型中，“重生成虚拟 DOM”这一说法常被误解为“整棵树重建”。实际上，React 的更新是自顶向下、逐层收敛、按需触发的。当某个组件（例如组件 D）内部调用 setState 或 useState 的 setter 时，React 会将该组件标记为“待更新”，并在下一次渲染周期中仅重新执行 D 及其所有子组件的渲染函数（即 function D() { return ... }），从而生成 D 子树对应的新虚拟 DOM 节点（React Elements）。而其祖先组件（如 C → B → A）默认不会重新执行渲染——除非它们自身状态变化、接收到新的 props，或显式未实现 React.memo / shouldComponentUpdate 优化。
例如，考虑如下组件结构：
function A() {
return <B />;
}
function B() {
return <C />;
}
function C() {
return <D />;
}
function D() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(c => c + 1)}>+1</button>
</div>
);
}当点击按钮更新 count 时：
- ✅ D 重新执行函数体，生成新的 React Element（含更新后的 count 值）；
- ✅ 若 D 有子组件（如
），它们也会被递归重新渲染； - ❌ C、B、A 不会重新执行，其返回的 React Element 引用保持不变（前提是无 prop 变更）；
- ? React 将 D 的旧虚拟 DOM 树片段与新生成的 D 子树虚拟 DOM 片段进行 diff —— 注意：diff 范围严格限定在 D 所返回的子树内，而非全局树。
这一行为由 React 的渲染协调（reconciliation）机制保障：更新从“脏组件”（dirty component）开始，沿组件树向下扩散（children always re-render unless memoized），但绝不上溯。这也解释了为何 React.memo、useMemo 和 useCallback 至关重要——它们帮助阻断不必要的向下扩散，避免子组件因父组件重渲染而“误伤”。
需要特别注意的是：
- 函数组件每次渲染都会全新创建 JSX 对象（即新的 React Element），但 React 会复用未变化的 Fiber 节点并跳过比对；
- key 属性影响 diff 的节点复用策略，错误的 key 可能导致本可复用的节点被销毁重建；
- 使用 useEffect 或 useLayoutEffect 无法阻止虚拟 DOM 生成，它们仅在 diff 完成、DOM 更新后执行副作用；
- 服务端渲染（SSR）或 Concurrent Rendering 模式下，上述流程在 render phase（纯计算）与 commit phase（DOM 应用）进一步解耦，但局部更新原则不变。
总结而言，React 的高效性正源于其细粒度更新边界：不是“重绘整棵树”，而是“聚焦变更子树，局部生成 + 局部 diff + 局部提交”。理解这一点，是写出高性能 React 应用的基础——优化应聚焦于减少不必要渲染（如合理 memoization）、提升 diff 效率（如稳定 key），而非担忧“虚拟 DOM 开销过大”。
