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

dendoink 發(fā)布于2019-08-22 16:43 / 1646人閱讀

摘要：上集回顧從零開始手把手教你實現(xiàn)一個一上一集我們介紹了什么是，為什么要用，以及我們要怎樣來實現(xiàn)一個。完成后，在命令行中輸入安裝下依賴。最后返回這個目標(biāo)節(jié)點。明天，我們迎接挑戰(zhàn)，開始處理數(shù)據(jù)變動引起的重新渲染，我們要如何新舊，生成補(bǔ)丁，修改。

上集回顧

從零開始手把手教你實現(xiàn)一個Virtual DOM（一）
上一集我們介紹了什么是VDOM，為什么要用VDOM，以及我們要怎樣來實現(xiàn)一個VDOM。我們再來看一下這張藍(lán)圖，今天我們要實現(xiàn)的是這張圖的左半部分。

package.json

{
  "name": "vdom",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "compile": "babel index.js --out-file compiled.js"
  },
  "author": "",
  "license": "",
  "devDependencies": {
    "babel-cli": "^6.23.0",
    "babel-plugin-transform-react-jsx": "^6.23.0"
  }
}

這里主要主要兩點：

devDependencies中依賴babel-cli和babel-plugin-transform-react-jsx這兩個庫，前者提供Babel的命令行功能，后者主要幫我們把jsx轉(zhuǎn)化成js。

scripts中我們指定了一條命令：complile，每次當(dāng)我們在當(dāng)前目錄下的命令行中敲npm run compile時，babal就會將我們的index.js轉(zhuǎn)化后新建一個compile.js文件。

完成后，在命令行中輸入npm install安裝下依賴。

.babelrc

{
  "plugins": [
    ["transform-react-jsx", {
      "pragma": "h"  // default pragma is React.createElement
    }]
  ]
}

在babel的配置文件中，我們指定transform-react-jsx這個插件將轉(zhuǎn)化后的函數(shù)名設(shè)置為h。默認(rèn)的函數(shù)名是React.createElement，我們不依賴react，所以顯然換個自己的名字更合適。這里不清楚h是干什么的不要緊，等會看到代碼你就知道了。

index.html



  
    
    VDOM

這個HTML還是很直觀的，類似React，我們有一個根節(jié)點id是app。然后我們render函數(shù)最終生成的DOM會插入到app這個根節(jié)點里。注意我們引用的compile.js文件是babel根據(jù)等會要寫的index.js文件自動生成的。

index.js

首先，我們用JSX來編寫“模板”：

function view() {
  return 
    Detective Chinatown Vol 2
    Ferdinand
    Paddington 2
  
}

接下來，我們要將JSX編譯成js, 也就是hyperscript。我們先用Babel編譯一下，看這段JSX轉(zhuǎn)成js會是什么樣子，打開命令行，輸入npm run compile,得到的compile.js：

function view() {
  return h(
    "ul",
    { id: "filmList", className: "list" },
    h(
      "li",
      { className: "main" },
      "Detective Chinatown Vol 2"
    ),
    h(
      "li",
      null,
      "Ferdinand"
    ),
    h(
      "li",
      null,
      "Paddington 2"
    )
  );
}

可以看出h函數(shù)接收的參數(shù)，第一個參數(shù)是node的類型，比如ul,li，第二個參數(shù)是node的屬性，之后的參數(shù)是node的children，假如child又是一個node的話，就會繼續(xù)調(diào)用h函數(shù)。

清楚了Babel會將我們的JSX編譯成什么樣子后，接下來我們就可以繼續(xù)在index.js中來寫h函數(shù)了。

function flatten(arr) {
  return [].concat(...arr)
}

function h(type, props, ...children) {
  return {
    type,
    props: props || {},
    children: flatten(children)
  }
}

我們的h函數(shù)主要的工作就是返回我們真正需要的hyperscript對象，只有三個參數(shù)，第一個參數(shù)是節(jié)點類型，第二個參數(shù)是屬性對象，第三個是子節(jié)點的數(shù)組。

這里主要用了ES6的rest, spread參數(shù)，不清楚代碼中兩個...分別是什么意思的可以先去看我的介紹ES6文章30分鐘掌握ES6/ES2015核心內(nèi)容（上）。簡單來說，rest就是上面的...children，它將函數(shù)多余的參數(shù)放到一個數(shù)組里，所以children此時變成了一個數(shù)組。而spread則是rest的逆運算，也就是上面的...arr，它將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列。

flatten(children)這個操作是因為children這個數(shù)組里的元素有可能也是個數(shù)組，那樣就成了一個二維數(shù)組，所以我們需要將數(shù)組拍平成一維數(shù)組。[].concat(...arr)是ES6寫法，傳統(tǒng)的寫法是[].concat.apply([], arr)

我們現(xiàn)在可以先來看一下h函數(shù)最終返回的對象長什么樣子。

function render() {
  console.log(view())
}

我們在render函數(shù)中打印出執(zhí)行完view()的結(jié)果，再npm run compile后，用瀏覽器打開我們的index.html，看控制臺輸出的結(jié)果。

可以，很完美！這個對象就是我們的VDOM了！

下面我們就可以根據(jù)VDOM, 來渲染真實DOM了。先改寫render函數(shù):

function render(el) {
  el.appendChild(createElement(view(0)))
}

createElement函數(shù)生成DOM，然后再插入到我們在index.html中寫的根節(jié)點app。注意render函數(shù)式在index.html中被調(diào)用的。

function createElement(node) {
  if (typeof(node) === "string") {
    return document.createTextNode(node)
  }

  let { type, props, children } = node
  const el = document.createElement(type)
  setProps(el, props)
  children.map(createElement)
    .forEach(el.appendChild.bind(el))

  return el
}

function setProp(target, name, value) {
  if (name === "className") {
    return target.setAttribute("class", value)
  }

  target.setAttribute(name, value)
}

function setProps(target, props) {
  Object.keys(props).forEach(key => {
    setProp(target, key, props[key])
  })
}

我們來仔細(xì)看下createElement函數(shù)。假如說node，即VDOM的類型是文本，我們直接返回一個創(chuàng)建好的文本節(jié)點。否則的話，我們?nèi)〕鰊ode中類型，屬性和子節(jié)點, 先根據(jù)類型創(chuàng)建相應(yīng)的目標(biāo)節(jié)點，然后再調(diào)用setProps函數(shù)依次設(shè)置好目標(biāo)節(jié)點的屬性，最后遍歷子節(jié)點，遞歸調(diào)用createElement方法，將返回的子節(jié)點插入到剛剛創(chuàng)建的目標(biāo)節(jié)點里。最后返回這個目標(biāo)節(jié)點。

還需要注意的一點是，jsx中class的寫成了className，所以我需要特殊處理一下。

大功告成，complie后瀏覽器打開index.html看看結(jié)果吧。

今天我們成功的完成了藍(lán)圖的左半部分，將JSX轉(zhuǎn)化成hyperscript，再轉(zhuǎn)化成VDOM，最后根據(jù)VDOM生成DOM，渲染到頁面。明天，我們迎接挑戰(zhàn)，開始處理數(shù)據(jù)變動引起的重新渲染，我們要如何DIFF新舊VDOM，生成補(bǔ)丁，修改DOM。