乐趣区

关于前端:理解React-Virtual-DOM

jiezi

为什么会写出这篇文章呢？

可能的起因是以前学习框架的时候只学语法和原理不明确，被问到应用框架有什么益处也答复不上来，正是因为这种状况，所以明天要来探讨一下 Virtual DOM 的作用原理。

在理解 Virtual DOM 之前什么是 DOM 吧！

DOM 是什么？
文件模型（Document Object Model,DOM）HTML、XML 和 SVG 文件的程序介面。它提供了文件（树）的程序的文件示意办法，并定义了拜访并扭转文件架构、格调和内容的办法。（摘取自 MDN 的局部阐明）
由下图能够晓得 DOM 是树状构造从文档根结点向下延长，上面附丽了很多节点

援用 MDN 的图纸

咱们常常利用 js 来操作 DOM 更新浏览器在更新触发画面的从新申明，当回流工夫以及回流（重）这两个更新机制。

重绘
画面元素更换款式的时候就触发（background-color、color…）

回流
更改画面的操作构造（构造排列）触发（更改视窗大小，css 属性：position、width、height…）

很简略，这是一个很失常的运行起因，它是一个十分重要的播放器就能够只更新须要异动的局部。

Virtual DOM 的流程
1、什么货色应用 setState() 办法的时候，React 会先复制一个 dom（即为 Virtual DOM）

2、的扭转时，会比对先前的虚构 DOM 和以后的虚构 DOM 区别，当从新口头组件的不同状态

3、Virtual DOM 先用的演算法（diff 算出理论的局部，比对之后的不同，再动实在的 DOM，无效缩小本人的呈现），去进步须要更新的成果。

个别这是的 html 构造

<div id="header">   
  <h1 class="title"> 苹果 </h1> 
  <p class="content"> 柠檬 </p> 
</div>

这是 Virtual DOM 的构造，是 JavaScript 模仿进去的物件，会以上面的格局储存起来

{
    tag: "div",
    props: {id: "header"},
    children: [
        {
            tag: "h1",
            props: {className: "title"},
            children: ["Apple"]
        }, {
            tag: "p",
            props: {className: "content"},
            children: ["lemon"]
        }
    ]
}

上面咱们简略模仿一下虚构 dom 的流程

  1. createELement : 先应用 Virtual DOM 提供的 createELement 办法來生成真是 DOM
var count = 0;

var tree = render(count);
var rootNode = createElement(tree);
document.body.appendChild(rootNode);

2、当 count 变动时 Virtual DOM 进行比照 再将差别 patch 到实在的 DOM

count++
var newTree = render(count);
var patches = diff(tree, newTree);
rootNode = patch(rootNode, patches);
tree = newTree;

什么是 patch？patch 指的是在原有的 DOM 构造上做异动

对于 diff 算法

图片起源 https://www.cronj.com/blog/di…

传统的 diff 演算法复杂度为 O(n³) 解决 100 个节点对 100 万次的比值，Virtual DOM 的 diff 演算算法为 O(n)与传统的差异化预测下：
1、Virtual DOM 比拟雷同层级的节点
2、同一层的同一节点再次出现一个惟一的要害，就是防止挪动被再次创立。
3、如果发现不见了其子节点也会一并打消，不会再做比对 开发者只有在数据逻辑上运行一次更新机制全副主动解决。

对于 diff 算法的具体了解，能够继续关注更新。

退出移动版