|
1、什么是虚拟DOM?
虚拟DOM可以看做是一个使用JavaScript模拟了DOM结构的树形结构,这个树结构包含了整个DOM结构的信息。 2、为什么要使用虚拟DOM? 1)、因为原生或者jq写页面的时候发现DOM是一件很复杂的事情,因为DOM和逻辑都会出现在js文件中,造成代码冗余和混乱,耦合性高并且难以维护。 2)、浏览器中一遍一遍渲染DOM会非常消耗性能。因此虚拟DOM是将DOM的对比放在了js层,通过对比不同之处来选择新渲染DOM节点,提高渲染效率(它直接用JavaScript实现了DOM树(大致上)。组件的HTML结构并不会直接生成DOM,而是映射生成虚拟的JavaScript DOM结构,React又通过在这个虚拟DOM上实现了一个 diff 算法找出最小变更,再把这些变更写入实际的DOM中。这个虚拟DOM以JS结构的形式存在,计算性能会比较好,而且由于减少了实际DOM操作次数, 性能会有较大提升。)。 3、虚拟DOM的优缺点: 优点:最终表现在DOM上的修改只是变更的部分,可以保证非常高效的渲染。 缺点:首次渲染大量DOM时,由于多了一层虚拟DOM的计算,会比innerHTML插入慢。 4、虚拟DOM的误区: 对虚拟DOM的理解往往停留在:通过JavaScript对象模拟原生DOM,加上DOM Diff 极大提升了DOM操作的性能。然而,虚拟DOM最大的意义不在于性能的提升(JavaScript对象比DOM对象性能高),而在于抽象了DOM的具体实现(对DOM进行了一层抽象),这在浏览器中使用 React时不是特别明显,因为写的DOM标签跟原生的没有区别,并且最终都被渲染成了DOM,在React Native中将会有很好的说明。 |
|
最新喜欢: |
|
沙发#
发布于:2018-08-28 21:49
|
|
|