摘要：什么是虛擬在中，執(zhí)行的結(jié)果得到的并不是真正的節(jié)點(diǎn)，結(jié)果僅僅是輕量級(jí)的對(duì)象，我們稱之為。后來產(chǎn)出的架構(gòu)模式，期望從代碼組織方式來降低維護(hù)難度。

在React中，render執(zhí)行的結(jié)果得到的并不是真正的DOM節(jié)點(diǎn)，結(jié)果僅僅是輕量級(jí)的JavaScript對(duì)象，我們稱之為virtual DOM。

簡單的說，其實(shí)所謂的virtual DOM就是JavaScript對(duì)象到Html DOM節(jié)點(diǎn)的映射；即使用JavaScript對(duì)象將Html結(jié)構(gòu)表示出來，而這個(gè)對(duì)象就是virtual DOM。

eg:

Html:

  
Item 1
  
Item 2

JavaScript對(duì)象表示（virtual DOM）

{
  tagName: "ul",
  props: {
    id: "list"
  },
  children: [
    {tagName: "li", props: {class: "item"}, children: ["Item 1"]},
    {tagName: "li", props: {class: "item"}, children: ["Item 2"]},
  ]
}

React生命周期擁有裝載、更新、卸載的三個(gè)階段；附上一張React生命周期圖

前面提到：render執(zhí)行的結(jié)果得到的并不是真正的DOM節(jié)點(diǎn)，結(jié)果僅僅是輕量級(jí)的JavaScript對(duì)象，即在render函數(shù)調(diào)用時(shí)將會(huì)創(chuàng)建出虛擬DOM；

class Tab extends React.Component {
    render() {
        React.createElement(
          "p",
          { className: "class"},
          "Hello React"
        )
    }
}

通過React.createElemen創(chuàng)建出虛擬DOM，而該函數(shù)只在Render函數(shù)中調(diào)用，所以在React裝載和更新的過程中才會(huì)有虛擬DOM的生成；至于掛載到真實(shí)DOM自然而然是ReactDom.render函數(shù)啦。

實(shí)現(xiàn)其實(shí)很簡單，主要是定義一個(gè)函數(shù)并把我們傳進(jìn)去的參數(shù)組成一個(gè)React元素對(duì)象，而type就是我們傳進(jìn)去的組件類型，可以是一個(gè)類、函數(shù)或字符串（如"div"）

React大致源碼：

function createElement(type, config, children) {
  let propName;

  const props = {};

  let key = null;
  let ref = null;
  let self = null;
  let source = null;

  if (config != null) {
    if (hasValidRef(config)) {
      //  如果有ref，將它取出來
      ref = config.ref;
    }
    if (hasValidKey(config)) {
      //  如果有key，將它取出來
      key = "" + config.key;
    }

    self = config.__self === undefined ? null : config.__self;
    source = config.__source === undefined ? null : config.__source;
    
    for (propName in config) {
      if (
        hasOwnProperty.call(config, propName) &&
        !RESERVED_PROPS.hasOwnProperty(propName)
      ) {
        //  將除ref，key等這些特殊的屬性放到新的props對(duì)象里
        props[propName] = config[propName];
      }
    }
  }

  //  獲取子元素
  const childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    props.children = children;
  } else if (childrenLength > 1) {
    const childArray = Array(childrenLength);
    for (let i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }
    props.children = childArray;
  }

  //  添加默認(rèn)props
  if (type && type.defaultProps) {
    const defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }
  
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}

const ReactElement = function(type, key, ref, self, source, owner, props) {
  //  最終得到的React元素
  const element = {
    // This tag allows us to uniquely identify this as a React Element
    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element
    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for creating this element.
    _owner: owner,
  };

  return element;
};

打印出組件：

DOM管理歷史階段：

JS 或者 jQuery 操作 DOM： 當(dāng)應(yīng)用程序越來越復(fù)雜，需要在JS里面維護(hù)的字段也越來越多，需要監(jiān)聽事件和在事件回調(diào)用更新頁面的DOM操作也越來越多，應(yīng)用程序會(huì)變得非常難維護(hù)。

后來產(chǎn)出 MVC、MVP 的架構(gòu)模式，期望從代碼組織方式來降低維護(hù)難度。但是 MVC 架構(gòu)并沒辦法減少維護(hù)的狀態(tài)，也沒有降低狀態(tài)更新時(shí)需要對(duì)頁面的更新操作，你需要操作的DOM還是需要操作，只是換了個(gè)地方。

既然狀態(tài)改變了要操作相應(yīng)的DOM元素，為什么不做一個(gè)東西讓視圖和狀態(tài)進(jìn)行綁定，狀態(tài)變更了視圖自動(dòng)變更。這就是后來人們想出了 MVVM 模式，只要在模版中聲明視圖組件是和什么狀態(tài)進(jìn)行綁定的，雙向綁定引擎就會(huì)在狀態(tài)更新的時(shí)候自動(dòng)更新視圖;

但MVVM雙向數(shù)據(jù)綁定并不是唯一的辦法，還有一個(gè)非常直觀的方法：一旦狀態(tài)發(fā)生了變化，就用模版引擎重新渲染整個(gè)視圖，然后用新的視圖更換掉舊的視圖。

React采用的就是第四種模式；但是我們都知道對(duì)于操作DOM成本太高，而相對(duì)操作JavaScript就快速多了，而Html DOM可以很簡單的用JavaScript對(duì)象表示出來（Virtual DOM就這樣誕生了）

這樣的做法會(huì)導(dǎo)致很多的問題，最大的問題就是這樣做會(huì)很慢，因?yàn)榧词挂粋€(gè)小小的狀態(tài)變更都要重新構(gòu)造整棵 DOM，性價(jià)比太低；而React Virtual DOM在狀態(tài)更新過程加了一些特別的操作來避免整棵 DOM 樹變更（它就是接下來的Diff算法）。

接下來的Diff算法即將更新，敬請(qǐng)期待～～～

“積跬步、行千里”—— 持續(xù)更新中~，喜歡留下個(gè)贊哦！

往期經(jīng)典好文：

團(tuán)隊(duì)合作必備的Git操作

談?wù)凧s前端規(guī)范化

相關(guān)專欄推薦：

React學(xué)習(xí)之路