Fiber 數(shù)據(jù)結(jié)構(gòu)是怎樣的？
每個 Virtual DOM 都可以表示為一個 fiber，如下圖所示，每個節(jié)點都是一個 fiber。一個 fiber包括了 child（第一個子節(jié)點）、sibling（兄弟節(jié)點）、return（父節(jié)點）等屬性。
PS：這里需要說明一下，F(xiàn)iber 是 React 進行重構(gòu)的核心算法，fiber 是指數(shù)據(jù)結(jié)構(gòu)中的每一個節(jié)點，如下圖所示的A1、B1都是一個 fiber。
實現(xiàn)虛擬 DOM 構(gòu)建 fiber 樹。
let A = {type: 'div',key: 'A',props: {children: [{ type: 'div', key: 'B1', props: { children: []} },{ type: 'div', key: 'B2', props: { children: []} }]}}let workInProgress;const TAG_ROOT = 'TAG_ROOT' // 根fiberconst TAG_HOST = 'TAG_HOST' // 原生DOM節(jié)點function workLoop () {while(workInProgress) {workInProgress = performaUnitOfWork(workInProgress)}}let root = document.getElementById('root')// fiber是一個普通的JS對象let rootFiber = {tag: TAG_ROOT, // fiber類型key: 'ROOT', // 唯一標識stateNode: root, // fiber對應(yīng)真實DOMprops: {children: [A] // 虛擬DOM成為根fiber唯一的children}}function performaUnitOfWork(workInProgress) {beginWork(workInProgress)if (workInProgress.child) {return workInProgress.child}while(workInProgress) {if (workInProgress.sibling) {return workInProgress.sibling}workInProgress = workInProgress.return}}// 根據(jù)當前fiber和虛擬DOM構(gòu)建fiber樹function beginWork(workInProgress) {console.log('beginWork', workInProgress.key)let nextChildren = workInProgress.props.childrenreturn reconcileChildren(workInProgress, nextChildren)}// 根據(jù)父fiber和子虛擬DOM，構(gòu)建當前returnFiber的子fiber樹function reconcileChildren(returnFiber, nextChildren) {let previousNewFiber;let firstChildFiber;for (let newIndex = 0; newIndex < nextChildren.length; newIndex++) {let newFiber = createFiber(nextChildren[newIndex])newFiber.return = returnFiberif (!firstChildFiber) {firstChildFiber = newFiber} else {previousNewFiber.sibling = newFiber}previousNewFiber = newFiber}returnFiber.child = firstChildFiberreturn firstChildFiber}function createFiber (element) {return {tag: TAG_HOST,type: element.type,key: element.key,props: element.props}}// 當前真正執(zhí)行的工作單元workInProgress = rootFiberworkLoop()
fiber 節(jié)點包括了以下的屬性：
（1）type & key
fiber 的 type 和 key 與 React 元素的作用相同。fiber 的 type 描述了它對應(yīng)的組件，對于復(fù)合組件，type 是函數(shù)或類組件本身。對于原生標簽（div，span等），type 是一個字符串。隨著 type 的不同，在 reconciliation 期間使用 key 來確定 fiber 是否可以重新使用。
（2）stateNode
stateNode 保存對組件的類實例，DOM節(jié)點或與 fiber 節(jié)點關(guān)聯(lián)的其他 React 元素類型的引用。一般來說，可以認為這個屬性用于保存與 fiber 相關(guān)的本地狀態(tài)。
（3）child & sibling & return
child 屬性指向此節(jié)點的第一個子節(jié)點（大兒子）。sibling 屬性指向此節(jié)點的下一個兄弟節(jié)點（大兒子指向二兒子、二兒子指向三兒子）。return 屬性指向此節(jié)點的父節(jié)點，即當前節(jié)點處理完畢后，應(yīng)該向誰提交自己的成果。如果 fiber 具有多個子 fiber，則每個子 fiber 的 return fiber 是 parent 。
所有 fiber 節(jié)點都通過以下屬性：child，sibling 和 return來構(gòu)成一個 fiber node 的 linked list(后面我們稱之為鏈表)。如下圖所示：