您的位置:首页 > Web前端 > React

react入门系列之虚拟DOM

2020-02-13 21:45 183 查看

### 什么是虚拟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值。

转载于:https://www.cnblogs.com/boye-1990/p/11382700.html

  • 点赞
  • 收藏
  • 分享
  • 文章举报
anchi2021 发布了0 篇原创文章 · 获赞 0 · 访问量 140 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: