-->

signed

QiShunwang

“诚信为本、客户至上”

React系列-虚拟DOM与Diff算法

2021/6/3 14:51:35   来源:

虚拟DOM

  • DOM本质:浏览器中的概念,用js对象表示页面元素,并提供一些操作元素的API
  • 虚拟DOM:是框架中的概念,用js对象来模拟页面中的DOM和DOM嵌套关系,API由程序员提供
  • 为什么要实现虚拟DOM?
    为了实现页面中DOM元素的高效更新
  • 如何实现DOM高效更新?
    按需更新,只重新渲染更新的数据所对应的页面元素
  • DOM树:
    1.请求服务器的HTML代码
    2.先在内存中,渲染出一颗DOM树
    3.把DOM树呈现到页面上
  • 如何实现页面的按需更新?
    获取内存中的新旧DOM树,然后进行比对,得到需要被更新的DOM元素
  • 如何获取到新旧DOM树?
    浏览器中并没有直接提供获取DOM树的API,程序员可以手动模拟新旧两颗DOM树
  • 如何模拟一个DOM元素?
    程序员通过js对象来模拟两条新旧DOM树,模拟的这两条新旧DOM树就是React中虚拟DOM的概念
  • 什么是虚拟DOM:用JS对象的形式来模拟页面上DOM嵌套关系

Diff算法

  • tree diff:新旧两颗DOM树每一层之前的对比过程,当整颗DOM对比完毕,则所有需要更新的元素必然能找到
  • component diff:在进行tree diff时,如果层级类型相同,则需要组件级别的对比
  • element diff:组件对比时,如果组件类型相同则需要元素级别的对比