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(DocumentFragment)和原始的DOM做对比,找差异

7.找出input框发生了变化

8.只用新的DOM中的input元素,替换掉老的DOM中的input元素

缺陷:

性能的提升并不明显

1.state数据

2.JSX模板

3.数据 + 模板 生成虚拟DOM(虚拟DOM就是一个JS对象,用他来描述真实DOM)   (损耗了性能)

 ['div',{id:'abc'},['span',{},'hello world']]

4.数据 + 模板 结合,生成真实的DOM,来显示

 <div id ='abc'><span>hello world</span></div>

5.state发生变化

6.数据 + 模板 生成新的虚拟DOM   (极大提升了性能)
 ['div',{id:'abc'},['span',{},'baybay']]
7.比较原始虚拟DOM和新的虚拟DOM的区别,找到区别是span中的内容   (极大的提升了性能)
8.直接操作DOM,改变span中的内容
 

1.state数据

2.JSX模板

3.数据 + 模板 生成虚拟DOM(虚拟DOM就是一个JS对象,用他来描述真实DOM)   (损耗了性能)

 ['div',{id:'abc'},['span',{},'hello world']]

4.用虚拟DOM的结构生成真实的DOM,来显示

 <div id ='abc'><span>hello world</span></div>

5.state发生变化

6.数据 + 模板 生成新的虚拟DOM   (极大提升了性能)
 ['div',{id:'abc'},['span',{},'baybay']]
7.比较原始虚拟DOM和新的虚拟DOM的区别,找到区别是span中的内容   (极大的提升了性能)
8.直接操作DOM,改变span中的内容
 

1.state数据

2.JSX模板

3.数据 + 模板 生成虚拟DOM(虚拟DOM就是一个JS对象,用他来描述真实DOM)   (损耗了性能)

 ['div',{id:'abc'},['span',{},'hello world']]

4.用虚拟DOM的结构生成真实的DOM,来显示

 <div id ='abc'><span>hello world</span></div>

5.state发生变化

6.数据 + 模板 生成新的虚拟DOM   (极大提升了性能)
 ['div',{id:'abc'},['span',{},'baybay']]
7.比较原始虚拟DOM和新的虚拟DOM的区别,找到区别是span中的内容   (极大的提升了性能)
8.直接操作DOM,改变span中的内容

优点:

1.性能提升了。

2.使得跨端应用得以实现。React native

 
 

1.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

    相信你在看到此篇前也翻阅大量的对DOM的文章讲解和介绍 react中的虚拟DOM 此篇我尽量说人话(大白话),不然想必你在看到别的大神的文章早就懂了. 不说废话了,上干货. 1.首先简单对Html中的 ...

  4. React中的虚拟DOM

    当组件当state和props发生变化当时候,组件当render函数就会重新执行,组件就会被重新渲染,react中实现这种重新渲染,他的性能是非常高的,因为他引入了一个虚拟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. react 什么是虚拟DOM?深入了解虚拟DOM

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

  9. 详解Vue中的虚拟DOM

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

随机推荐

  1. BZOJ3037 创世纪[基环树DP]

    实际上基环树DP的名字是假的.. 这个限制关系可以看成每个点有一条出边,所以就是一个内向基环树森林. 找出每个基环树的环,然后对于树的部分,做DP,设状态选或不选为$f_{x,0/1}$,则 $f_{ ...

  2. org.springframework.amqp.rabbit.listener.exception.ListenerExecutionFailedException

    org.springframework.amqp.rabbit.listener.exception.ListenerExecutionFailedException: Listener method ...

  3. 基于STM32调试工具STM-STUDIO-STM32的使用

    手上有stlink下载器,正好看到官网有这个工具,可以在运行中实时查看变量的数据.这一点和ucos的ucprobe很类似. 参考https://mp.weixin.qq.com/s?src=11&am ...

  4. pandas中DataFrame和Series的数据去重

    在SQL语言中去重是一件相当简单的事情,面对一个表(也可以称之为DataFrame)我们对数据进行去重只需要GROUP BY 就好. select custId,applyNo from tmp.on ...

  5. 51nod 1989 竞赛表格 (爆搜+DP算方案)

    题意 自己看 分析 其实统计出现次数与出现在矩阵的那个位置无关.所以我们定义f(i)f(i)f(i)表示iii的出现次数.那么就有转移方程式f(i)=1+∑j+rev(j)=if(j)f(i)=1+\ ...

  6. HGOI20191115 模拟赛 题解

    Problem A 表演 有$n$个有点权的点,$m$个有边权的边.对于每个点$u$,输出从这个点出发到$v$,其路径权值的两倍加上v的点权和最小的值. 对于$100\%$的数据,满足$1 \leq ...

  7. Linux创建删除文件和文件夹

    要想删除和创建,需要有root权限 [xwg@bogon ~]$ su root密码:[root@bogon xwg]# cd /home/a      切换到目录a[root@bogon a]# t ...

  8. 制作自己的livecd

    把现有ubuntu系统打包,迁移到另外一台硬件一模一样的机器上. https://zhuanlan.zhihu.com/p/51827233 https://blog.csdn.net/vah101/ ...

  9. ImageSharp跨平台图片处理

    添加nuget引用 SixLabors.ImageSharp 和SixLabors.ImageSharp.Drawing 暂时只实现了缩略图..<pre>using SixLabors.I ...

  10. Django-cookie-sesson

    一 会话跟踪 我们需要先了解一下什么是会话!可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应.例如你给10086打个电话,你就是客户端,而10086服务人员就是服务器 ...