React Fiber中面試官最關心的技術話題

更新時間：2023年06月29日 08:59:37 作者：沐華

這篇文章主要為大家介紹了React Fiber中面試官最關心的技術話題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

關于 React Fiber 出來也有幾年了，可最近面試多了才發(fā)現(xiàn)，還是有很多人一知半解，所以本文梳理了一下有關 Fiber、以及這個話題環(huán)環(huán)相扣，可以延伸的點，給大家面試復習、查缺補漏，如果你是面試官也可直接拿去提問

React Fiber

說一下 React Fiber

是指時間分片嘛，可以把渲染工作切片，優(yōu)化渲染性能的。

因為 React 是函數(shù)式編程嘛，單向數(shù)據(jù)流，需要手動 setState 來更新，所以當數(shù)據(jù)改變時會默認全部重新渲染整個組件樹，而構(gòu)建虛擬 DOM 則是采用同步遞歸的方式，如果組件很復雜且嵌套深，那么這個構(gòu)建虛擬 DOM 的過程就需要很多時間，而這種任務默認要執(zhí)行完才會把控制權交給瀏覽器，一旦執(zhí)行時間很長，可能就會地把瀏覽器卡死。

雖然可以用 pureComponent/shouldComponentUpdate/useMemo/useCallback 等方法來進行控制部分更新或緩存，但也是治標不治本。而 fiber 是可以使渲染過程被中斷，可以把控制權先交還給瀏覽器，讓位高優(yōu)先級的任務，等瀏覽器空閑時再恢復渲染，這樣就不會顯得卡頓，而是一幀一幀有規(guī)律的執(zhí)行任務，看起來雖然有點慢，但是一直在慢慢執(zhí)行的

就像一個房子，組件層級就像房子的樓層，但是每一層房子頂都破了很多個洞的，那幾個方法就像一片瓦，都能蓋一個小洞，但稍不注意少蓋一個房間就會漏水，房間里的人(用戶)就能感知到(卡)，而 fiber 就像在破洞下面放了根水管直接通到屋外，雖然看起來水管彎彎繞繞的，水落地的時間慢了(執(zhí)行時間長了)，但房間里的人，就感覺不到漏水了(屋子還是個破屋子)

實在是因為 React 沒辦法在編譯階段優(yōu)化更多了，所以采用這種方式來彌補傷害

React Fiber 是怎么實現(xiàn)的

主要是通過兩個原生的 API 來實現(xiàn)的 requestAnimationFrame 和 requestIdleCallback

顯示器每秒 60 幀我們看著才不會感覺到卡嘛，比如動畫的時候，一幀的時間內(nèi)布局和繪制結(jié)束，還有剩余時間，JS 就會拿到主線程使用權，如果 JS 某個任務執(zhí)行過長，動畫下一幀開始時 JS 還沒有執(zhí)行完，就會導致掉幀，出現(xiàn)卡頓。

所以就通過把 JS 任務分成更小的任務塊，分到每一幀上的方式，一幀時間到先暫停 JS 執(zhí)行，然后下一幀繪制任完成再把主線程交給 JS，在每一幀繪制之前調(diào)用 requestAnimationFrame；在每一幀空間階段，就是一幀動畫任務完成，下一幀還沒到開始時間，這中間還有時間的話就調(diào)用 requetIdleCallback，執(zhí)行它里面的任務

其他方式能實現(xiàn)

函數(shù)式編程嘛，generator 就可以控制函數(shù)的運行過程中斷和恢復，就像這樣：

// 任務列表
const tasks = []
function * run () {
    let task
    while(task = task.shift()) {
        // 如果有高優(yōu)先級的任務
        if (hasHighPriorityTask()) {
            // 中斷
            yield
        }
    }
}
// 中斷后恢復
const iterator = run()
// 這樣就恢復了
iterator.next()

為什么不直接用 generator

這個問題 React 開發(fā)者有在源碼里回答過：

一是因為 React 是迭代的，而使用 generator + yield 的話需要把所有代碼都包裝成這個形式，非常麻煩，工作量很大
二是 generator 內(nèi)部是有狀態(tài)的，比如一個函數(shù)里有用到多個 yield 中斷，就像 await 一樣，有時候后面的會依賴前面的結(jié)果，可當后面的執(zhí)行前，前面的又更新了，后面就無法拿到最新的值，這樣就不可控了

所以就自己實現(xiàn)一個完全可控的