摘要：函數(shù)依次做了這幾件事調(diào)用函數(shù)，對(duì)比新舊兩個(gè)，根據(jù)兩者的不同得到需要修改的補(bǔ)丁將補(bǔ)丁到真實(shí)上當(dāng)計(jì)數(shù)器小于等于的時(shí)候，將加，再繼續(xù)下一次當(dāng)計(jì)數(shù)器大于的時(shí)候，結(jié)束下面我們來實(shí)現(xiàn)函數(shù)和函數(shù)。

【React進(jìn)階系列】從零開始手把手教你實(shí)現(xiàn)一個(gè)Virtual DOM（二）

上集我們實(shí)現(xiàn)了首次渲染從JSX=>Hyperscript=>VDOM=>DOM的過程，今天我們來看一下當(dāng)數(shù)據(jù)變動(dòng)的時(shí)候怎么更新DOM，也就是下圖的右半邊部分。

function view(count) { 
  const r = [...Array(count).keys()]
  return 

    { r.map(n => 
item {(count * n).toString()}
) }
  
}

我們的view函數(shù)接收一個(gè)參數(shù)count，變量r表示從0到count-1的一個(gè)數(shù)組。假如count=3, r=[0, 1, 2]。ul的className的值有三種可能：list-0, list-1, list-2。li的數(shù)量取決于count。

function render(el) {
  const initialCount = 0

  el.appendChild(createElement(view(initialCount)))
  setTimeout(() => tick(el, initialCount), 1000)
}

function tick(el, count) {
  const patches = diff(view(count + 1), view(count))
  patch(el, patches)

  if(count > 5) { return }
  setTimeout(() => tick(el, count + 1), 1000)
}

render函數(shù)有兩個(gè)修改，首先調(diào)用view()的時(shí)候傳入count=0。其次，寫了一個(gè)定時(shí)器，1秒后悔執(zhí)行tick函數(shù)。tick函數(shù)接收兩個(gè)參數(shù)，el代表節(jié)點(diǎn)元素，count是當(dāng)前計(jì)數(shù)值。

tick函數(shù)依次做了這幾件事：

調(diào)用diff函數(shù)，對(duì)比新舊兩個(gè)VDOM，根據(jù)兩者的不同得到需要修改的補(bǔ)丁

將補(bǔ)丁patch到真實(shí)DOM上

當(dāng)計(jì)數(shù)器小于等于5的時(shí)候，將count加1，再繼續(xù)下一次tick

當(dāng)計(jì)數(shù)器大于5的時(shí)候，結(jié)束

下面我們來實(shí)現(xiàn)diff函數(shù)和patch函數(shù)。

我們先列出來新舊兩個(gè)VDOM對(duì)比，會(huì)有哪些不同。在index.js文件的最前面聲明一下幾個(gè)常量。

const CREATE = "CREATE"   //新增一個(gè)節(jié)點(diǎn)
const REMOVE = "REMOVE"   //刪除原節(jié)點(diǎn)
const REPLACE = "REPLACE"  //替換原節(jié)點(diǎn)
const UPDATE = "UPDATE"    //檢查屬性或子節(jié)點(diǎn)是否有變化
const SET_PROP = "SET_PROP"  //新增或替換屬性
const REMOVE_PROP = "REMOVE PROP"  //刪除屬性

function diff(newNode, oldNode) {
   if (!oldNode) {
     return { type: CREATE, newNode }
   }

   if (!newNode) {
     return { type: REMOVE }
   }

   if (changed(newNode, oldNode)) {
     return { type: REPLACE, newNode }
   }

   if (newNode.type) {
     return {
       type: UPDATE,
       props: diffProps(newNode, oldNode),
       children: diffChildren(newNode, oldNode)
     }
   }
}

假如舊節(jié)點(diǎn)不存在，我們返回的patches對(duì)象, 類型為新增節(jié)點(diǎn)；

假如新節(jié)點(diǎn)不存在，表示是刪除節(jié)點(diǎn)；

假如兩者都存在的話，調(diào)用changed函數(shù)判斷他們是不是有變動(dòng)；

假如兩者都存在，且changed()返回false的話，判斷新節(jié)點(diǎn)是否是VDOM（根據(jù)type是否存在來判斷的，因?yàn)閠ype不存在的話，newNode要么是空節(jié)點(diǎn)，要么是字符串）。假如新節(jié)點(diǎn)是VDOM，則返回一個(gè)patches對(duì)象，類型是UPDATE，同時(shí)對(duì)props和children分別進(jìn)行diffProps和diffChildren操作。

下面我們一次看一下changed, diffProps, diffChildren函數(shù)。

function changed(node1, node2) {
  return typeof(node1) !== typeof(node2) ||
         typeof(node1) === "string" && node1 !== node2 ||
         node1.type !== node2.type
}

檢查新舊VDOM是否有變動(dòng)的方法很簡(jiǎn)單，

首先假如數(shù)據(jù)類型都不一樣，那肯定是變動(dòng)了；

其次假如兩者的類型都是純文本，則直接比較兩者是否相等；

最后比較兩者的類型是否相等。

function diffProps(newNode, oldNode) {
  let patches = []

  let props = Object.assign({}, newNode.props, oldNode.props)
  Object.keys(props).forEach(key => {
    const newVal = newNode.props[key]
    const oldVal = oldNode.props[key]
    if (!newVal) {
      patches.push({type: REMOVE_PROP, key, value: oldVal})
    }

    if (!oldVal || newVal !== oldVal) {
      patches.push({ type: SET_PROP, key, value: newVal})
    }
  })

  return patches
}

比較新舊VDOM的屬性的變化，并返回相應(yīng)的patches。

首先我們采用最大可能性原則，將新舊VDOM的所有屬性都合并賦值給一個(gè)新的變量props

遍歷props變量的所有Keys，依次比較新舊VDOM對(duì)于這個(gè)KEY的值

假如新值不存在，表示這個(gè)屬性被刪除了

假如舊值不存在，或者新舊值不同，則表示我們需要重新設(shè)置這個(gè)屬性

function diffChildren(newNode, oldNode) {
  let patches = []

  const maximumLength = Math.max(
    newNode.children.length,
    oldNode.children.length
  )
  for(let i = 0; i < maximumLength; i++) {
    patches[i] = diff(
      newNode.children[i],
      oldNode.children[i]
    )
  }

  return patches
}

同樣采用最大可能性原則，取新舊VDOM的children的最長(zhǎng)值作為遍歷children的長(zhǎng)度。然后依次比較新舊VDOM的在相同INDEX下的每一個(gè)child。

這里需要強(qiáng)烈注意一下
為了簡(jiǎn)化，我們沒有引入key的概念，直接比較的是相同index下的child。所以假如說一個(gè)列表ul有5項(xiàng)，分別是li1, li2, li3, li4, li5; 如果我們刪掉了第一項(xiàng)，新的變成了li2, li3, li4, li5。那么diffchildren的時(shí)候，我們會(huì)拿li1和li2比較，依次類推。這樣一來，本來只是刪除了li1, 而li2, li3, li4, li5沒有任何變化，我們得出的diff結(jié)論卻是[li替換，li2替換, li3替換, li4替換, li5刪除]。所以react讓大家渲染列表的時(shí)候，必須添加Key。

截止到現(xiàn)在，我們已經(jīng)得到了我們需要的補(bǔ)丁。下面我們要將補(bǔ)丁Patch到DOM里。

function patch(parent, patches, index = 0) {
  if (!patches) {
    return
  }

  const el = parent.childNodes[index]
  switch (patches.type) {
    case CREATE: {
      const { newNode } = patches
      const newEl = createElement(newNode)
      parent.appendChild(newEl)
      break
    }
    case REMOVE: {
      parent.removeChild(el)
      break
    }
    case REPLACE: {
      const {newNode} = patches
      const newEl = createElement(newNode)
      return parent.replaceChild(newEl, el)
      break
    }
    case UPDATE: {
      const {props, children} = patches
      patchProps(el, props)
      for(let i = 0; i < children.length; i++) {
        patch(el, children[i], i)
      }
    }
  }
}

首先當(dāng)patches不存在時(shí)，直接return，不進(jìn)行任何操作

利用childNodes和Index取出當(dāng)前正在處理的這個(gè)節(jié)點(diǎn)，賦值為el

開始判斷補(bǔ)丁的類型

當(dāng)類型是CREATE時(shí)，生成一個(gè)新節(jié)點(diǎn)，并append到根節(jié)點(diǎn)

當(dāng)類型是REMOVE時(shí)，直接刪除當(dāng)前節(jié)點(diǎn)el

當(dāng)類型是REPLACE時(shí)，生成新節(jié)點(diǎn)，同時(shí)替換掉原節(jié)點(diǎn)

當(dāng)類型是UPDATE時(shí)，需要我們特殊處理

調(diào)用patchProps將我們之前diffProps得到的補(bǔ)丁渲染到節(jié)點(diǎn)上

遍歷之前diffChildren得到的補(bǔ)丁列表，再依次遞歸調(diào)用patch

最后我們?cè)傺a(bǔ)充一下patchProps函數(shù)

function patchProps(parent, patches) {
  patches.forEach(patch => {
    const { type, key, value } = patch
    if (type === "SET_PROP") {
      setProp(parent, key, value)
    }
    if (type === "REMOVE_PROP") {
      removeProp(parent, key, value)
    }
  })
}

function removeProp(target, name, value) { //@
  if (name === "className") {
    return target.removeAttribute("class")
  }

  target.removeAttribute(name)
}

這個(gè)就不用我解釋了，代碼很直觀，setProp函數(shù)在上一集我們已經(jīng)定義過了。這樣一來，我們就完成了整個(gè)數(shù)據(jù)更新導(dǎo)致DOM更新的完整過程。
npm run compile后打開瀏覽器查看效果，你應(yīng)該看到是一個(gè)背景顏色在不同變化，同時(shí)列表項(xiàng)在逐漸增加的列表。

至此，我們的VDOM就全部完成了。系列初我提出的那幾個(gè)問題不知道你現(xiàn)在是否有了答案。有答案的童鞋可以在文章評(píng)論區(qū)將你的見解跟大家分享一下。分析全面且準(zhǔn)確的會(huì)收到我的特殊獎(jiǎng)勵(lì)。