React中的视图更新与虚拟DOM

版权声明：欢迎交流讨论 https://blog.csdn.net/qq_37746973/article/details/82933347

React中的视图更新过程

1. state 数据

2. JSX 模板

3. 用虚拟DOM的结构，生成真实的DOM

 ['div', {id: 'abc'}, ['span', {}, 'Hello']]

4. 用虚拟DOM的结构，生成真实的DOM

 <div id="abc"><span>Hello!</span></div>

5. 数据state 发生改变

6. 数据 + 模板 生成新的虚拟DOM

['div', {id: 'abc'}, ['span', {}, 'World!']]

7. 比较原始虚拟DOM和新虚拟DOM的区别(diff算法)，找到区别是span中的内容

8.  操作DOM，只改变span中的内容

VDOM优点：

1. 性能得到提升
2. 它使得跨端应用( React Native )得以实现。在浏览器端是将虚拟DOM转换为一个个的浏览器DOM节点。而如果将他转换为原生应用的组件，那么跨端应用就能得到实现。

为什么使用VDOM极大的提升了性能？

1. 虚拟DOM的使用让页面只重新生成数据变更的DOM，而不是把整个页面重新绘制出来。
2. 虚拟DOM其实就是JS对象。在比较数据哪里发生变化的时候效率极高。如果去生成一个真实的DOM树和已有的DOM树比较效率是很低的，因为JS生成DOM树会调用web application级的API，这种级别的API性能损耗是很大的。