相信你在看到此篇前也翻阅大量的对DOM的文章讲解和介绍 react中的虚拟DOM

此篇我尽量说人话(大白话),不然想必你在看到别的大神的文章早就懂了。

不说废话了,上干货。

1、首先简单对Html中的DOM和react中的虚拟DOM讲解。

Html中的DOM是什么?我简短概括下:DOM是HTML中每一个节点的元素或者是表现被外面的 html 套着。这样的结构很像计算机里的文件夹。例如,“我的电脑”是最外层,里面套着 C、D、E、F 盘,每个盘里又有很多文件夹,文件夹里又有文件夹,逐个打开后才能看到具体的文件。

而react的虚拟DOM:说准确来讲他就是一个js对象是一个复杂的js的js对象,随着对前端知识学习的深入,我们会发现 JavaScript 操纵 DOM 是非常普遍的事情。就比如很多网页一开始加载出来的只是个普通的框架架子,只显示出一个 loading 图标的转圈动画,只有等 JavaScript 从服务器上请求到真正的数据后操纵 DOM 来显示数据,才能看到内容,这就是典型的异步加载。

也可能你早就听过Html中的DOM和react中的虚拟DOM和和直接去操作真实的DOM往往比js中的虚拟DOM还要麻烦和繁琐。一个网页往往很复杂,浏览器构造出来的 DOM 树往往很庞大,有的甚至有几千个节点。在这么庞大的一棵树上频繁地改动,对浏览器(尤其是移动浏览器)来说是不小的工作量,稍不注意就会出现卡顿。
于是,有人发明了一种便捷的方法,叫作虚拟 DOM。

简单来说(人话),就是用 JavaScript 模拟了一棵简单的 DOM 树,然后在这上面演练(模拟一个虚拟的js对象)所有的 DOM 操作,等时机成熟时(js数据的增删改)再把虚拟 DOM树和真正的浏览器的 DOM 树做对比,算出差异,一次性地改变真正的 DOM 树。

这两个步骤从整体上大大提高了 JavaScript 操纵 DOM 树的效率。

简谈react中的虚拟DOM的更多相关文章

  1. 深入理解react中的虚拟DOM、diff算法

    文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   ...

  2. 谈谈Vue/React中的虚拟DOM(vDOM)与Key值

    谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...

  3. React中的虚拟DOM

    当组件当state和props发生变化当时候,组件当render函数就会重新执行,组件就会被重新渲染,react中实现这种重新渲染,他的性能是非常高的,因为他引入了一个虚拟Dom的概念,那么什么是虚拟 ...

  4. 1.React中的虚拟DOM

    1.state 数据 2.JSX模板 3.数据+ 模板 结合,生成真实的DOM,来显示 4.state发生改变 5.数据 + 模板 结合,生成真实的DOM,替换原始的DOM 缺陷: 第一次生成了一个完 ...

  5. [react] 什么是虚拟dom?虚拟dom比操作原生dom要快吗?虚拟dom是如何转变成真实dom并渲染到页面的?

    壹 ❀ 引 虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...

  6. vue中的虚拟DOM树

    什么是虚拟DOM树?(Virtual DOM)   虚拟DOM树其实就是一个普通的js对象,它是用来描述一段HTML片段的    01    当页面渲染的时候Vue会创建一颗虚拟DOM树 02    ...

  7. 【Web技术】401- 在 React 中使用 Shadow DOM

    本文作者:houfeng 1. Shadow DOM 是什么 Shadow DOM 是什么?我们先来打开 Chrome 的 DevTool,并在 'Settings -> Preferences ...

  8. 详解Vue中的虚拟DOM

    摘要: 什么是虚拟DOM? 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍,并 ...

  9. react 什么是虚拟DOM?深入了解虚拟DOM

    底层的理论基础 一. 原始生成步骤 1.state 数据 2.jsx 模版 3.数据 + 模板 结合,生成真实的DOM,来显示 4.state 发生改变了 5.数据 + 模板 结合,生成真实的DOM, ...

随机推荐

  1. Python with MYSQL - sytax problem

    Con= MySQLdb.connect(host=',db='test') cur=Con.cursor() cur.execute('insert into staff_daily(Date,Na ...

  2. Chrome_01_点击 Google搜索结果在新的页面打开

    方法一:Ctrl + 左键 Chrome浏览器中,通过 Ctrl + 左键 ,是在新标签中打开的,通过 Shift + 左键 ,是在新窗口中打开的. 方法二: 1.登录 Google 2.进入下面的设 ...

  3. 简单使用c3p0连接池

    首先,c3p0是一个连接池插件 需要jar包: 使用手动配置: /** * 手动配置使用c3p0 * @throws PropertyVetoException * @throws SQLExcept ...

  4. Javascript-- jQuery事件篇(1)

    jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是点击操作.jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于 ...

  5. leetcode 3 Longest Substring Without Repeating Characters(滑动窗口)

    用滑动窗口的思想来做.用一个unordered_map来查询之前的char有没有在现在的窗口中. class Solution { public: int lengthOfLongestSubstri ...

  6. C++0X 学习之 auto

    auto并不是一个新关键词,是一个把旧关键词赋予新的作用,新的作用修饰变量声明,指示编译器根据变量的初始化表达式推导变量应有的类型.auto 声明的变量必须“在声明处完成初始化”,编译器才可根据初始化 ...

  7. 【二叉树的递归】07路径组成数字的和【Sum Root to Leaf Numbers】

    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 给定一个二叉树,节点的值仅限于从0 ...

  8. 景深(Depth of Field)

    http://www.cnblogs.com/cxrs/archive/2013/03/22/DepthOfFeild.html 景深(Depth of Field) 什么是景深? 所谓景深,就是当焦 ...

  9. 使用Visual Studio进行单元测试-Part1

    写在开头:Coding ain't done until all the tests run. No unit test no BB. -------------------------------- ...

  10. MongoDB3.2.8创建初始用户

    启动MongoDB前需要关闭配置文件中的auth选项,否则不能创建用户 首先创建用户管理用户 use admin db.createUser({user:'admin',pwd:'123456', r ...