hello，這里是瀟晨，今天我們來聊一聊Fiber。不知道大家面試的時候有沒有遇到過和react Fiber相關的問題呢，這一類問題比較開放，但也是考察對react源碼理解深度的問題，如果面試高級前端崗，恰巧你平時用的是react，那這道面試題是你必需要會的一道。

大型應用為什么會慢

那之前的應用為什么會慢呢，傳統(tǒng)的前端應用例如js原生或者jquery應用，在構建復雜的大型應用的時候，各種頁面之前的相互操作和更新很有可能會引起頁面的重繪或重排列，而頻繁操作這些dom其實是非常消耗性能的

在看下圖，這是一個節(jié)點上的屬性，可以看到一個節(jié)點上的屬性是非常多的，在復雜應用中，操作這些屬性的時候可能一不小心就會引起節(jié)點大量的更新，那如何提高應用的性能呢？

const div = document.createElement('div');
let str = ''
for(let k in div){str+=','+k
}
console.log(str)

為什么會出現Fiber

react從15版本開始，到現在的17，以及快出來的18，內部經歷了非常大的變化，這一切都是圍繞著一個目標進行的，這個目標是異步可中斷的更新，而這個目的的最終結果是為了構建快速響應的應用。

復雜應用在更新的時候可能會更新大量的dom，所以react在應用層和dom層之間增加了一層Fiber，而Fiber是在內存中工作的，所以在更新的時候只需要在內存中進行dom更新的比較，最后再應用到需要更新真實節(jié)點上

這就引出了一個對比新老節(jié)點的過程，而對比兩棵樹的計算其實是非常消耗性能的，react提出了diff算法來降低對比的復雜度，具體diff的過程可以參考往期文章 diff算法

但是面對越來越復雜的應用，diff算法消耗的時間片還是很長，在沒做出優(yōu)化的情況下，react在進行Fiber的對比和更新節(jié)點上的狀態(tài)的時候依然力不從心，

• 在react15之前，這個對比的過程被稱之為stack reconcile，它的對比方式是‘一條路走到黑’，也就是說這個對比的過程是不能被中斷的，這會出現什么情況呢，比如在頁面渲染一個比較消耗性能操作，如果這個時候如果用戶進行一些操作就會出現卡頓，應用就會顯得不流暢。
• react16之后出現了scheduler，以及react17的Lane模型，它們可以配合著工作，將比較耗時的任務按照Fiber節(jié)點劃分成工作單元，并且遍歷Fiber樹計算或者更新節(jié)點上的狀態(tài)可以被中斷、繼續(xù)，以及可以被高優(yōu)先級的任務打斷，比如用戶觸發(fā)的更新就是一個高優(yōu)先級的任務，高優(yōu)先級的任務優(yōu)先執(zhí)行，應用就不會太卡頓。

什么是Fiber

這就是react所要做的事情了，react創(chuàng)新的提出了jsx，聲明式地描述頁面呈現的效果，jsx會被babel經過ast解析成React.createElement，而React.createElement函數執(zhí)行之后就是jsx對象或者說是virtual-dom

• 在mount的時候，也就是首次渲染的時候，render階段會根據jsx對象生成新的Fiber節(jié)點，然后這些Fiber節(jié)點會被標記成帶有‘Placement’的副作用，說明它們是新增的節(jié)點，需要被插入到真實節(jié)點中，在commit階段就會操作真實節(jié)點，將它們插入到dom樹中。
• 在update的時候，也就是應用觸發(fā)更新的時候，render階段會根據最新的jsx和老的Fiber進行對比，生成新的Fiber，這些Fiber會帶有各種副作用，比如‘Deletion’、‘Update’、‘Placement’等，這一個對比的過程就是diff算法 ，在commit階段會操作真實節(jié)點，執(zhí)行相應的副作用。

如果對render階段和commit階段不了解的可以查看往期文章

8.render階段

10.commit階段

Fiber有比較多的含義，他可以從以下幾個角度理解：

• 工作單元 任務分解 ：Fiber最重要的功能就是作為工作單元，保存原生節(jié)點或者組件節(jié)點對應信息（包括優(yōu)先級），這些節(jié)點通過指針的形似形成Fiber樹

• 增量渲染：通過jsx對象和current Fiber的對比，生成最小的差異補丁，應用到真實節(jié)點上

• 根據優(yōu)先級暫停、繼續(xù)、排列優(yōu)先級：Fiber節(jié)點上保存了優(yōu)先級，能通過不同節(jié)點優(yōu)先級的對比，達到任務的暫停、繼續(xù)、排列優(yōu)先級等能力，也為上層實現批量更新、Suspense提供了基礎

• **保存狀態(tài)：**因為Fiber能保存狀態(tài)和更新的信息，所以就能實現函數組件的狀態(tài)更新，也就是hooks

  相關參考視頻講解：進入學習

Fiber的數據結構

Fiber的自帶的屬性如下：

//ReactFiber.old.js
function FiberNode(tag: WorkTag,pendingProps: mixed,key: null | string,mode: TypeOfMode,
) {//作為靜態(tài)的數據結構 保存節(jié)點的信息 this.tag = tag;//對應組件的類型this.key = key;//key屬性this.elementType = null;//元素類型this.type = null;//func或者classthis.stateNode = null;//真實dom節(jié)點//作為fiber數架構 連接成fiber樹this.return = null;//指向父節(jié)點this.child = null;//指向childthis.sibling = null;//指向兄弟節(jié)點this.index = 0;this.ref = null;//用作為工作單元 來計算statethis.pendingProps = pendingProps;this.memoizedProps = null;this.updateQueue = null;this.memoizedState = null;this.dependencies = null;this.mode = mode;//effect相關this.effectTag = NoEffect;this.nextEffect = null;this.firstEffect = null;this.lastEffect = null;//優(yōu)先級相關的屬性this.lanes = NoLanes;this.childLanes = NoLanes;//current和workInProgress的指針this.alternate = null;
}

Fiber是怎樣工作的

現在我們知道了Fiber可以保存真實的dom，真實dom對應在內存中的Fiber節(jié)點會形成Fiber樹，這顆Fiber樹在react中叫current Fiber，也就是當前dom樹對應的Fiber樹，而正在構建Fiber樹叫workInProgress Fiber，這兩顆樹的節(jié)點通過alternate相連.

function App() {return (<><h1><p>count</p> xiaochen</h1></>)
}ReactDOM.render(<App />, document.getElementById("root"));

構建workInProgress Fiber發(fā)生在createWorkInProgress中，它能創(chuàng)建或者服用Fiber

//ReactFiber.old.js
export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {let workInProgress = current.alternate;if (workInProgress === null) {//區(qū)分是在mount時還是在update時workInProgress = createFiber(current.tag,pendingProps,current.key,current.mode,);workInProgress.elementType = current.elementType;workInProgress.type = current.type;workInProgress.stateNode = current.stateNode;workInProgress.alternate = current;current.alternate = workInProgress;} else {workInProgress.pendingProps = pendingProps;//復用屬性workInProgress.type = current.type;workInProgress.flags = NoFlags;workInProgress.nextEffect = null;workInProgress.firstEffect = null;workInProgress.lastEffect = null;//...}workInProgress.childLanes = current.childLanes;//復用屬性workInProgress.lanes = current.lanes;workInProgress.child = current.child;workInProgress.memoizedProps = current.memoizedProps;workInProgress.memoizedState = current.memoizedState;workInProgress.updateQueue = current.updateQueue;const currentDependencies = current.dependencies;workInProgress.dependencies =currentDependencies === null? null: {lanes: currentDependencies.lanes,firstContext: currentDependencies.firstContext,};workInProgress.sibling = current.sibling;workInProgress.index = current.index;workInProgress.ref = current.ref;return workInProgress;
}

• 在mount時：會創(chuàng)建fiberRoot和rootFiber，然后根據jsx對象創(chuàng)建Fiber節(jié)點，節(jié)點連接成current Fiber樹。
  

• 在update時：會根據新的狀態(tài)形成的jsx（ClassComponent的render或者FuncComponent的返回值）和current Fiber對比形（diff算法）成一顆叫workInProgress的Fiber樹，然后將fiberRoot的current指向workInProgress樹，此時workInProgress就變成了current Fiber。fiberRoot：指整個應用的根節(jié)點，只存在一個

  fiberRoot：指整個應用的根節(jié)點，只存在一個

  rootFiber：ReactDOM.render或者ReactDOM.unstable_createRoot創(chuàng)建出來的應用的節(jié)點，可以存在多個。

  我們現在知道了存在current Fiber和workInProgress Fiber兩顆Fiber樹，Fiber雙緩存指的就是，在經過reconcile（diff）形成了新的workInProgress Fiber然后將workInProgress Fiber切換成current Fiber應用到真實dom中，存在雙Fiber的好處是在內存中形成視圖的描述，在最后應用到dom中，減少了對dom的操作。

現在來看看Fiber雙緩存創(chuàng)建的過程圖：

• mount時：

  1. 剛開始只創(chuàng)建了fiberRoot和rootFiber兩個節(jié)點
     
  2. 然后根據jsx創(chuàng)建workInProgress Fiber：
     
  3. 把workInProgress Fiber切換成current Fiber
     

• update時

  1. 根據current Fiber創(chuàng)建workInProgress Fiber
     
  2. 把workInProgress Fiber切換成current Fiber

為什么Fiber能提升效率

Fiber是一個js對象，能承載節(jié)點信息、優(yōu)先級、updateQueue，同時它還是一個工作單元。

1. Fiber雙緩存可以在構建好wip Fiber樹之后切換成current Fiber，內存中直接一次性切換，提高了性能
2. Fiber的存在使異步可中斷的更新成為了可能，作為工作單元，可以在時間片內執(zhí)行工作，沒時間了交還執(zhí)行權給瀏覽器，下次時間片繼續(xù)執(zhí)行之前暫停之后返回的Fiber
3. Fiber可以在reconcile的時候進行相應的diff更新，讓最后的更新應用在真實節(jié)點上