先來看看什麼是 React 吧

官方文件

What Is React?
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

官方的短短兩句話直接描述完 React 是什麼，但裡面卻暗藏玄機

React 是 declarative

Declarative vs Imperative

Declarative programming is a programming paradigm … that expresses the logic of a computation without describing its control flow.

宣告式程式語言強調於宣告描述目標邏輯但不是如何去達到成果

所以 react 的思維是讓開發者撰寫他想要做到的 UI 而不是撰寫與 DOM 的關係來達到結果，底層的事情 react 都封裝好，我們只要宣告他就行了

開發者僅需定義好 JSX 就可以開發 UI 了

Imperative programming is a programming paradigm that uses statements that change a program’s state.

指令式程式語言需要告訴程式每個步驟如何進行，像是之前寫的 TodoList 一樣，需要找到某個 DOM 節點(document.querySelector())然後要做怎樣的更新變動($dom.innerHTML='')

React 為什麼是 efficient 的 UI library?

先看看這段之前寫的

for (i = 0; i < length; i += 1) {
  item = this.data[i];
  ...
  resultView += renderViewText;
}
this.element.innerHTML = resultView;

每次做更新就要將 html 做一次大更新，效能很不好，但更新就去進行節點處理 代碼 又會很難整理

而 React 其實會做相同的事情，每做一次物件的更新，就會重劃一遍

但是React是畫在 Virtual DOM 而 我的 TodoList 是畫在 Real DOM

當 React 的 Root 節點被更新了 (通常是 setState 被呼叫) 底下的 children Component 的 render 都會被執行，意思是 整個 UI 會被重劃一遍在 Virtual DOM 但僅有更新的部分

當 Virtual DOM 重繪完之後，就會有兩顆 Virtual DOM 的樹

• 一棵是舊的 Virtual DOM Tree
• 一棵是剛更新完的 Virtual DOM Tree

React 會將兩個比對產生要更新的地方套用到 Real DOM 上

React 將比對的流程稱之為 Reconciliation 官方

節錄重點：

一般樹比對需要用到 O(n^3) 的時間， React 使用 Heuristic 可以將速度提升到 O(n)
這個 heuristic 需要這兩個假設：

1. 類別不一樣會產生新的樹 (更新)
2. i.e div -> span
3. 使用穩定的 key 來告訴 React 哪塊需要更新，可以增加效能

比對完成之後會將結果一次更新到 Real DOM

參考:

https://calendar.perfplanet.com/2013/diff/
https://hackernoon.com/virtual-dom-in-reactjs-43a3fdb1d130

如果要自己去寫去寫 DOM 節點 更新會不好寫，要考慮的事情太多了，而使用 React 就有這些免費的 DOM 節點更新 可使用進而得到效能渲染的提升！

Component

React 強調做出可組件化的 UI，然後將各個組件拼成最後的成品，就好比 玩積木一樣

像是 TodoList 上 每個元件可以分開管理

<TodoAction /> => <input><button>
<TodoList />

TodoList 像是這樣

<ul>
- TodoItem => <li><span>content</span></li>
- TodoItem
- TodoItem

所以做好各個組件，設計好數據結構，各個組件就會自行做更新的動作，開發邏輯變得非常簡單！

React教學可以參考

• react 官方
  • 可選擇 Learn by doing
  • 或學觀念
• 或是其他 鐵人 的教學
• React Diff Algorithm 講解

明天就來把 TodoList 改成 React 版本吧！