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

相关推荐
aidingni88812 小时前
掌握 TCJS 游戏摄像系统:打造动态影院级体验
前端·javascript
有梦想的攻城狮12 小时前
从0开始学vue:npm命令详解
前端·vue.js·npm
我是日安13 小时前
从零到一打造 Vue3 响应式系统 Day 23 - Watch:基础实现
前端·javascript·vue.js
FogLetter13 小时前
Map 与 WeakMap:内存管理的艺术与哲学
前端·javascript
前端伪大叔13 小时前
第15篇:Freqtrade策略不跑、跑错、跑飞?那可能是这几个参数没配好
前端·javascript·后端
二狗mao14 小时前
React学习(一)描述UI
react.js
課代表16 小时前
Acrobat DC 文本域表单验证中的 js 使用
javascript·正则表达式·表单验证·数据完整性·字段验证·事件对象·自定义验证
用户63879947730517 小时前
Next.js 多语言对决:next-intl vs next-i18next vs Intlayer
javascript
Keepreal49617 小时前
谈谈对javascript原型链的理解以及原型链的作用
前端·javascript