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

相关推荐
麦麦大数据2 小时前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区4 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗4 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长4 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
YiHanXii5 小时前
this 输出题
前端·javascript·1024程序员节
楊无好5 小时前
React中ref
前端·react.js
维他命Coco5 小时前
js常见开发学习
javascript
麦麦大数据5 小时前
F033 vue+neo4j图书智能问答+知识图谱推荐系统 |知识图谱+neo4j+vue+flask+mysql实现代码
vue.js·flask·nlp·neo4j·智能问答·图书·1024程序员节
橙子199110166 小时前
在 Kotlin 中,ViewModel 的获取
开发语言·vue.js·kotlin
!win !7 小时前
分享二个实用正则
javascript·正则表达式