react 什么是虚拟DOM?深入了解虚拟DOM
底层的理论基础
一. 原始生成步骤
1.state 数据
2.jsx 模版
3.数据 + 模板 结合,生成真实的DOM,来显示
4.state 发生改变了
5.数据 + 模板 结合,生成真实的DOM,替换原来的DOM
缺陷:
第一次生成一个完整的DOM片段
第二次有生成了一个完整的DOM片段
第二次的DOM替换第一次的DOM,非常消耗性能
二. 逐步改进
1.state 数据
2.jsx 模版
3.数据 + 模板 结合,生成真实的DOM,来显示
4.state 发生改变了
5.数据 + 模板 结合,生成真实的DOM,并不直接替换原始的DOM
6.新的DOM (DocumnetFragment )和原始的DOM做对比,找差异
7.找出input框发生了变化
8.只用新的DOM中的input元素,替换掉老的DOM中的input元素
缺陷:
性能的提升不明显
三. react 虚拟DOM
1.state 数据
2.jsx 模版
3.数据 + 模板 结合,生成真实的DOM,来显示
<div id="abc"><span>hello world !</span></div>
4.生成虚拟DOM(虚拟DOM就是一个js 对象,用它来描述真实DOM)(损耗性能)
['DIV',{ id : 'abc'},['span',{},'bye bye']]
5.state 发生变化
6..数据 + 模板 生成新的虚拟DOM(极大的提升了性能)
['DIV',{ id : 'abc'},['span',{},'bye bye']]
7.比较原始虚拟DOM和新的虚拟DOM的区别,找到区别是span的内容 (极大的提升了性能)
8.直接操作DOM,改变span中的内容
React中虚拟DOM的概念:
虚拟DOM本质上就是一个JS对象,之所以能够提高性能,本质上是因为js去比较js对象不太消耗性能,而去比较真实的DOM会很消耗性能。
四. 深入了解虚拟DOM
实际实现:
1.state 数据
2.JSX 模版 JSX->creatElement ->虚拟DOM(JS对象)->真实DOM
3. 数据 + 模板 生成虚拟DOM(虚拟DOM就是一个js 对象,用它来描述真实DOM)(损耗性能)
['DIV',{ id : 'abc'},['span',{},'bye bye']]
4. 用虚拟DOM的结构结生成真实的DOM,来显示
<div id="abc"><span>hello world !</span></div>
5. state 发生变化
6. 数据 + 模板 生成新的虚拟DOM(极大的提升了性能)
['DIV',{ id : 'abc'},['span',{},'bye bye']]
7.比较原始虚拟DOM和新的虚拟DOM的区别,找到区别是span的内容 (极大的提升了性能)
8.直接操作DOM,改变span中的内容
优点:
1.性能提升了
2.它使得跨端应用得以实现。React Native
渲染DOM在浏览器上是没有什么问题的,可是在移动端的原生应用里面,我们开发的安卓,iOS机器代码当中里面是不存在DOM的概念的,所以在原生的应用里没有办法生成DOM,也无法被使用,但是有了虚拟DOM就不一样了,我们的代码首先会被转化成一个虚拟DOM,然后它是个js对象,它放在浏览器里可以被识别,同时,它在原生的应用里面也可以被识别,所以这个虚拟DOM不管是在原生应用里面还是在网页应用里面都可以被正确的识别。
五. 虚拟DOM中的Diff算法
1.state 数据
2.JSX 模版
3. 数据 + 模板 生成虚拟DOM(虚拟DOM就是一个js 对象,用它来描述真实DOM)(损耗性能)
['DIV',{ id : 'abc'},['span',{},'bye bye']]
4. 用虚拟DOM的结构结生成真实的DOM,来显示
<div id="abc"><span>hello world !</span></div>
5. state 发生变化
6. 数据 + 模板 生成新的虚拟DOM(极大的提升了性能)
['DIV',{ id : 'abc'},['span',{},'bye bye']]
7.比较原始虚拟DOM和新的虚拟DOM的区别,找到区别是span的内容 (极大的提升了性能)
diff算法(diffrence)
同层比对,
能不用index做key值就不用index做key值。
8.直接操作DOM,改变span中的内容
react 什么是虚拟DOM?深入了解虚拟DOM的更多相关文章
- [react] 什么是虚拟dom?虚拟dom比操作原生dom要快吗?虚拟dom是如何转变成真实dom并渲染到页面的?
壹 ❀ 引 虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...
- 直接操作DOM一定比虚拟DOM操作耗时,diff算法,key值,虚拟 DOM的定义
直接操作DOM一定比虚拟DOM操作耗时吗? 或者一次直接DOM操作一定比一次虚拟DOM操作耗时吗? 1)虚拟DOM的本质就是一个JS对象,虚拟DOM减少了真实DOM的操作,当修改数据的时候,就是修改虚 ...
- 全面理解虚拟DOM,实现虚拟DOM
1.为什么需要虚拟DOM DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的.如果对前端工作进行抽象的话,主要就是维护状态和更新视图:而更新视图和维护状态都需 ...
- Tomcat 配置WEB虚拟映射 及 配置虚拟主机
Tomcat 配置WEB虚拟映射 及 配置虚拟主机 配置WEB虚拟映射文件夹有三种方法例如以下: 第一(要重新启动server的): 打开路径 Tomcat 6.0\conf 下的 server.x ...
- LNMP一键安装包添加虚拟主机、删除虚拟主机及如何使用伪静态
本文主要介绍LNMP一键安装包添加虚拟主机.删除虚拟主机及如何使用伪静态. 一.添加虚拟主机通俗点就是在VPS/服务商上添加一个网站(域名). 需要执行如下命令:/root/vhost.sh 执行后会 ...
- 高级运维(二):搭建Nginx服务器、用户认证、基于域名的虚拟主机、SSL虚拟主机、Nginx反向代理
一.搭建Nginx服务器 目标: 在IP地址为192.168.4.5的主机上安装部署Nginx服务,并可以将Nginx服务器,要求编译时启用如下功能: 1> SSL加密功能 2> 设置Ng ...
- php 配置主机虚拟目录(使用虚拟域名访问 127.0.0.1) 一点也不好使?????
php 配置主机虚拟目录(使用虚拟域名访问 127.0.0.1)steps:1>打开目录 D:\xwamp\bin\apache\apache2.4.9\conf 修改文件 httpd ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- javascript中0级DOM和2级DOM事件模型浅析
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- proxy 利用get拦截,实现一个生成各种DOM节点的通用函数dom。
const dom = new Proxy({}, { get(target, property) { return function(attrs = {}, ...children) { const ...
随机推荐
- Java连接mysql数据库攻略
一. 软件下载 Mysql 下载版本:4.1.11 http://dev.mysql.com/downloads/mysql/4.1.html JDBC驱动 下载版本:3.1.8 http://dev ...
- 问题:C# TrimEnd 去掉最后的逗号;结果: C#中 TrimEnd()用法
C#中 TrimEnd()用法 ①去除最后的逗号 string str=ab,cd,ef,; str=str.TrimEnd(new char[] { ',' }); 返回结果则是:ab,cd,ef ...
- HTML元素(包括HTML5)的标签、属性及事件大全
1.标签列表 标签 描述 <!–…–> 定义注释. <!DOCTYPE> 定义文档类型. <a> 定义超链接. <abbr> 定义缩写. <acr ...
- MVC5网站部署到IIS7
server 2008R2+IIS7.5下配置不会出现什么问题,这里记录下在server2008+IIS7下的配置 参考了一下:http://www.cnblogs.com/fcu3dx/p/3773 ...
- 超详细的Maven使用教程
原文: http://blog.csdn.net/u010425776/article/details/52027706 主题 Maven 什么是Maven? 如今我们构建一个项目需要用到很多第三方 ...
- python中的变量以及字符串的使用
在python中只有一个变量:动态变量 在Python当中令人奇怪的是我们的python没有静态变量,这个特性大大的增加了python的灵活性. 由于python中没有静态变量所以我们千万不要使用静态 ...
- ms project展开和折叠任务
1.视图——大纲——显示子任务 2.视图——大纲——隐藏子任务
- C#简单的图片合成及防止并发的办法
/// <summary> /// 合成图 /// </summary> private string ComposeCarBrandBadImage(AnonAttachme ...
- GUI编程02
1 编写一个导航栏 from tkinter import * root = Tk() root.title("测试") root.geometry("400x400+4 ...
- Qt测试计算时间
博客转载自:https://blog.csdn.net/lg1259156776/article/details/52325508 一.标准C和C++都可用 1. 获取时间用time_t time( ...