前端知识库

白天 夜间 首页 下载 阅读记录
  我的书签   添加书签   移除书签

虚拟 DOM(VDOM)

浏览 121 扫码 分享 2023-11-18 13:21:54
  • 参考资料

    基于版本 react@15.7.0 react-dom@15.7.0

    1. import React, { Component } from 'react'
    2. class App extends Component {
    3. render() {
    4. console.log(<div></div>); // 打印一个虚拟 DOM 看看效果
    5. return (<div>123</div>)
    6. }
    7. }
    8. export default App

    image.png

    虚拟 DOM(VDOM) - 图2
    图引用来自 https://yylifen.github.io/sundries-trans/js/react-virtual-dom-postmortem/ch.html

    参考资料

    《React虚拟DOM原理追踪(动画教程)》
    《再谈react优势——react技术栈回顾》

    若有收获,就点个赞吧

    0 人点赞

    上一篇:
    下一篇:
    • 书签
    • 添加书签 移除书签
    • HTML
      • meta 标签
      • 行内元素与块级元素
      • HTML5 新特性
    • CSS
      • CSS 布局/排版
        • 简介
        • Normal Flow
        • Float 布局
        • Position 布局
        • Flex 布局
      • CSS 盒子模型
      • CSS 的两种规则
      • CSS 的层叠上下文
      • CSS 的层叠样式表
      • CSS 预处理器
      • 不同尺寸单位的区别
      • 手写 CSS 常见布局
      • BFC
    • JS
      • JS 的零碎知识
        • this 的指向
        • 深刻理解闭包
        • 类型转换
        • 内存管理(分配、使用、回收)
        • 内存泄漏
        • 异步编程
      • ES6+
        • ES5补充知识
        • ES6
          • let 和 const
          • 变量的解构赋值
          • Class 类
          • Symbol
          • Set 和 Map
          • 数据类型的拓展
          • Proxy 与 Reflect
          • Promise
          • Generator
        • ES7
        • ES8
        • ES9
        • ES10
        • ES11
        • ES12
      • JS 与 数据结构
        • 链表
        • 栈
        • 队列
        • 集合
        • 字典
        • 树
        • 图
        • 堆
        • 散列表
        • 排序和搜索
      • JS 设计模式
        • (一)面向对象
        • (二)工厂模式
        • (三)建造者模式
        • (四)单体模式(单例模式)
        • (五)装饰器模式
        • (六)组合模式
        • (七)订阅模式
        • (八)策略模式
        • (九)链模式
        • (十)委托模式
        • (十一)数据访问对象模式
        • (十二)等待者模式
        • (十三)MVC模式
        • (十四)MVVM模式
        • (十五)观察者模式
        • (十六)Mixin
      • JS 手写题
    • 前端工程化
      • 模块化
      • 工具链
      • 持续集成(CI)
        • 包管理
        • 版本控制
          • Git
          • 语义化版本(SemVer)
      • 前端构建工具
        • Grunt
          • Grunt 入门配置
        • Gulp
          • Gulp 入门配置
        • webpack
          • webpack 视频跟练
            • 自定义插件
            • 文件监听、热更新
            • 文件指纹
            • html、css、js代码压缩
            • 增强一些功能
            • 多页面打包通用方案
            • 使用source map
            • 提取页面公共资源
            • tree shaking和scopeHoisting优化
            • webpack打包库和组件
            • webpack实现SSR打包
            • webpack核心概念
            • 一些解析的loader
            • 其余的学习
            • webpack 原理及源码
            • 自定义 loader
          • webpack5 打包最小可行方案
          • webpack4 打包优化
          • Webpack 的 Proxy
          • webpack 构建流程
      • 前端监控
        • 前端监控之数据监控
        • 前端监控之性能监控
        • 前端监控之异常监控
        • 前端监控之行为监控
        • 埋点上报
    • Nignx
    • 性能优化
      • 性能指标
      • 关于异步加载资源
      • 图片格式
      • CDN 内容分发网络
      • SEO
      • 虚拟列表
    • 算法
      • 数组
        • 1. 二分查找(704)
        • 2. 移除元素(27)
        • 3. 有序数组的平方(977)
        • 4. 长度最小的子数组(209)
        • 5. 螺旋矩阵II(59)
      • 排序算法
        • 冒泡排序
        • 选择排序
        • 插入排序
        • 归并排序
        • 快速排序
        • 希尔排序
        • 堆排序
        • 什么排序是稳定的?
      • 缓存算法
        • FIFO 先入先出
        • LRU 最近最少使用(时间)
        • LFU 最不经常使用(次数)
      • 二叉树
        • 1. 翻转二叉树(226)
        • 2. 对称二叉树(101)
        • 3. 二叉树的最大深度(104)
        • 4. 从中序与后序遍历序列构造二叉树(106)
        • 5. 二叉树的最小深度(111)
        • 6. 完全二叉树的节点个数(222)
        • 7. 平衡二叉树(110)
        • 8. 二叉树的所有路径(257)
        • 9. 左叶子之和
        • 10. 找树左下角的值
        • 11. 路径总和(112)
        • 12. 最大二叉树(654)
        • 13.合并二叉树(617)
        • 14. 二叉搜索树的搜索(700)
        • 15. 验证二叉搜索树(98)
        • 16. 二叉搜索树的最小绝对差(530)
        • 17. 二叉搜索树中的众数(501)
        • 18. 二叉树的最近公共祖先(236)
        • 19. 二叉搜索树的最近公共祖先
        • 20. 二叉搜索树中的插入操作(701)
        • 21. 删除二叉搜索树中的节点(450)
      • 队列
        • 1. 滑动窗口最大值(239)
      • 栈
        • 1. 有效的括号(20)
        • 2. 删除字符串中的所有相邻重复项(1047)
        • 3. 逆波兰表达式求值(150)
      • 回溯
        • 1. 组合(77)
        • 2. 组合总和 III(216)
        • 3. 电话号码的字母组合(17)
        • 4. 组合总和(39)
        • 5. 组合总和II(40)
        • 6. 分割回文串(131)
        • 7. 复原 IP 地址(93)
        • 8. 子集(78)
        • 9. 子集II (90)
        • 10. 递增子序列(491)
        • 11. 全排列(46)
        • 12. 全排列II(47)
        • 13. 括号生成(22)
      • 贪心
        • 1. 分发饼干(455)
        • 2. 有效的括号(678)
        • 3. 摆动序列(376)
        • 4. 最大子数组和(53)
        • 5. 买卖股票的最佳时机 II(122)
        • 6. 跳跃游戏(55)
        • 7. 跳跃游戏 II(45)
        • 8. K 次取反后最大化的数组和(1005)
        • 9. 加油站(134)
        • 10. 分发糖果(135)
        • 11. 柠檬水找零(860)
        • 12. 根据身高重建队列(406)
        • 13. 用最少数量的箭引爆气球(452)
        • 14. 无重叠区间(435)
        • 15. 划分字母区间(763)
        • 16. 合并区间(56)
        • 17. 单调递增的数字(738)
        • 18. 买卖股票的最佳时机含手续费(714)
      • 双指针
        • 1. 三数之和(15)
        • 2. 四数之和(18)
      • 动态规划
        • 1. 斐波那契数(509)
        • 2. 不同路径(62)
        • 3. 不同路径 II(63)
        • 4. 整数拆分(343)
        • 5. 不同的二叉搜索树(96)
        • 背包理论之 01 背包
        • 6. 分割等和子集(416)
        • 7. 最后一块石头的重量 II(1049)
        • 8. 目标和(494)
        • 9. 一和零(474)
        • 背包理论之完全背包
        • 10. 零钱兑换(II)
        • 11. 组合总和 Ⅳ(377)
        • 12. 爬楼梯(进阶版)
        • 13. 零钱兑换(322)
    • React-router
    • React
      • React 的 生命周期
      • React 的 Hook
      • HOC 高阶组件
      • React 错误边界
      • React Hooks 为什么只在顶层使用
      • React 源码学习
        • React 15
          • 虚拟 DOM(VDOM)
          • diff 算法
          • this.setState 是同步还是异步
        • React 16
          • Fiber 架构(SDOM)
          • diff 算法
          • this.setState 是同步还是异步
    • 浏览器
      • 请求资源 API
        • Ajax
        • Fetch
          • Fetch 简介
          • Fetch 的基本概念
            • Header
            • Request
            • Response
            • Body
          • Fetch 的使用
      • DOM
        • DOM 的介绍
        • DOM 0 ~ DOM 3、IE 事件模型
      • Chrome DevTools
        • Chrome 开发工具之 Performance
        • Chrome 开发工具之 Application
        • Chrome 开发工具之 Memory
      • Cookie、Session、Token、JWT
      • 浏览器缓存
      • 浏览器的五种 Observer
      • 事件循环 Event Loop 之浏览器
    • Redux
      • 设计理念
      • 函数组件的 Hooks
      • 手写 redux 源码
    • 计算机安全
      • 同源策略与跨域
      • DDoS 攻击
      • 中间人攻击(MITM)
      • CSP(网页安全政策)
      • XSS 和 CSRF
      • XS-Leak
    • 计算机网络
      • 计网
      • 输入URL后到页面渲染
      • 第一章 概论
      • 第二章 物理层
      • 第三章 数据链路层
      • 第五章 应用层
    • 函数式编程
      • 函数式编程之基础篇
      • 函数式编程之进阶篇
    • TypeScript
      • 1. 环境安装与运行
      • 2. 变量与数据类型
      • 3. 函数
      • 4. 类
      • 5. 接口
      • 6. 泛型
      • 7. 装饰器
      • 8. 编译上下文
      • 9. 再学泛型
    • Node
      • 1. 初识 Node.js
        • NPM %26 package.json
        • Node.js 是什么
        • 模块系统
      • 2. 基础 API
        • path
        • events
        • process
        • 定时器(Event Loop)
      • 3. 文件操作
        • API 风格
        • 文件读取
        • 文件写入
        • 文件夹操作
        • 监听文件变化
        • 其他常用 API
      • 4. Buffer 与 Stream
        • Buffer
        • 初识 Stream
        • 可读流
        • 可写流
        • 双工流
      • 5. Web 应用
        • HTTP 协议
        • 创建 HTTP 服务器
        • url %26 querystring
    • Babel
      • Babel 架构
      • Babel 插件开发前置知识
    • Puppeteer
    • Bug 汇总
    • VSCode
      • 插件
        • Remote-SSH
    暂无相关搜索结果!

      让时间为你证明

      展开/收起文章目录

      分享,让知识传承更久远

      文章二维码

      手机扫一扫,轻松掌上读

      文档下载

      请下载您需要的格式的文档,随时随地,享受汲取知识的乐趣!
      PDF文档 EPUB文档 MOBI文档

      书签列表

        阅读记录

        阅读进度: 0.00% ( 0/0 ) 重置阅读进度

          思维导图备注