1.React中的虚拟DOM
2024-09-03 19:34:42
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
最新文章
- Android中数据的传递以及对象序列化
- KBEngine 学习笔记
- SetTimer函数的用法
- Wpf 数据绑定之BindingBase.StringFormat
- 【Python】关于Python有意思的用法
- .8-Vue源码之AST(4)
- hdu_1034(模拟题)
- ASP.NET WebAPI String 传值问题
- Model类代码生成器
- WPF:完美自定义MeaagseBox 2.0
- Node.js这么下去...
- 数位DP入门题
- 51Nod1577 异或凑数 线性基 构造
- [转]使用C#调用cmd来执行sql脚本
- 银行卡号码校验算法(Luhn算法,又叫模10算法)
- openstack 部署(Q版)-----环境准备篇
- MongoDB(课时3 MongoDB基本操作)
- zabbix监控vCenter报错,无法自动发现主机
- java-Excel导出中的坑
- 1D mesauring
热门文章
- Elasticsearch: Index template
- Educational Codeforces Round 73 (Rated for Div. 2) C. Perfect Team
- JDBC (Java DataBase Connectivity)数据库连接池原理解析与实现
- Codeforces Round #402 (Div. 2) D题 【字符串二分答案+暴力】
- PHP mysqli_next_result() 函数
- luogu 4411 [BJWC2010]取数游戏 约数+dp
- Postman使用tv4进行JSON Schema结构验证和断言
- Linux 网络通信命令之 netstat
- 函数柯里化与偏函数+bind
- linux技巧----查找某个正在执行的脚本