文档章节

react入门系列之虚拟DOM

o
 osc_wws45aot
发布于 2019/08/20 14:28
字数 1247
阅读 7
收藏 0

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

### 什么是虚拟DOM

#### 数据变化页面同步渲染的逻辑,这里分析三种逻辑。

1. 先有数据 (state)
2. 模版(render中的jsx)
3. 数据 + 模版 = 生成真实Dom,来显示
4. state 发生改变
5. 数据 + 模版 = 生成真实Dom,替换原有的DOM
- 缺陷: 第一次生成真实dom,第二次又生成一个。最后替换。非常耗性能。
- 原因: 生成一个完整的dom,和替换一个完整的dom,非常耗性能。并不是每次数据变化dom的所有内容都要变。

1. 先有数据 (state)
2. 模版(render中的jsx)
3. 数据 + 模版 = 生成真实Dom,来显示
4. state 发生改变
5. 数据 + 模版 = 生成真实Dom,并不直接替换原始的DOM
6. 新旧DOM做对比,找差异。注意新的DOM其实是DoucumentFragment: 文档碎片并没有真实的挂载到页面上。
7. 找出input框发生变换
8. 只用新DOM中的input元素,替换掉老的DOM中的input元素。
- 缺陷: 节约了完整dom替换的性能,但是消耗了对比的性能。效果不明显。

1. 先有数据 (state)
2. 模版(render中的jsx)
3. 数据 + 模版 = 生成虚拟DOM(生成虚拟DOM是一个js对象,用它来描述真是DOM)(损耗性能非常小)
1. ['div', {id: 'abc'}, ['span', {}, 'hello,world']]
4. 用虚拟DOM的结构生成真实Dom,来显示
1. <div id='abc'><span>hello,world</span></div>
5. state 发生改变
6. 数据 + 模版 = 生成新的虚拟DOM(极大提升了性能)
1. ['div', {id: 'abc'}, ['span', {}, 'bye,bye']]
7. 比较原始虚拟DOM和新的虚拟DOM的区别,找到区别是span中的内容
8. 直接操作DOM改变span中的DOM
- 优势:
1. 减少了对真实DOM的创建,性能提高很大
2. js对象的比对非常不消耗性能的。
- 原因:
1. js去生产一个虚拟DOM其实就是一个js对象,而使用js去生成一个js对象是不怎么消耗性能的。
2. 对比上面两种方法,不仅减少了真实DOM的生产,同时也没有了真实DOM的对比,虚拟DOM对比也是非常节约新能的。

### 深入了解虚拟DOM

1. jsx --> createElement --> js对象(虚拟dom) --> 真实DOM
2. jsx实际上就是一个模版。
3. react将数据和jsx模版结合通过createElement方法生成js对象,也就是虚拟dom。
- React.createElement('div', {}, 'item') // {}为div属性
- return <div>item</div>
- 以上两行代码效果是一样的,都是创建了虚拟dom
4. 最后react再将虚拟dom生成真实dom
5. 虚拟dom带来的好处
1. 性能提升:真实dom的比对变成了js对象比对
2. 它使得跨端应用得以实现,React Native
- 虚拟dom是js对象,他可以同时在原生应用里面和浏览器中都能识别。真实dom是不能在原生应用识别的。
- 在原生应用中,我们可以使用虚拟dom转化成原生组件。这让我们能够开发原生应用。

### 虚拟dom中的diff算法

1. 算法运用在比较原始虚拟DOM和新的虚拟DOM的比对中
- 两个虚拟dom的比对就叫diffrence算法(react底层会用到),大大提高了比对效率
2. 什么时候会发生比对。
- 当你调用setState()的时候,就会发生比对。
- setState()是一个异步方法。
1. 为什么是一个异步呢。
2. 假设你调用了3次setState()方法。如果不是异步函数,是不是要进行3次虚拟dom比对呢?所以react将它设计成异步函数。
3. diff算法
- 同级比较
1. 从第一层虚拟DOM开始比较,如果差异,他就不再对比,他会将第一层以及该层对应的子节点都替换掉。
2. 这样比较确实会造成渲染的浪费,因为可能子节点会有相同的地方。
3. 优势在于比对算法简单,他可以大大减少比对的时间。
- 为什么在我们给dom的key值赋值时候,不要使用index?
1. 首先我们要知道,为什么我们在循环遍历DOM的时候要给DOM设置一个key值。
2. 每个DOM设置一个key,相当于给每个dom起了一个名字。在做虚拟dom对比的时候,我们只需要按名字对比,不需要通过dom内容现找到对应的dom再进行对比,这样就节省了新能。
3. 为什么不能用index呢?因为index不具备稳定性,当你删除某一个dom后,可能你整个dom树的key值都会发生变化。
4. 我们可以使用dom的内容去做key,因为内容改变本身dom就需要重新渲染。就拿todolist来说key可以绑定value值。
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
从 0 到 1 实现 React 系列 —— 1.JSX 和 Virtual DOM

看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/...) 从 0 到 1 实现 Reac...

osc_3xdojbp9
2018/07/06
5
0
【React】529- 手写虚拟DOM和DOM-diff

本文分享自微信公众号 - 前端自习课(FE-study)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

前端自习课
03/12
0
0
React-Native入门指南(六)——JSX在React-Native中的应用

React-Native入门指南 github:https://github.com/vczero/react-native-lession React-Native:用JavaScript开发你的原生应用,释放Native的UI体验,体验 Hybird开发效率。 最近一个星期写的文...

vczero
2015/06/29
256
0
《后端也要懂一点前端系列》React入门

在上一篇文章中我们使用了webpack搭建项目并成功运行了起来,但是对于在公司使用而言这点是完全不够的,所以接下来我们就开始学习如何使用框架来进行开发。本篇文章不会探讨原理,只是从一个...

不学无数的程序员
2019/12/07
86
0
React快速入门

简介 React是Facebook开源的一个用于构建用户界面的Javascript库,已经 应用于Facebook及旗下Instagram。 和庞大的AngularJS不同,React专注于MVC架构中的V,即视图。 这使得React很容易和开...

笔阁
2015/04/23
1.6K
0

没有更多内容

加载失败,请刷新页面

加载更多

Kubernetes发布SpringBoot项目过程总结

SpringBoot 项目创建完成后,通常会打成 jar 包运行,如果不使用 Kubernetes 可以直接通过 java -jar 或者脚本启动,如果需要发布到 Kubernetes 环境,那么需要编写 Dockerfile、构建镜像、推...

strict_nerd
05/23
0
0
👉 最新推出【Jenkins扩展篇-API实践|监控】教程🎉🎉🎉 助力全方位Jenkins管理!课程详情可添加小助手微信: proc_code。

本文分享自微信公众号 - DevOps云学堂(idevopsvip)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

泽阳DevOps
02/18
0
0
没错,用三方 Github 做授权登录就是这么简单!(OAuth2.0实战)

本文收录在个人博客:www.chengxy-nds.top,技术资源共享。 上一篇《OAuth2.0 的四种授权方式》文末说过,后续要来一波OAuth2.0实战,耽误了几天今儿终于补上了。 最近在做自己的开源项目(f...

程序员内点事
21分钟前
29
0
Docker可视化工具Portainer

前言 对于新手来说,还是要熟悉并掌握Docker命令,因为它的命令还是非常清晰简单的。随着逐渐熟悉命令后,为了提高工作效率我们可以考虑借助一些工具协助。目前业界对于Docker可视化工具比较...

ville
25分钟前
29
0
从 Git 仓库的 Commit 历史中移除敏感文件

在很多情况,我们由于疏忽会将一些敏感信息误传到 Git 仓库上面去。 尽管我们可以使用git rm将包含敏感信息文件删除掉,然后重新提交上传,文件就不会在仓库文件列表显示。 但是这并不能完全...

A_laoshiren
30分钟前
35
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部