iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 24
0
Modern Web

認真學前端開發 - 以 TodoList 為例系列 第 24

Day24 - 使用 React 來解決問題!

先來看看什麼是 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教學可以參考

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


上一篇
Day-23 如果有一天變得複雜,還能不能繼續改下去?
下一篇
Day25 - 使用 React 來解決問題 [part2]
系列文
認真學前端開發 - 以 TodoList 為例30

尚未有邦友留言

立即登入留言