简谈react中的虚拟DOM
相信你在看到此篇前也翻阅大量的对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的更多相关文章
- 深入理解react中的虚拟DOM、diff算法
文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么? ...
- 谈谈Vue/React中的虚拟DOM(vDOM)与Key值
谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...
- React中的虚拟DOM
当组件当state和props发生变化当时候,组件当render函数就会重新执行,组件就会被重新渲染,react中实现这种重新渲染,他的性能是非常高的,因为他引入了一个虚拟Dom的概念,那么什么是虚拟 ...
- 1.React中的虚拟DOM
1.state 数据 2.JSX模板 3.数据+ 模板 结合,生成真实的DOM,来显示 4.state发生改变 5.数据 + 模板 结合,生成真实的DOM,替换原始的DOM 缺陷: 第一次生成了一个完 ...
- [react] 什么是虚拟dom?虚拟dom比操作原生dom要快吗?虚拟dom是如何转变成真实dom并渲染到页面的?
壹 ❀ 引 虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...
- vue中的虚拟DOM树
什么是虚拟DOM树?(Virtual DOM) 虚拟DOM树其实就是一个普通的js对象,它是用来描述一段HTML片段的 01 当页面渲染的时候Vue会创建一颗虚拟DOM树 02 ...
- 【Web技术】401- 在 React 中使用 Shadow DOM
本文作者:houfeng 1. Shadow DOM 是什么 Shadow DOM 是什么?我们先来打开 Chrome 的 DevTool,并在 'Settings -> Preferences ...
- 详解Vue中的虚拟DOM
摘要: 什么是虚拟DOM? 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍,并 ...
- react 什么是虚拟DOM?深入了解虚拟DOM
底层的理论基础 一. 原始生成步骤 1.state 数据 2.jsx 模版 3.数据 + 模板 结合,生成真实的DOM,来显示 4.state 发生改变了 5.数据 + 模板 结合,生成真实的DOM, ...
随机推荐
- Python with MYSQL - sytax problem
Con= MySQLdb.connect(host=',db='test') cur=Con.cursor() cur.execute('insert into staff_daily(Date,Na ...
- Chrome_01_点击 Google搜索结果在新的页面打开
方法一:Ctrl + 左键 Chrome浏览器中,通过 Ctrl + 左键 ,是在新标签中打开的,通过 Shift + 左键 ,是在新窗口中打开的. 方法二: 1.登录 Google 2.进入下面的设 ...
- 简单使用c3p0连接池
首先,c3p0是一个连接池插件 需要jar包: 使用手动配置: /** * 手动配置使用c3p0 * @throws PropertyVetoException * @throws SQLExcept ...
- Javascript-- jQuery事件篇(1)
jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是点击操作.jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于 ...
- leetcode 3 Longest Substring Without Repeating Characters(滑动窗口)
用滑动窗口的思想来做.用一个unordered_map来查询之前的char有没有在现在的窗口中. class Solution { public: int lengthOfLongestSubstri ...
- C++0X 学习之 auto
auto并不是一个新关键词,是一个把旧关键词赋予新的作用,新的作用修饰变量声明,指示编译器根据变量的初始化表达式推导变量应有的类型.auto 声明的变量必须“在声明处完成初始化”,编译器才可根据初始化 ...
- 【二叉树的递归】07路径组成数字的和【Sum Root to Leaf Numbers】
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 给定一个二叉树,节点的值仅限于从0 ...
- 景深(Depth of Field)
http://www.cnblogs.com/cxrs/archive/2013/03/22/DepthOfFeild.html 景深(Depth of Field) 什么是景深? 所谓景深,就是当焦 ...
- 使用Visual Studio进行单元测试-Part1
写在开头:Coding ain't done until all the tests run. No unit test no BB. -------------------------------- ...
- MongoDB3.2.8创建初始用户
启动MongoDB前需要关闭配置文件中的auth选项,否则不能创建用户 首先创建用户管理用户 use admin db.createUser({user:'admin',pwd:'123456', r ...