底层的理论基础

一. 原始生成步骤

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的更多相关文章

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

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

  2. 直接操作DOM一定比虚拟DOM操作耗时,diff算法,key值,虚拟 DOM的定义

    直接操作DOM一定比虚拟DOM操作耗时吗? 或者一次直接DOM操作一定比一次虚拟DOM操作耗时吗? 1)虚拟DOM的本质就是一个JS对象,虚拟DOM减少了真实DOM的操作,当修改数据的时候,就是修改虚 ...

  3. 全面理解虚拟DOM,实现虚拟DOM

    1.为什么需要虚拟DOM DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的.如果对前端工作进行抽象的话,主要就是维护状态和更新视图:而更新视图和维护状态都需 ...

  4. Tomcat 配置WEB虚拟映射 及 配置虚拟主机

    Tomcat  配置WEB虚拟映射 及 配置虚拟主机 配置WEB虚拟映射文件夹有三种方法例如以下: 第一(要重新启动server的): 打开路径 Tomcat 6.0\conf 下的 server.x ...

  5. LNMP一键安装包添加虚拟主机、删除虚拟主机及如何使用伪静态

    本文主要介绍LNMP一键安装包添加虚拟主机.删除虚拟主机及如何使用伪静态. 一.添加虚拟主机通俗点就是在VPS/服务商上添加一个网站(域名). 需要执行如下命令:/root/vhost.sh 执行后会 ...

  6. 高级运维(二):搭建Nginx服务器、用户认证、基于域名的虚拟主机、SSL虚拟主机、Nginx反向代理

    一.搭建Nginx服务器 目标: 在IP地址为192.168.4.5的主机上安装部署Nginx服务,并可以将Nginx服务器,要求编译时启用如下功能: 1> SSL加密功能 2> 设置Ng ...

  7. php 配置主机虚拟目录(使用虚拟域名访问 127.0.0.1) 一点也不好使?????

    php 配置主机虚拟目录(使用虚拟域名访问 127.0.0.1)steps:1>打开目录  D:\xwamp\bin\apache\apache2.4.9\conf     修改文件 httpd ...

  8. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  9. javascript中0级DOM和2级DOM事件模型浅析

    Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...

  10. proxy 利用get拦截,实现一个生成各种DOM节点的通用函数dom。

    const dom = new Proxy({}, { get(target, property) { return function(attrs = {}, ...children) { const ...

随机推荐

  1. Java连接mysql数据库攻略

    一. 软件下载 Mysql 下载版本:4.1.11 http://dev.mysql.com/downloads/mysql/4.1.html JDBC驱动 下载版本:3.1.8 http://dev ...

  2. 问题:C# TrimEnd 去掉最后的逗号;结果: C#中 TrimEnd()用法

    C#中 TrimEnd()用法 ①去除最后的逗号 string str=ab,cd,ef,; str=str.TrimEnd(new char[] { ',' }); 返回结果则是:ab,cd,ef ...

  3. HTML元素(包括HTML5)的标签、属性及事件大全

    1.标签列表 标签 描述 <!–…–> 定义注释. <!DOCTYPE> 定义文档类型. <a> 定义超链接. <abbr> 定义缩写. <acr ...

  4. MVC5网站部署到IIS7

    server 2008R2+IIS7.5下配置不会出现什么问题,这里记录下在server2008+IIS7下的配置 参考了一下:http://www.cnblogs.com/fcu3dx/p/3773 ...

  5. 超详细的Maven使用教程

    原文:  http://blog.csdn.net/u010425776/article/details/52027706 主题 Maven 什么是Maven? 如今我们构建一个项目需要用到很多第三方 ...

  6. python中的变量以及字符串的使用

    在python中只有一个变量:动态变量 在Python当中令人奇怪的是我们的python没有静态变量,这个特性大大的增加了python的灵活性. 由于python中没有静态变量所以我们千万不要使用静态 ...

  7. ms project展开和折叠任务

    1.视图——大纲——显示子任务 2.视图——大纲——隐藏子任务

  8. C#简单的图片合成及防止并发的办法

    /// <summary> /// 合成图 /// </summary> private string ComposeCarBrandBadImage(AnonAttachme ...

  9. GUI编程02

    1 编写一个导航栏 from tkinter import * root = Tk() root.title("测试") root.geometry("400x400+4 ...

  10. Qt测试计算时间

    博客转载自:https://blog.csdn.net/lg1259156776/article/details/52325508 一.标准C和C++都可用 1. 获取时间用time_t time( ...