React中的檢視更新過程

1. state 資料
2. JSX 模板
3. 生成虛擬DOM (虛擬DOM就是一個JS物件，他用來描述真實的DOM)

   ['div', {id: 'abc'}, ['span', {}, 'Hello']]

4. 用虛擬DOM的結構，生成真實的DOM  

   <div id="abc"><span>Hello!</span></div>

5. 資料state 發生改變
6. 資料 + 模板 生成新的虛擬DOM

   ['div', {id: 'abc'}, ['span', {}, 'World!']]

7. 比較原始虛擬DOM和新虛擬DOM的區別(diff演算法)，找到區別是span中的內容
8. 操作DOM，只改變span中的內容

VDOM優點：

1. 效能得到提升
2. 它使得跨端應用( React Native )得以實現。在瀏覽器端是將虛擬DOM轉換為一個個的瀏覽器DOM節點。而如果將他轉換為原生應用的元件，那麼跨端應用就能得到實現。

為什麼使用VDOM極大的提升了效能？

1. 虛擬DOM的使用讓頁面只重新生成資料變更的DOM，而不是把整個頁面重新繪製出來。
2. 虛擬DOM其實就是JS物件。在比較資料哪裡發生變化的時候效率極高。如果去生成一個真實的DOM樹和已有的DOM樹比較效率是很低的，因為JS生成DOM樹會呼叫web application級的API，這種級別的API效能損耗是很大的。