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
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- React从入门到精通系列之(14)refs和DOM元素
- React系列--jsx语法及虚拟dom,渲染
- ReactJS学习系列课程附加2(React虚拟DOM分析)
- React生命周期和虚拟DOM
- 极客react之Ant Design Pro系列快速入门(二)--登录与默认路径篇
- React入门系列二(React-JSX)
- 深刻理解 React (一) ——JSX和虚拟DOM
- 《后端也要懂一点前端系列》React入门
- snabbdom.js虚拟DOM入门
- React Native Android入门实战及深入源码分析系列(2)——React Native源码编译
- react 虚拟dom 的原理简单理解
- Moon系列之虚拟DOM相关
- react入门系列之生命周期钩子函数
- 深刻理解 React (一) ——JSX和虚拟DOM
- React从入门到精通系列之(14)refs和DOM元素
- React 虚拟 DOM 的差异检测机制
- React虚拟DOM具体实现——利用节点json描述还原dom结构
- 极客react之Ant Design Pro系列快速入门(五)--更改控件的默认样式
- 关于react虚拟DOM的研究
- 浅谈React的最大亮点——虚拟DOM