React 裡的虛擬 DOM

這世界上有很多虛擬的東東，這些欺騙感情的虛擬物，有時也可以拿來療癒。

先來理解一下什麼是虛擬 DOM : 為什麼我們需要用它?
這篇文章解釋得頗清楚的：虛擬 DOM 的渲染原理和特性

但是還是來整理一下重點：
原本我們寫原生的 JavaScript 時，我們會直接對 DOM 進行監聽和修改，然後這個 DOM 元素也會透過我們的監聽的事件所執行的，讓頁面產生互動。

React 則是會把我們寫的監聽這部份，轉成一個物件，再將這個物件轉換成真實的 DOM，這個由 React 轉成的物件就是所謂的虛擬 DOM。

假如說我們有一個用 HTML 寫成的樹狀 DOM 結構：

<div class="title">
  <span>Mes amies</span>
  <ul>
    <li>Ayda</li>
    <li>Tracy</li>
  </ul>
</div>

React 可能會用這樣的物件格式來儲存這個 DOM:

const VitrualDom = {
  type: 'div',
  props: { class: 'title' },
  children: [
    {
      type: 'span',
      children: 'Mes amies'
    },
    {
      type: 'ul',
      children: [
        { type: 'li', children: 'Ayda' },
        { type: 'li', children: 'Tracy' }
      ]
    }
  ]
};

虛擬 DOM 物件最終都會被 React 轉化成真實的 DOM

在我們需要新增或更新元素時，React 會先將這個 VitrualDom 物件進行新增和更改，然後再將這個虛擬的 DOM 物件渲染成一個真實的 DOM。

同樣的，如果我們需要對 DOM 進行監聽事件時，也會先對 VitrualDom 物件進行事件監聽，虛擬的 DOM 物件會代替原生的 DOM 事件做出反應與互動。

當我們需要對 DOM 進行事件監聽時，首先對 VitrualDom 進行事件監聽， VitrualDom 會代理原生的 DOM 事件從而做出反應。

虛擬 DOM 和 JSX 語法

React 提供了一些 API 來新增特別的 JS 物件。一個簡單的虛擬 DOM 物件：const elememt = React.createElement('h1標籤名',{id:'myTitle'標籤屬性}, 'hello變數')
虛擬 DOM 物件最終都會被 React 轉化成真實的 DOM
基本上只需要操作 React 的虛擬 DOM 的相關資料, React 會轉換為真實的 DOM 變化，而更新介面。

新增虛擬 DOM 的兩種方式

原生 JS(一般不用)：React.createElement('h2',{id:myId},msg)
JSX 語法：<h3 id={myId}> {msg} </h3>

1 2	<h2 id="test1"></h2> <h3 id="test2"></h3>

第一種原生 JS 方式

const msg = 'I like you';
const myId = 'Tracy';
//
// 1.新增虛擬 DOM
const vDom1 = React.createElement(
  'h2',
  { id: myId.toLowerCase() },
  msg.toUpperCase()
);

// 2.渲染虛擬 DOM
ReactDom.render(vDom1, document.getElementById('test1'));

第二種方式，使用 babel： <script type="text/babel"></script>

// 1.新增虛擬 DOM 直接寫入 html 結構
const vDom2 = <h3 id={myId.toUpperCase()}> {msg.toUpperCase()} </h3>;

// 2.渲染虛擬 DOM
ReactDom.render(vDom2, document.getElementById('test2'));

渲染虛擬 DOM (元素)的語法

語法：ReactDom.render(virtualDOM, containerDOM)
作用：將虛擬 DOM 元素渲染到頁面中真實的 DOM 元素中顯示。
參數說明：

參數一：純 JS 或 JSX 新增的虛擬 DOM 物件
參數二：用來包含虛擬 DOM 元素的真實 DOM 元素物件(通常是個<div>)