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

3次阅读

共计 1518 个字符，预计需要花费 4 分钟才能阅读完成。

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

可能的起因是以前学习框架的时候只学语法和原理不明确，被问到应用框架有什么益处也答复不上来，正是因为这种状况，所以明天要来探讨一下 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 的流程

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 算法的具体了解，能够继续关注更新。

正文完