React 虚拟DOM 与 Diff算法

跳至 React 中文官网

虚拟DOM

DOM: 是浏览器中的概念，浏览器中用js对象来表示页面上的元素，并提供操作这个dom对象的api

虚拟DOM：是React框架中的概念，是开发React框架的程序员用js对象来模拟页面上的DOM元素。

React的虚拟DOM(js对象),实现元素的高效更新

Diff算法

• Tree Diff: 新旧两棵DOM树，逐层对比。
• Component Diff: 每一层中，组件级别的对比
  • 如果对比前后，组件的类型相同，则暂时认为此组件不需要被更新
  • 如果对比前后，组件类型不同，则需要移除旧组件，创建新组件，并追加到页面上
• Element Diff: 在进行组件对比的时候，如果两个组件类型相同，则需要进行元素级别的对比

按需更新：只更新需要更新的DOM元素

对比后，得到需要更新的DOM元素
   => 浏览器中是没有提供能够获取DOM树的api,
      所以我们并不能拿到浏览器中的DOM,也就是标准DOM

   => react程序员手动模拟DOM树
      通过模拟的js对象的各个节点对比，
      如果节点内容没有变化，则不需要更新；
      如果节点内容有变化，则标记这是需要更新的DOM部分即可