當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

react循环key值_React源码揭秘(三)：Diff算法详解

發(fā)布時(shí)間：2024/9/3 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 react循环key值_React源码揭秘(三)：Diff算法详解小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

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

代碼參照React 16.13.1

什么是Diff

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

首屏渲染會(huì)渲染一整棵 DOM 樹
組件更新會(huì)根據(jù)變化的狀態(tài)局部更新 DOM 樹

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

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

用通俗的語言講

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

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

Diff的瓶頸以及React如何應(yīng)對

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

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

為了降低算法復(fù)雜度，React的diff會(huì)預(yù)設(shè)三個(gè)限制：

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

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

開發(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會(huì)認(rèn)為div的第一個(gè)子節(jié)點(diǎn)由p變?yōu)閔3，第二個(gè)子節(jié)點(diǎn)由h3變?yōu)閜。這符合限制2的設(shè)定，會(huì)銷毀并新建。

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

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

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

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

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

讓我們稍稍看下Diff的入口函數(shù)，不要被代碼長度嚇到嘍 ?，其實(shí)邏輯很簡單——在函數(shù)內(nèi)部，會(huì)根據(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é)點(diǎn)

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

}

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

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

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

當(dāng)newChild類型為object、number、string，代表同級(jí)只有一個(gè)節(jié)點(diǎn)

當(dāng)newChild類型為Array，同級(jí)有多個(gè)節(jié)點(diǎn)

接下來，我們分別討論。

情況一：同級(jí)只有一個(gè)節(jié)點(diǎn)的Diff

對于單個(gè)節(jié)點(diǎn)，我們以類型object為例，會(huì)進(jìn)入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

????}

??}

這個(gè)函數(shù)會(huì)做如下事情：

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

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

function?reconcileSingleElement(

??returnFiber:?Fiber,

??currentFirstChild:?Fiber?|?null,

??element:?ReactElement

):?Fiber?{

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

??let?child?=?currentFirstChild;

??// 首先判斷是否存在對應(yīng)DOM節(jié)點(diǎn)

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

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

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

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

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

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

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

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

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

????????????// 如果相同則表示可以復(fù)用

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

??????????}

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

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

????????}

??????}

??????// ? key不同或type不同都代表不能復(fù)用，會(huì)到這里

??????// 不能復(fù)用的節(jié)點(diǎn)，被標(biāo)記為刪除

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

??????break;

????}?else?{

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

????}

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

??}

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

}

還記得我們剛才提到的，React預(yù)設(shè)的限制么，

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

課間練習(xí)題

讓我們來做幾道習(xí)題鞏固下吧：

請判斷如下JSX對象對應(yīng)的DOM元素是否可以復(fù)用：

// 習(xí)題1 更新前

<div>ka songdiv>

// 更新后

<p>ka songp>

// 習(xí)題2 更新前

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

// 更新后

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

// 習(xí)題3 更新前

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

// 更新后

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

// 習(xí)題4 更新前

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

// 更新后

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

。

???老師公布答案啦：

習(xí)題1: 未設(shè)置key prop默認(rèn) key = null;，所以更新前后key相同，都為null，但是更新前type為div，更新后為p，type改變則不能復(fù)用。

習(xí)題2: 更新前后key改變，不需要再判斷type，不能復(fù)用。

習(xí)題3: 更新前后key改變，不需要再判斷type，不能復(fù)用。

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

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

情況二：同級(jí)有多個(gè)元素的Diff

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

function?List?()?{

????return?(

????????<ul>

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

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

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

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

????????ul>

????)

}

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

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

if?(isArray(newChild))?{

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

??}

接下來我們來看看，React如何處理同級(jí)多個(gè)元素的Diff。

同級(jí)多個(gè)節(jié)點(diǎn)Diff詳解

整體概括

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

情況1 節(jié)點(diǎn)更新

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

// 之前

<ul>

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

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

ul>

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

<ul>

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

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

ul>

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

<ul>

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

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

ul>

情況2 節(jié)點(diǎn)新增或減少

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

// 之前

<ul>

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

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

ul>

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

<ul>

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

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

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

ul>

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

<ul>

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

ul>

情況3 節(jié)點(diǎn)位置變化

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

// 之前

<ul>

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

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

ul>

// 之后

<ul>

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

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

ul>

同一次同級(jí)多個(gè)元素的Diff，一定屬于以上三種情況中的一種或多種。

??? 該如何設(shè)計(jì)算法呢???

如果讓我設(shè)計(jì)一個(gè)Diff算法，我首先想到的方案是：

判斷當(dāng)前節(jié)點(diǎn)的更新屬于哪種情況

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

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

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

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

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

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

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

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

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

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

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

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

第一輪遍歷 ?

第一輪遍歷步驟如下：

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

如果可復(fù)用，i++，比較newChildren[i]與oldFiber.sibling是否可復(fù)用。可以復(fù)用則重復(fù)步驟2。

如果不可復(fù)用，立即跳出整個(gè)遍歷。

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

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

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

舉個(gè)栗子?

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

此時(shí)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遍歷完，或他們同時(shí)遍歷完。

再來個(gè)?

// 之前

????????????<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é)點(diǎn)都復(fù)用了，這時(shí)還有新加入的節(jié)點(diǎn)，意味著本次更新有新節(jié)點(diǎn)插入，我們只需要遍歷剩下的newChildren依次執(zhí)行插入操作(Fiber.effectTag = Placement;)。

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

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

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

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

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

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

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

為了快速的找到key對應(yīng)的oldFiber，我們將所有還沒處理的oldFiber放進(jìn)以key屬性為key，Fiber為value的map。

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

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

接下來是重點(diǎn)哦，敲黑板 ???

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

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

let?lastPlacedIndex?=?0;

該變量表示當(dāng)前最后一個(gè)可復(fù)用節(jié)點(diǎn)，對應(yīng)的oldFiber在上一次更新中所在的位置索引。我們通過這個(gè)變量判斷節(jié)點(diǎn)是否需要移動(dòng)。

是不是有點(diǎn)繞，??? 不要怕，老師的栗子又來啦???

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

// 之前

abcd

// 之后

acdb

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

a(之后)vs a(之前)

key不變，可復(fù)用

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

所以 lastPlacedIndex?=?0;

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

c(之后)vs b(之前)

key改變，不能復(fù)用，跳出第一輪遍歷

此時(shí) lastPlacedIndex?===?0;

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

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

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

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

將剩余oldFiber(bcd)保存為map

// 當(dāng)前oldFiber：bcd

// 當(dāng)前newChildren：cdb

繼續(xù)遍歷剩余newChildren

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

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

即 oldIndex 代表當(dāng)前可復(fù)用節(jié)點(diǎn)(c)在上一次更新時(shí)的位置索引

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

比較 oldIndex 與 lastPlacedIndex;

如果 oldIndex?>=?lastPlacedIndex 代表該可復(fù)用節(jié)點(diǎn)不需要移動(dòng)

并將 lastPlacedIndex?=?oldIndex;

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

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

則 lastPlacedIndex?=?2;

c節(jié)點(diǎn)位置不變

繼續(xù)遍歷剩余newChildren

// 當(dāng)前oldFiber：bd

// 當(dāng)前newChildren：db

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

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

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

則 lastPlacedIndex?=?3;

d節(jié)點(diǎn)位置不變

繼續(xù)遍歷剩余newChildren

// 當(dāng)前oldFiber：b

// 當(dāng)前newChildren：b

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

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

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

則 b節(jié)點(diǎn)需要向右移動(dòng)

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

最終acd?3個(gè)節(jié)點(diǎn)都沒有移動(dòng)，b節(jié)點(diǎn)被標(biāo)記為移動(dòng)

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

???

// 之前

abcd

// 之后

dabc

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

d(之后)vs a(之前)

key不變，type改變，不能復(fù)用，跳出遍歷

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

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

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

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

將剩余oldFiber(abcd)保存為map

繼續(xù)遍歷剩余newChildren

// 當(dāng)前oldFiber：abcd

// 當(dāng)前newChildren dabc

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

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

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

比較 oldIndex 與 lastPlacedIndex;

oldIndex?3?>?lastPlacedIndex?0

則 lastPlacedIndex?=?3;

d節(jié)點(diǎn)位置不變

繼續(xù)遍歷剩余newChildren

// 當(dāng)前oldFiber：abc

// 當(dāng)前newChildren abc

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

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

此時(shí) oldIndex?===?0;

比較 oldIndex 與 lastPlacedIndex;

oldIndex?0?<?lastPlacedIndex?3

則 a節(jié)點(diǎn)需要向右移動(dòng)

繼續(xù)遍歷剩余newChildren

// 當(dāng)前oldFiber：bc

// 當(dāng)前newChildren bc

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

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

此時(shí) oldIndex?===?1;

比較 oldIndex 與 lastPlacedIndex;

oldIndex?1?<?lastPlacedIndex?3

則 b節(jié)點(diǎn)需要向右移動(dòng)

繼續(xù)遍歷剩余newChildren

// 當(dāng)前oldFiber：c

// 當(dāng)前newChildren c

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

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

此時(shí) oldIndex?===?2;

比較 oldIndex 與 lastPlacedIndex;

oldIndex?2?<?lastPlacedIndex?3

則 c節(jié)點(diǎn)需要向右移動(dòng)

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

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

但實(shí)際上React保持d不變，將abc分別移動(dòng)到了d的后面。

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

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

全部帶注釋代碼見這里⁶

總結(jié)

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

首屏渲染流程⁷
組件更新流程⁸
更新與更新之間的Diff邏輯

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

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

文內(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

關(guān)于奇舞周刊

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

與50位技術(shù)專家面對面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

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

上一篇：语言 micropython_Micro
下一篇： lin总线可以控制几个节点_汽车上除了C