zoukankan      html  css  js  c++  java
  • React的Virtual DOM厉害了

    React 的伟大之处就在于,提出了Virtual DOM这种新颖的思路,并且这种思路衍生出了React Native,有可能会统一Web/Native开发。

    在性能方面,由于用到了Virtual DOM技术,React只在调用setState时会更新dom,而且还是更新virtual DOM,然后和实际的DOM比较,最后再更新实际的DOM。

    Virtual DOM的核心思想是:批量操作DOM和作用最少的diff

    你一个接一个地去修改30个节点的时候,就会引起30次(潜在的)布局重算,30次(潜在的)重绘,等等。

    之后,一旦你要把这些改动传递给真实DOM,之前所有的改动就会整合成一次DOM操作。这一次DOM操作引起的布局计算和重绘可能会更大,但是相比而言,整合起来的改动只做一次,减少了(多次)计算。

    这就是所谓的Virtual DOM算法,包括几个步骤:

    1.用javascript对象结构表示DOM树的结构,然后用这个树构建一个真正的DOM树,插入到文档流中

    2.当文档变更时,重新构造一颗新的对象树,然后用新的对象树和旧的对象树对比,记录两棵树的差异

    3.把2所记录的差异应用到1所构建的真正的DOM树上,就实现变更了

     

    Virtual DOM本质上就是在JS和DOM之间做了一个缓存。可以类比CPU和硬盘,既然硬盘这么慢,我们就在他们之间加一个缓存。既然JS这么慢,我们就在JS和DOM之间加一个缓存。CPU只操作内存,最后把变更写入硬盘。JS只操作Virtual DOM,最后把变更写入DOM。

     

    其思想的关键是:

    1.相对于 DOM 对象,原生的JS对象处理起来更快更简单。

    2.比较两棵DOM树的差异是 Virtual DOM算法最核心的部分,这也是所谓的Vritual DOM的diff算法。 

     

    为什么快很多?

    当然如果真的这样大面积的操作 DOM,性能会是一个很大的问题,所以 React 实现了一个虚拟 DOM,组件 DOM 结构就是映射到这个虚拟 DOM 上,React 在这个虚拟 DOM 上实现了一个 diff 算法,当要更新组件的时候,会通过 diff 寻找到要变更的 DOM 节点,再把这个修改更新到浏览器实际的 DOM 节点上,所以实际上不是真的渲染整个 DOM 树。这个虚拟 DOM 是一个纯粹的 JS 数据结构,所以性能会比原生 DOM 快很多

  • 相关阅读:
    删除顺序表L中下标为p(0<=p<=length-1)的元素,成功返回1,不成功返回0,并将删除元素的值赋给e
    设顺序表中的数据元素递增有序,试着写一算法,将x插入到顺序表上的适当位置上,以保持该表的有序性。
    数据结构-顺序表基本操作的实现(含全部代码)【转】
    【转】结构体指针
    结构体(第十四章 )
    线性表
    第二章 c语言概述
    时间复杂度
    软件质量与测试 黑盒测试
    软件质量保证与测试 基本内容
  • 原文地址:https://www.cnblogs.com/greatluoluo/p/6594469.html
Copyright © 2011-2022 走看看