問題

ReactDOM.render() 渲染更新都會基於 Virtual DOM 技術方案，下面對其理解正確的是？

選項

A. 它相對於直接操作原生 DOM 最大的優勢在於 diff（差異計算） 和 batching（合併更新）。

B. render 方法是將 JSX 程式碼編譯成 ReactELement 物件，它描述當前元件內容的資料結構。

C. 比對的演算法的複雜程度為 O(n 3 )，其中 n 是樹中元素的數量。

D. 提供了更好的跨平臺的能力。

答案

A、B、D

解答

Virtual DOM 是一種程式設計概念。在這個概念裡， UI 以一種理想化的，或者說“虛擬的”表現形式被保存於記憶體中，並通過如 ReactDOM 等類庫使之與“真實的” DOM 同步。這一過程叫做

協調。

因為 渲染執行緒 與 JS 引擎執行緒 的互斥關係，DOM API 的讀寫都涉及頁面佈局的 重繪（repaint）和迴流（reflow）成本考慮，需要一種減少不必要的 DOM API 呼叫的解決方案，這就是 React 提出 Virtual DOM 的核心目的。

Diffing 演算法

呼叫 React 的 render() 方法，會建立一棵由 React 元素組成的樹。在下一次 state 或 props 更新時，相同的 render() 方法會返回一棵不同的樹。React 需要基於這兩棵樹之間的差別來判斷如何高效的更新 UI。

這裡獲取最高效的更新時，React提出了一套 O(n) 的啟發式演算法：

1. 兩個不同型別的元素會產生出不同的樹；

2. 開發者可以通過設定 key 屬性，來告知渲染哪些子元素在不同的渲染下可以儲存不變；

綜上設計，這就是為什麼 key 值對於效能來說是非常有幫助的屬性，在實際開發中你還可以使用 shouldComponentUpdate 自定義更新時機。

Batching 操作

所謂的batching就是將多次比較的結果合併後一次性更新到頁面，從而有效地減少頁面渲染的次數，提高渲染效率。

資料

你不知道的 React Virtual DOM

React’s diff algorithm

React官方文件-協調

來源

搜尋《考試競技》微信小程式