[Day 10] React 畫面更新的核心機制（上）：一律重繪渲染策略

14th鐵人賽 react reactjs react.js

Zet

2022-09-25 01:05:16

3221 瀏覽

分享至

在經過前面一些基本觀念的鋪陳之後，接下來我們將會繼續重點解析關於 React 產生並管理 UI 畫面的核心運作流程與原理，而這將會是真正掌握 React 這門技術相當重要的觀念基本功。

React 中的一律重繪渲染策略

如果你還有印象的話，我們在前面的章節就有為了帶出 React element 而先簡單的介紹 Virtual DOM 的概念。那時候我們曾提及 Virtual DOM 的概念可以幫助解決大量 DOM 操作的效能問題，再結合上一章節中解析的 DOM 渲染策略，看到這裡相信你已經多少明白了：

「既然一律重繪真實的 DOM Tree 很浪費效能的話，那我們改成一律重繪虛擬的 DOM Tree 不就好了嗎？」

Virtual DOM 的 JavaScript 中的實現只是一些自定義的普通變數資料而已，並不像真實 DOM 那樣有直接與瀏覽器的渲染引擎綁定，因此當我們的畫面同時有大量的變動需求時，即使重繪整個 Virtual DOM 也肯定是比直接重繪大量真實 DOM 的效能浪費要小多了。

在 React 的管轄之下，真實 DOM Tree 會一直與 Virtual DOM Tree 保持結構一致。因此 React 只要將重繪前的舊 Virtual DOM Tree 與重繪後的新 Virtual DOM 進行詳細的比較，然後只去更新這些差異處的真實 DOM elements 就好了！

圖片來源：https://medium.com/手寫筆記/build-a-simple-virtual-dom-5cf12ccf379f

React 正是採用了這樣的思路，選擇一律重繪的渲染策略，並以 Virtual DOM 的設計來解決其伴隨的 DOM 操作效能問題。React 只需要知道資料有發生變化就行，而不關心資料具體變化的差異在哪，然後進行一律重繪的流程。而既然一律重繪 DOM 會有嚴重的效能問題，於是 React 就改以 Virtual DOM 來進行一律重繪。更具體一點的說，React 中一律重繪的是 React elements。

因此當我們在 React 中在講「渲染」或「render」時，通常都是在說 Virtual DOM elements（也就是 React elements）的產生，而不是在指真實 DOM elements 的操作。而「重繪 Virtual DOM」在 React 中通常也被稱為「re-render」，具體在 React 中的行為就是「以新的資料（props 或 state）重新再執行一次 component function，並產生新版的 React elements」。

不過，雖然說是要採用一律重繪的渲染策略，但是前端應用程式可能是相當龐大複雜的，顯然我們也沒有必要在 App 中的任何資料有改變時都重繪整個 App 全部的畫面，應該是只需要重繪跟這些有改變的資料相關的部分畫面即可。

因此 React 會以 component 作為一律重繪的切分單位，而這也是會什麼 state 必須依附於 component function 的其中一個原因。當我們呼叫一個 state 的 setState 方法時，React 就只會重繪該 state 所屬的 component 以及它底下的所有子孫 components，而不會整個 App 都重繪。

在下一章節中，我們會解析 React 以一律重繪的渲染策略來進行畫面更新管理的核心機制 — Reconciliation。