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:手动控制组件和值的缓存。

相关推荐
脑袋大大的19 分钟前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络2 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘2 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way2 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家2 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689973 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽4 小时前
一、react18+项目初始化(vite)
前端·react.js
GISer_Jing5 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆5 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试