摘要：當(dāng)中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風(fēng)格，而不會影響布局的，比如。則就叫稱為重繪。

原文博客地址：https://finget.github.io/2018/05/22/virtualDom/

用JS模擬DOM結(jié)構(gòu)

DOM變化的對比，放在JS層來做（圖靈完備語言）

提高重繪性能

頁面渲染過程：

當(dāng)render tree中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建。這就稱為回流(reflow)。

當(dāng)render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風(fēng)格，而不會影響布局的，比如background-color。則就叫稱為重繪。

  
Item 1
  
Item 2

// js模擬虛擬DOM
{
  tag: "ul",
  attrs:{
    id: "list"
  },
  children:[
    {
      tag: "li",
      attrs: {className: "item"},
      children: ["Item 1"]
    },
    {
      tag: "li",
      attrs: {className: "item"},
      children: ["Item 2"]
    }
  ]
}

  
  
  


  

  change

  

雖然只改變了兩個(gè)數(shù)據(jù)，但是整個(gè)table都閃爍了（回流&重繪）

DOM操作是‘昂貴’的，js運(yùn)行效率高

盡量減少DOM操作，盡量減少回流重繪

snabbdom GitHub地址

官網(wǎng)例子：

var snabbdom = require("snabbdom");
var patch = snabbdom.init([ // Init patch function with chosen modules
  require("snabbdom/modules/class").default, // makes it easy to toggle classes
  require("snabbdom/modules/props").default, // for setting properties on DOM elements
  require("snabbdom/modules/style").default, // handles styling on elements with support for animations
  require("snabbdom/modules/eventlisteners").default, // attaches event listeners
]);
var h = require("snabbdom/h").default; // helper function for creating vnodes

var container = document.getElementById("container");

// h函數(shù)生成一個(gè)虛擬節(jié)點(diǎn)
var vnode = h("div#container.two.classes", {on: {click: someFn}}, [
  h("span", {style: {fontWeight: "bold"}}, "This is bold"),
  " and this is just normal text",
  h("a", {props: {href: "/foo"}}, "I"ll take you places!")
]);
// Patch into empty DOM element – this modifies the DOM as a side effect
patch(container, vnode); // 把vnode加入到container中

// 數(shù)據(jù)改變，重新生成一個(gè)newVnode
var newVnode = h("div#container.two.classes", {on: {click: anotherEventHandler}}, [
  h("span", {style: {fontWeight: "normal", fontStyle: "italic"}}, "This is now italic type"),
  " and this is still just normal text",
  h("a", {props: {href: "/bar"}}, "I"ll take you places!")
]);
// Second `patch` invocation
// 將newVnode更新到之前的vnode中，從而更新視圖
patch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new state

var vnode = h("ul#list",{},[
  h("li.item",{},"Item 1"),
  h("li.item",{},"Item 2")
])


{
  tag: "ul",
  attrs:{
    id: "list"
  },
  children:[
    {
      tag: "li",
      attrs: {className: "item"},
      children: ["Item 1"]
    },
    {
      tag: "li",
      attrs: {className: "item"},
      children: ["Item 2"]
    }
  ]
}

var vnode = h("ul#list",{},[
  h("li.item",{},"Item 1"),
  h("li.item",{},"Item 2")
])
var container = document.getElementById("container");
patch(container, vnode);

// 模擬改變
var btnChange = document.getElementById("btn-change");
btnChange.addEventListener("click",function(){
  var newVnode = h("ul#list",{},[
    h("li.item",{},"Item 111"),
    h("li.item",{},"Item 222"),
    h("li.item",{},"Item 333")
  ])
  patch(vnode, newVnode);
})

  
  
  
  
  
  
  
  


  

  change
  

看圖，只有修改了的數(shù)據(jù)才進(jìn)行了刷新，減少了DOM操作，這其實(shí)就是vnode與newVnode對比，找出改變了的地方，然后只重新渲染改變的

  
  


  

  change

  
  
  
  
  
  
  

h("<標(biāo)簽名>",{...屬性...},[...子元素...])

h("<標(biāo)簽名>",{...屬性...},"...")

patch(container,vnode)

patch(vnode,newVnode)

這里有兩個(gè)文本文件：

借用git bash中 diff 命令可以比較兩個(gè)文件的區(qū)別：

在線diff工具

虛擬DOM ---> DOM

// 一個(gè)實(shí)現(xiàn)流程，實(shí)際情況還很復(fù)雜
function createElement(vnode) {
  var tag = vnode.tag  // "ul"
  var attrs = vnode.attrs || {}
  var children = vnode.children || []
  if (!tag) {
    return null
  }

  // 創(chuàng)建真實(shí)的 DOM 元素
  var elem = document.createElement(tag)
  // 屬性
  var attrName
  for (attrName in attrs) {
    if (attrs.hasOwnProperty(attrName)) {
      // 給 elem 添加屬性
      elem.setAttribute(attrName, attrs[attrName])
    }
  }
  // 子元素
  children.forEach(function (childVnode) {
    // 給 elem 添加子元素
    elem.appendChild(createElement(childVnode))  // 遞歸
  })

  // 返回真實(shí)的 DOM 元素
  return elem
}

vnode ---> newVnode

function updateChildren(vnode, newVnode) {
  var children = vnode.children || [];
  var newChildren = newVnode.children || [];

  children.forEach(function (childVnode, index) {
    var newChildVnode = newChildren[index];
    if (childVnode.tag === newChildVnode.tag) {
        // 深層次對比，遞歸
        updateChildren(childVnode, newChildVnode);
    } else {
        // 替換
        replaceNode(childVnode, newChildVnode);
    }
  })
}

function replaceNode(vnode, newVnode) {
  var elem = vnode.elem;  // 真實(shí)的 DOM 節(jié)點(diǎn)
  var newElem = createElement(newVnode);
  // 替換
}

創(chuàng)建了一個(gè)前端學(xué)習(xí)交流群，感興趣的朋友，一起來嗨呀！