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

相关推荐
灵感__idea4 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
试图让你心动6 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_6 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数7 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam8 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8508 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
今禾10 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的10 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句10 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架