React 渲染機制解析

我們都知道使用react可以使得網頁的效能有很大的提高，本文具體**它是通過什麼樣的渲染機制做到的。

在頁面一開始開啟的時候，react會呼叫render函式構建一棵dom樹，在state/props發生改變的時候，render函式會被再次呼叫渲染出另外一棵樹，接著，react會用對兩棵樹進行對比，找到需要更新的地方批量改動。

這個過程中，比較兩棵dom tree高效找出需要更新的地方是很重要的。react基於兩個假設：

發明了一種叫diff的演算法，它極大的優化了這個比較的過程，將演算法複雜度從o(n^3)降低到o(n)。

同時，基於第一點假設，我們可以推論出，diff演算法只會對同層的節點進行比較。如圖，它只會對顏色相同的節點進行比較。

也就是說如果父節點不同，react將不會在去對比子節點。因為不同的元件dom結構會不相同，所以就沒有必要在去對比子節點了。這也提高了對比的效率。

下面，我們具體看下diff演算法是怎麼做的，這裡分為兩種情況考慮

對於不同的節點型別，react會基於第一條假設，直接刪去舊的節點，新建乙個新的節點。

比如：

// 由shape1到shape2

react會直接刪掉a節點（包括它所有的子節點）,然後新建乙個b節點插入。

感興趣的可以自己跑一跑**~

shape1 : a is created a render c is created c render c componentdidmount a componentdidmount shape2 : a componentwillunmount c componentwillunmount b is created b render c is created c render c componentdidmount b componentdidmount

由此可以看出，a與其子節點c會被直接刪除，然後重新建乙個b，c插入。

當對比相同的節點型別比較簡單，react會對比它們的屬性，只改變需要改變的屬性

比如：

這兩個div中，react會只更新classname的值

這兩個div中，react只會去更新color的值

// 列表一到列表二

從列表一到列表二，只是在中間插入了乙個c，但是如果沒有key的時候，react會把b刪去，新建乙個c放在b的位置，然後重新建乙個節點b放在尾部。

你說什麼就是什麼咯？！不信的話，我們還是跑一邊**，看看生命週期驗證一下

列表一： a is created a render b is created b render a componentdidmount b componentdidmount 列表二： a render b componentwillunmount c is created c render b is created b render a componentdidupdate c componentdidmount b componentdidmount

當節點很多的時候，這樣做是非常低效的，所以我們需要給每個節點配乙個key，讓react可以識別出來哪些節點是一樣的，不需要重新建立。

配上key之後，在跑一遍**看看，

a render c is created c render b render a componentdidupdate c componentdidmount b componentdidupdate

果然，配上key之後，列表二的生命週期就如我所願，只在指定的位置建立c節點插入。

這裡要注意的一點是，key值必須是穩定（所以我們不能用math.random()去建立key），可**，並且唯一的。

react整個的渲染機制就是在state/props發生改變的時候，重新渲染所有的節點，構造出新的虛擬dom tree跟原來的dom tree用diff演算法進行比較，得到需要更新的地方在批量造作在真實的dom上，由於這樣做就減少了對dom的頻繁操作，從而提公升的效能。

React 渲染機制解析

瀏覽器解析渲染機制

react頁面渲染之前 react 渲染順序

React 列表渲染

React 渲染機制解析

瀏覽器解析 渲染機制

react頁面渲染之前 react 渲染順序

React 列表渲染

相關推薦

瀏覽器解析渲染機制