編者按：本文作者奇舞團前端開發(fā)工程師蘇暢。

代碼參照React 16.13.1

什么是Diff

在前兩篇文章中我們分別介紹了 React 的首屏渲染流程¹和組件更新流程²，其中

• 首屏渲染會渲染一整棵 DOM 樹

• 組件更新會根據(jù)變化的狀態(tài)局部更新 DOM 樹

那么 React 如何知道哪些 DOM 節(jié)點需要被更新呢？

在上一篇文章這里³我們講到，在render階段的beginWork函數(shù)中，會將上次更新產(chǎn)生的 Fiber 節(jié)點與本次更新的 JSX 對象(對應ClassComponent的this.render方法返回值，或者FunctionComponent執(zhí)行的返回值)進行比較。根據(jù)比較的結(jié)果生成workInProgress Fiber，即本次更新的 Fiber 節(jié)點。

用通俗的語言講

React 將上次更新的結(jié)果與本次更新的值比較，只將變化的部分體現(xiàn)在 DOM 上

這個比較的過程，就是 Diff。本篇文章主要講解Rect Diff 算法⁴的內(nèi)部實現(xiàn)，對 Diff 的簡單講解請參考React 文檔⁵

Diff的瓶頸以及React如何應對

由于 Diff 操作本身也會帶來性能損耗，React文檔中提到，即使在最前沿的算法中，將前后兩棵樹完全比對的算法的復雜程度為 O(n 3 )，其中 n 是樹中元素的數(shù)量。

如果在 React 中使用了該算法，那么展示 1000個元素所需要執(zhí)行的計算量將在十億的量級范圍。這個開銷實在是太過高昂。

為了降低算法復雜度，React的diff會預設三個限制：

只對同級元素進行Diff。如果一個DOM節(jié)點在前后兩次更新中跨越了層級，那么React不會嘗試復用他。

兩個不同類型的元素會產(chǎn)生出不同的樹。如果元素由div變?yōu)閜，React會銷毀div及其子孫節(jié)點，并新建p及其子孫節(jié)點。

開發(fā)者可以通過 key屬性 來暗示哪些子元素在不同的渲染下能保持穩(wěn)定。考慮如下例子：

// 更新前

<div>

????<p?key="ka">kap>

????<h3?key="song">songh3>

div>

// 更新后

<div>

????<h3?key="song">songh3>

????<p?key="ka">kap>

div>

如果沒有key，React會認為div的第一個子節(jié)點由p變?yōu)閔3，第二個子節(jié)點由h3變?yōu)閜。這符合限制2的設定，會銷毀并新建。

但是當我們用key指明了節(jié)點前后對應關系后，React知道key === "ka"的p在更新后還存在，所以DOM節(jié)點可以復用，只是需要交換下順序。

這就是React為了應對算法性能瓶頸做出的三條限制。

Diff是如何實現(xiàn)的

接下來我們看看Diff的具體實現(xiàn)。我們從Diff的入口函數(shù)reconcileChildFibers出發(fā)，接著再看看不同類型的Diff是如何實現(xiàn)的。

Diff函數(shù)入口函數(shù)簡介

讓我們稍稍看下Diff的入口函數(shù)，不要被代碼長度嚇到嘍 ?，其實邏輯很簡單——在函數(shù)內(nèi)部，會根據(jù)newChild類型調(diào)用不同的處理函數(shù)。

// 根據(jù)newChild類型選擇不同diff函數(shù)處理

function?reconcileChildFibers(

??returnFiber:?Fiber,

??currentFirstChild:?Fiber?|?null,

??newChild:?any,

):?Fiber?|?null?{

??const?isObject?=?typeof?newChild?===?'object'?&&?newChild?!==?null;

??if?(isObject)?{

????// object類型，可能是 REACT_ELEMENT_TYPE 或 REACT_PORTAL_TYPE

????switch?(newChild.$$typeof)?{

??????case?REACT_ELEMENT_TYPE:

????????// 調(diào)用 reconcileSingleElement 處理

??????// ...其他case

????}

??}

??if?(typeof?newChild?===?'string'?||?typeof?newChild?===?'number')?{

????// 調(diào)用 reconcileSingleTextNode 處理

??}

??if?(isArray(newChild))?{

????// 調(diào)用 reconcileChildrenArray 處理

??}

??// 一些其他情況調(diào)用處理函數(shù)

??// 以上都沒有命中，刪除節(jié)點

??return?deleteRemainingChildren(returnFiber,?currentFirstChild);

}

這里的newChild參數(shù)就是本次更新的 JSX 對象(對應ClassComponent的this.render方法返回值，或者FunctionComponent執(zhí)行的返回值)

不同類型的Diff是如何實現(xiàn)的

我們可以從同級的節(jié)點數(shù)量將Diff分為兩類：

當newChild類型為object、number、string，代表同級只有一個節(jié)點

當newChild類型為Array，同級有多個節(jié)點

接下來，我們分別討論。

情況一：同級只有一個節(jié)點的Diff

對于單個節(jié)點，我們以類型object為例，會進入reconcileSingleElement

const?isObject?=?typeof?newChild?===?'object'?&&?newChild?!==?null;

??if?(isObject)?{

????// 對象類型，可能是 REACT_ELEMENT_TYPE 或 REACT_PORTAL_TYPE

????switch?(newChild.$$typeof)?{

??????case?REACT_ELEMENT_TYPE:

????????// 調(diào)用 reconcileSingleElement 處理

??????// ...其他case

????}

??}

這個函數(shù)會做如下事情：

其中第二步判斷DOM節(jié)點是否可以復用，讓我們通過代碼看看是如何判斷的：

不要怕，邏輯也很簡單 ???

function?reconcileSingleElement(

??returnFiber:?Fiber,

??currentFirstChild:?Fiber?|?null,

??element:?ReactElement

):?Fiber?{

??const?key?=?element.key;

??let?child?=?currentFirstChild;

??// 首先判斷是否存在對應DOM節(jié)點

??while?(child?!==?null)?{

????// 上一次更新存在DOM節(jié)點，接下來判斷是否可復用

????if?(child.key?===?key)?{

????// ??♂?同學看這里，首先比較key是否相同

??????switch?(child.tag)?{

????????// ...省略case

????????default:?{

??????????if?(child.elementType?===?element.type)?{

????????????// ??♂?同學看這里，key相同后再看type是否相同

????????????// 如果相同則表示可以復用

????????????return?existing;

??????????}

??????????// type不同則跳出循環(huán)

??????????break;

????????}

??????}

??????// ? key不同或type不同都代表不能復用，會到這里

??????// 不能復用的節(jié)點，被標記為刪除

??????deleteRemainingChildren(returnFiber,?child);

??????break;

????}?else?{

??????deleteChild(returnFiber,?child);

????}

????child?=?child.sibling;

??}

??// 創(chuàng)建新Fiber，并返回

}

還記得我們剛才提到的，React預設的限制么，

從代碼可以看出，React通過先判斷key是否相同，如果key相同則判斷type是否相同，只有都相同時一個DOM節(jié)點才能復用。

課間練習題

讓我們來做幾道習題鞏固下吧：

請判斷如下JSX對象對應的DOM元素是否可以復用：

// 習題1 更新前

<div>ka songdiv>

// 更新后

<p>ka songp>

// 習題2 更新前

<div?key="xxx">ka songdiv>

// 更新后

<div?key="ooo">ka songdiv>

// 習題3 更新前

<div?key="xxx">ka songdiv>

// 更新后

<p?key="ooo">ka songp>

// 習題4 更新前

<div?key="xxx">ka songdiv>

// 更新后

<div?key="xxx">xiao beidiv>

。

。

。

。

???老師公布答案啦：

習題1: 未設置key prop默認 key = null;，所以更新前后key相同，都為null，但是更新前type為div，更新后為p，type改變則不能復用。

習題2: 更新前后key改變，不需要再判斷type，不能復用。

習題3: 更新前后key改變，不需要再判斷type，不能復用。

習題4: 更新前后key與type都未改變，可以復用。children變化，DOM的子元素需要更新。

你是不是都答對了呢 ???

情況二：同級有多個元素的Diff

剛才我們介紹了單一元素的Diff，現(xiàn)在考慮我們有一個FunctionComponent：

function?List?()?{

????return?(

????????<ul>

????????????<li?key="0">0li>

????????????<li?key="1">1li>

????????????<li?key="2">2li>

????????????<li?key="3">3li>

????????ul>

????)

}

他的返回值JSX對象的children屬性不是單一元素，而是包含四個對象的數(shù)組

這種情況下，reconcileChildFibers的newChild參數(shù)為Array，在函數(shù)內(nèi)部對應如下情況：

if?(isArray(newChild))?{

????// 調(diào)用 reconcileChildrenArray 處理

??}

接下來我們來看看，React如何處理同級多個元素的Diff。

同級多個節(jié)點Diff詳解

整體概括

首先看下，我們需要處理的情況：

• 情況1 節(jié)點更新

// 情況1 節(jié)點更新

// 之前

<ul>

????<li?key="0"?className="before">0<li>

????<li?key="1">1<li>

ul>

// 之后情況1 節(jié)點屬性變化

<ul>

????<li?key="0"?className="after">0<li>

????<li?key="1">1<li>

ul>

// 之后情況2 節(jié)點類型更新

<ul>

????<div?key="0">0<li>

????<li?key="1">1<li>

ul>

• 情況2 節(jié)點新增或減少

// 情況2 節(jié)點新增或減少

// 之前

<ul>

????<li?key="0">0<li>

????<li?key="1">1<li>

ul>

// 之后情況1 新增節(jié)點

<ul>

????<li?key="0">0<li>

????<li?key="1">1<li>

????<li?key="2">2<li>

ul>

// 之后情況2 刪除節(jié)點

<ul>

????<li?key="1">1<li>

ul>

• 情況3 節(jié)點位置變化

// 情況3 節(jié)點位置變化

// 之前

<ul>

????<li?key="0">0<li>

????<li?key="1">1<li>

ul>

// 之后

<ul>

????<li?key="1">1<li>

????<li?key="0">0<li>

ul>

同一次同級多個元素的Diff，一定屬于以上三種情況中的一種或多種。

??? 該如何設計算法呢???

如果讓我設計一個Diff算法，我首先想到的方案是：

判斷當前節(jié)點的更新屬于哪種情況

如果是新增，執(zhí)行新增邏輯

如果是刪除，執(zhí)行刪除邏輯

如果是更新，執(zhí)行更新邏輯

按這個方案，其實有個隱含的前提——不同操作的優(yōu)先級是相同的

但React團隊發(fā)現(xiàn)，在日常開發(fā)中，相對于增加和刪除，更新組件發(fā)生的頻率更高。所以React Diff會優(yōu)先判斷當前節(jié)點是否屬于更新。

值得注意的是，在我們做數(shù)組相關的算法題時，經(jīng)常使用雙指針從數(shù)組頭和尾同時遍歷以提高效率，但是這里卻不行。

雖然本次更新的JSX對象newChildren為數(shù)組形式，但是和newChildren中每個值進行比較的是上次更新的Fiber節(jié)點，Fiber節(jié)點的同級節(jié)點是由sibling指針鏈接形成的鏈表。

即 newChildren[0]與oldFiber比較，newChildren[1]與oldFiber.sibling比較。

單鏈表無法使用雙指針，所以無法對算法使用雙指針優(yōu)化。

基于以上原因，Diff算法的整體邏輯會經(jīng)歷兩輪遍歷。

第一輪遍歷：處理更新的節(jié)點。

第二輪遍歷：處理剩下的不屬于更新的節(jié)點。

第一輪遍歷 ?

第一輪遍歷步驟如下：

遍歷newChildren，i = 0，將newChildren[i]與oldFiber比較，判斷DOM節(jié)點是否可復用。

如果可復用，i++，比較newChildren[i]與oldFiber.sibling是否可復用?？梢詮陀脛t重復步驟2。

如果不可復用，立即跳出整個遍歷。

如果newChildren遍歷完或者oldFiber遍歷完(即oldFiber.sibling === null)，跳出遍歷。

當我們最終完成遍歷后，會有兩種結(jié)果：

結(jié)果一：如果是步驟3跳出的遍歷，newChildren沒有遍歷完，oldFiber也沒有遍歷完。

舉個栗子?

如下代碼中，前2個節(jié)點可復用，key === 2的節(jié)點type改變，不可復用，跳出遍歷。

此時oldFiber剩下key === 2未遍歷，newChildren剩下key === 2、key === 3未遍歷。

// 之前

????????????<li?key="0">0li>

????????????<li?key="1">1li>

????????????<li?key="2">2li>

// 之后

????????????<li?key="0">0li>

????????????<li?key="1">1li>

????????????<div?key="2">2div>

????????????<li?key="3">3li>

結(jié)果二：如果是步驟4跳出的遍歷，可能newChildren遍歷完，或oldFiber遍歷完，或他們同時遍歷完。

再來個?

// 之前

????????????<li?key="0"?className="a">0li>

????????????<li?key="1"?className="b">1li>

// 之后情況1 newChildren與oldFiber都遍歷完

????????????<li?key="0"?className="aa">0li>

????????????<li?key="1"?className="bb">1li>

// 之后情況2 newChildren沒遍歷完，oldFiber遍歷完

????????????<li?key="0"?className="aa">0li>

????????????<li?key="1"?className="bb">1li>

????????????<li?key="2"?className="cc">2li>

// 之后情況3 newChildren遍歷完，oldFiber沒遍歷完

????????????<li?key="0"?className="aa">0li>

帶著這兩種結(jié)果，我們開始第二輪遍歷。

第二輪遍歷 ???

對于結(jié)果二，聰明的你想一想?，newChildren沒遍歷完，oldFiber遍歷完意味著什么？

老的DOM節(jié)點都復用了，這時還有新加入的節(jié)點，意味著本次更新有新節(jié)點插入，我們只需要遍歷剩下的newChildren依次執(zhí)行插入操作(Fiber.effectTag = Placement;)。

同樣的，我們舉一反三。newChildren遍歷完，oldFiber沒遍歷完意味著什么？

意味著多余的oldFiber在這次更新中已經(jīng)不存在了，所以需要遍歷剩下的oldFiber，依次執(zhí)行刪除操作(Fiber.effectTag = Deletion;)。

那么結(jié)果一怎么處理呢？newChildren與oldFiber都沒遍歷完，這意味著有節(jié)點在這次更新中改變了位置。

接下來，就是Diff算法最精髓的部分！！！！打起精神來，我們勝利在望 ?? ?? ??

處理位置交換的節(jié)點

由于有節(jié)點交換了位置，所以不能再用位置索引對比前后的節(jié)點，那么怎樣才能將同一個節(jié)點在兩次更新中對應上呢？

你一定想到了，我們需要用key屬性了。

為了快速的找到key對應的oldFiber，我們將所有還沒處理的oldFiber放進以key屬性為key，Fiber為value的map。

const?existingChildren?=?mapRemainingChildren(returnFiber,?oldFiber);

再遍歷剩余的newChildren，通過newChildren[i].key就能在existingChildren中找到key相同的oldFiber。

接下來是重點哦，敲黑板 ???

在我們第一輪和第二輪遍歷中，我們遇到的每一個可以復用的節(jié)點，一定存在一個代表上一次更新時該節(jié)點狀態(tài)的oldFiber，并且頁面上有一個DOM元素與其對應。

那么我們在Diff函數(shù)的入口處，定義一個變量

let?lastPlacedIndex?=?0;

該變量表示當前最后一個可復用節(jié)點，對應的oldFiber在上一次更新中所在的位置索引。我們通過這個變量判斷節(jié)點是否需要移動。

是不是有點繞，??? 不要怕，老師的栗子又來啦???

這里我們簡化一下書寫，每個字母代表一個節(jié)點，字母的值代表節(jié)點的key

// 之前

abcd

// 之后

acdb

===第一輪遍歷開始===

a(之后)vs a(之前)

key不變，可復用

此時 a 對應的oldFiber(之前的a)在之前的數(shù)組(abcd)中索引為0

所以 lastPlacedIndex?=?0;

繼續(xù)第一輪遍歷...

c(之后)vs b(之前)

key改變，不能復用，跳出第一輪遍歷

此時 lastPlacedIndex?===?0;

===第一輪遍歷結(jié)束===

===第二輪遍歷開始===

newChildren?===?cdb，沒用完，不需要執(zhí)行刪除舊節(jié)點

oldFiber?===?bcd，沒用完，不需要執(zhí)行插入新節(jié)點

將剩余oldFiber(bcd)保存為map

// 當前oldFiber：bcd

// 當前newChildren：cdb

繼續(xù)遍歷剩余newChildren

key?===?c 在 oldFiber中存在

const?oldIndex?=?c(之前).index;

即 oldIndex 代表當前可復用節(jié)點(c)在上一次更新時的位置索引

此時 oldIndex?===?2;?// 之前節(jié)點為 abcd，所以c.index === 2

比較 oldIndex 與 lastPlacedIndex;

如果 oldIndex?>=?lastPlacedIndex 代表該可復用節(jié)點不需要移動

并將 lastPlacedIndex?=?oldIndex;

如果 oldIndex?<?lastplacedIndex 該可復用節(jié)點之前插入的位置索引小于這次更新需要插入的位置索引，代表該節(jié)點需要向右移動

在例子中，oldIndex?2?>?lastPlacedIndex?0，

則 lastPlacedIndex?=?2;

c節(jié)點位置不變

繼續(xù)遍歷剩余newChildren

// 當前oldFiber：bd

// 當前newChildren：db

key?===?d 在 oldFiber中存在

const?oldIndex?=?d(之前).index;

oldIndex?3?>?lastPlacedIndex?2?// 之前節(jié)點為 abcd，所以d.index === 3

則 lastPlacedIndex?=?3;

d節(jié)點位置不變

繼續(xù)遍歷剩余newChildren

// 當前oldFiber：b

// 當前newChildren：b

key?===?b 在 oldFiber中存在

const?oldIndex?=?b(之前).index;

oldIndex?1?<?lastPlacedIndex?3?// 之前節(jié)點為 abcd，所以b.index === 1

則 b節(jié)點需要向右移動

===第二輪遍歷結(jié)束===

最終acd?3個節(jié)點都沒有移動，b節(jié)點被標記為移動

相信你已經(jīng)明白了節(jié)點移動是如何判斷的。如果還有點懵逼，正常的～～ 我們再看一個栗子～～

???

// 之前

abcd

// 之后

dabc

===第一輪遍歷開始===

d(之后)vs a(之前)

key不變，type改變，不能復用，跳出遍歷

===第一輪遍歷結(jié)束===

===第二輪遍歷開始===

newChildren?===?dabc，沒用完，不需要執(zhí)行刪除舊節(jié)點

oldFiber?===?abcd，沒用完，不需要執(zhí)行插入新節(jié)點

將剩余oldFiber(abcd)保存為map

繼續(xù)遍歷剩余newChildren

// 當前oldFiber：abcd

// 當前newChildren dabc

key?===?d 在 oldFiber中存在

const?oldIndex?=?d(之前).index;

此時 oldIndex?===?3;?// 之前節(jié)點為 abcd，所以d.index === 3

比較 oldIndex 與 lastPlacedIndex;

oldIndex?3?>?lastPlacedIndex?0

則 lastPlacedIndex?=?3;

d節(jié)點位置不變

繼續(xù)遍歷剩余newChildren

// 當前oldFiber：abc

// 當前newChildren abc

key?===?a 在 oldFiber中存在

const?oldIndex?=?a(之前).index;?// 之前節(jié)點為 abcd，所以a.index === 0

此時 oldIndex?===?0;

比較 oldIndex 與 lastPlacedIndex;

oldIndex?0?<?lastPlacedIndex?3

則 a節(jié)點需要向右移動

繼續(xù)遍歷剩余newChildren

// 當前oldFiber：bc

// 當前newChildren bc

key?===?b 在 oldFiber中存在

const?oldIndex?=?b(之前).index;?// 之前節(jié)點為 abcd，所以b.index === 1

此時 oldIndex?===?1;

比較 oldIndex 與 lastPlacedIndex;

oldIndex?1?<?lastPlacedIndex?3

則 b節(jié)點需要向右移動

繼續(xù)遍歷剩余newChildren

// 當前oldFiber：c

// 當前newChildren c

key?===?c 在 oldFiber中存在

const?oldIndex?=?c(之前).index;?// 之前節(jié)點為 abcd，所以c.index === 2

此時 oldIndex?===?2;

比較 oldIndex 與 lastPlacedIndex;

oldIndex?2?<?lastPlacedIndex?3

則 c節(jié)點需要向右移動

===第二輪遍歷結(jié)束===

可以看到，我們以為從 abcd 變?yōu)?dabc，只需要將d移動到前面。

但實際上React保持d不變，將abc分別移動到了d的后面。

從這點可以看出，考慮性能，我們要盡量減少將節(jié)點從后面移動到前面的操作。

相信經(jīng)過這么多多多栗子，你已經(jīng)懂了Diff原理，為自己鼓鼓掌吧???

全部帶注釋代碼見這里⁶

總結(jié)

我們前三篇文章分別講解了

• 首屏渲染流程⁷

• 組件更新流程⁸

• 更新與更新之間的Diff邏輯

至此，整個React的渲染邏輯就完結(jié)了。

在之后的章節(jié)中，我們會一起實現(xiàn)異步調(diào)度器Scheduler，再用調(diào)度器來為我們的React做時間切片。? ? ?

文內(nèi)鏈接

https://juejin.im/post/5e9abf06e51d454702460bf6

https://juejin.im/post/5eb9030b6fb9a043333c6071

https://juejin.im/post/5eb9030b6fb9a043333c6071#heading-7

https://github.com/BetaSu/react-on-the-way/blob/master/packages/react-reconciler/ReactChildFiber.js#L265

https://zh-hans.reactjs.org/docs/reconciliation.html#the-diffing-algorithm

https://github.com/BetaSu/react-on-the-way/blob/master/packages/react-reconciler/ReactChildFiber.js#L265

https://juejin.im/post/5e9abf06e51d454702460bf6

https://juejin.im/post/5eb9030b6fb9a043333c6071

關于奇舞周刊

《奇舞周刊》是360公司專業(yè)前端團隊「奇舞團」運營的前端技術社區(qū)。關注公眾號后，直接發(fā)送鏈接到后臺即可給我們投稿。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結(jié)

以上是生活随笔為你收集整理的react循环key值_React源码揭秘(三)：Diff算法详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。