react与vue的渲染原理

vue：响应式驱动+模板编译

（1）模板编译

将模板（.vue 文件或 HTML 模板）编译为 渲染函数（Render Function）；

（2）响应式依赖收集

• 初始化时，通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持数据，建立 Getter/Setter。

• 渲染函数执行时，触发数据的 Getter，收集依赖（Watcher）。

（3）虚拟 DOM 与 Diff

• 渲染函数生成 虚拟 DOM（轻量级 JS 对象描述 DOM 结构）。
• 数据变化时，重新运行渲染函数生成新虚拟 DOM，通过 Diff 算法 对比新旧节点，计算最小更新。
   

优化策略

• 模板静态提升：编译时标记静态节点，跳过 Diff。

• 补丁标志（Patch Flags）：标记动态绑定的属性，减少对比范围。

• 组件级更新：每个组件有自己的渲染上下文，数据变化只影响当前组件。

react: 虚拟dom+显式触发状态变更

(1)JSX 编译

JSX 被 Babel 编译为 React.createElement() 调用，生成 虚拟 DOM 元素（React Element）     

(1)协调（Reconciliation）

• 状态变化时，重新执行组件函数，生成新的虚拟 DOM 树。

• 通过 Diff 算法 对比新旧虚拟 DOM，找出差异。

(3) 优化策略

• Fiber 架构（React 16+）：将渲染任务拆分为可中断的微任务，避免阻塞主线程。

• React.memo / useMemo：手动控制组件和值的缓存。