React 重要的一次重構：認識異步渲染架構 Fiber

cppowboy 發布于2019-08-26 12:23 / 3516人閱讀

摘要：在之前的叫，是新的，這次更新到架構是一次重量級的核心架構的替換，為了完成這次替換已經準備了兩三年的時間了。因此團隊引入了異步渲染這個概念，而采用架構可以實現這種異步渲染的方式。官方目前已經把和標記為，并使用新的生命周期函數和進行替換。

Diff 算法

熟悉 react 的朋友都知道，在 react 中有個核心的算法，叫 diff 算法。web 界面由 dom 樹組成，不同的 dom 樹會渲染出不同的界面。react 使用 virtual dom 來表示 dom 樹，而 diff 算法就是用于比較 virtual dom 樹的區別，并更新界面需要更新的部分。diff 算法和 virtual dom 的完美結合的過程被稱為 reconciler，這可是 react 攻城拔寨的絕對利器。有了 reconciler，開發者可以脫身操作真實的 dom 樹，只需要向 react 描述界面的狀態，而 react 會幫助你高效的完成真正 dom 操作。

在 react16 之前的 reconciler 叫 stack reconciler，fiber 是 react 新的 reconciler，這次更新到 fiber 架構是一次重量級的核心架構的替換，react 為了完成這次替換已經準備了兩三年的時間了。

那么 fiber 究竟有什么好的呢？

Fiber 為何出現

不知道大家有沒有遇到過這樣的情況，點擊一個頁面的按鈕時感覺到頁面沒有任何的反應，讓你懷疑電腦是不是死機了，然后你快速切出瀏覽器，發現電腦并沒有死機，于是再切回瀏覽器，這時候才發現頁面終于更新了。為什么會出現這種情況？在多數情況下，可能是因為瀏覽器忙著執行相關的 js 代碼，導致瀏覽器主線程沒有及時響應用戶的操作或者沒有及時更新界面。下面這張圖就表示了這種現象，你的公司只有一個程序員 (main thread)，當這個程序員在執行你的任務 (your code) 時，處于沉浸式編程的狀態，無法響應外部的其他事件，什么下班吃飯，都是不存在的。這就像瀏覽器忙著執行 js 代碼的時候，不會去執行頁面更新等操作。

本著顧客是上帝的原則，作為一名優秀的開發者，怎么能夠允許出現這種情況降低用戶的體驗呢。因此 react 團隊引入了異步渲染這個概念，而采用 fiber 架構可以實現這種異步渲染的方式。

原先的 stack reconciler 像是一個遞歸執行的函數，從父組件調用子組件的 reconciler 過程就是一個遞歸執行的過程，這也是為什么被稱為 stack reconciler 的原因。當我們調用 setState 的時候，react 從根節點開始遍歷，找出所有的不同，而對于特別龐大的 dom 樹來說，這個遞歸遍歷的過程會消耗特別長的時間。在這個期間，任何交互和渲染都會被阻塞，這樣就給用戶一種“死機”的感覺。

fiber 的出現解決了這個問題，它把 reconciler 的過程拆分成了一個個的小任務，并在完成了小任務之后暫停執行 js 代碼，然后檢查是否有需要更新的內容和需要響應的事件，做出相應的處理后再繼續執行 js 代碼。這樣就給了用戶一種應用一直在運行的感覺，提高了用戶的體驗。

Fiber 如何做到異步渲染

在做顯示方面的工作時，經常會聽到一個目標叫 60 幀，這表示的是畫面的更新頻率，也就是畫面每秒鐘更新 60 次。這是因為在 60 幀的更新頻率下，頁面在人眼中顯得流暢，無明顯卡頓。每秒鐘更新 60 次也就是每 16ms 需要更新一次頁面，如果更新頁面消耗的時間不到 16ms，那么在下一次更新時機來到之前會剩下一點時間執行其他的任務，只要保證及時在 16ms 的間隔下更新界面就完全不會影響到頁面的流暢程度。fiber 的核心正是利用了 60 幀原則，實現了一個基于優先級和 requestIdleCallback 的循環任務調度算法。

requestIdleCallback 是瀏覽器提供的一個 api，可以讓瀏覽器在空閑的時候執行回調，在回調參數中可以獲取到當前幀剩余的時間，fiber 利用了這個參數，判斷當前剩下的時間是否足夠繼續執行任務，如果足夠則繼續執行，否則暫停任務，并調用 requestIdleCallback 通知瀏覽器空閑的時候繼續執行當前的任務。

function fiber(剩余時間) {
 if (剩余時間 > 任務所需時間) {
 做任務;
 } else {
 requestIdleCallback(fiber);
 }
}

fiber 還會為不同的任務設置不同的優先級，高優先級任務是需要馬上展示到頁面上的，比如你正在輸入框中輸入文字，你肯定希望你的手指在鍵盤上敲下每一個按鍵時，輸入框能立馬做出反饋，這樣你才能知道你的輸入是否正確，是否有效。低優先級的任務則是像從服務器傳來了一些數據，這個時候需要更新頁面，比如這篇文章喜歡的人數+1 或是評論+1，這并不是那么緊急的更新，延遲 100-200ms 并不會有多大差別，完全可以在后面進行處理。fiber 會根據任務優先級來動態調整任務調度，優先完成高優先級的任務。

{ 
 Synchronous: 1, // 同步任務，優先級最高
 Task: 2, // 當前調度正執行的任務
 Animation 3, // 動畫
 High: 4, // 高優先級
 Low: 5, // 低優先級
 Offscreen: 6, // 當前屏幕外的更新，優先級最低
}

在 fiber 架構中，有一種數據結構，它的名字就叫做 fiber，這也是為什么新的 reconciler 叫做 fiber 的原因。fiber 其實就是一個 js 對象，這個對象的屬性中比較重要的有 stateNode、tag、return、child、sibling 和 alternate。

Fiber = {
 tag // 標記任務的進度
 return // 父節點
 child // 子節點
 sibling // 兄弟節點
 alternate // 變化記錄
 .....
};

我們可以看出 fiber 基于鏈表結構，擁有一個個指針，指向它的父節點子節點和兄弟節點，在 diff 的過程中，依照節點連接的關系進行遍歷。

fiber 可能存在的問題

在 fiber 中，更新是分階段的，具體分為兩個階段，首先是 reconciliation 的階段，這個階段在計算前后 dom 樹的差異，然后是 commit 的階段，這個階段將把更新渲染到頁面上。第一個階段是可以打斷的，因為這個階段耗時可能會很長，因此需要暫停下來去執行其他更高優先級的任務，第二個階段則不會被打斷，會一口氣把更新渲染到頁面上。

由于 reconciliation 的階段會被打斷，可能會導致 commit 前的這些生命周期函數多次執行。react 官方目前已經把 componentWillMount、componentWillReceiveProps 和 componetWillUpdate 標記為 unsafe，并使用新的生命周期函數 getDerivedStateFromProps 和 getSnapshotBeforeUpdate 進行替換。

還有一個問題是饑餓問題，意思是如果高優先級的任務一直插入，導致低優先級的任務無法得到機會執行，這被稱為饑餓問題。對于這個問題官方提出的解決方案是盡量復用已經完成的操作來緩解。相信官方也正在努力提出更好的方法去解決這個問題。

文 / Xss

編 / 熒聲

本文已由作者授權發布，版權屬于創宇前端。歡迎注明出處轉載本文。本文鏈接：https://knownsec-fed.com/2018...

想要訂閱更多來自知道創宇開發一線的分享，請搜索關注我們的微信公眾號：創宇前端（KnownsecFED）。歡迎留言討論，我們會盡可能回復。

感謝您的閱讀。

GPU云服務器云服務器 react-fiber Fiber 人工智能的一天 js求和表的一列數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108585.html

淺談React Fiber

摘要：因為版本將真正廢棄這三生命周期到目前為止，的渲染機制遵循同步渲染首次渲染，更新時更新時卸載時期間每個周期函數各司其職，輸入輸出都是可預測，一路下來很順暢。通過進一步觀察可以發現，預廢棄的三個生命周期函數都發生在虛擬的構建期間，也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景前段時間準備前端招聘事項...

izhuhaodev 2019-08-26 10:43 評論0 收藏0
「React 16」為 Luy 實現 React Fiber 架構

摘要：開始寫代碼構造函數講了那么多的理論，大家一定是暈了，但是沒辦法，架構已經比之前的簡單要復雜太多了，因此不可能指望一次性把的內容全部理解，需要反復多看。前言 Facebook 的研發能力真是驚人， Fiber 架構給 React 帶來了新視野的同時，將調度一詞介紹給了前端，然而這個架構實在不好懂，比起以前的 Vdom 樹，新的 Fiber 樹就麻煩太多。可以說，React 16 和 ...

DevWiki 2019-08-22 17:26 評論0 收藏0
React Fiber 架構理解

摘要：架構理解引用原文是核心算法正在進行的重新實現。構建的過程就是的過程，通過來調度執行一組任務，每完成一個任務后回來看看有沒有插隊的更緊急的，把時間控制權交還給主線程，直到下一次回調再繼續構建。 React Fiber 架構理解引用原文：React Fiber ArchitectureReact Fiber is an ongoing reimplementation of Reacts...

Berwin 2019-08-23 16:32 評論0 收藏0
Deep In React之淺談 React Fiber 架構(一)

摘要：在上面我們已經知道瀏覽器是一幀一幀執行的，在兩個執行幀之間，主線程通常會有一小段空閑時間，可以在這個空閑期調用空閑期回調，執行一些任務。另外由于這些堆棧是可以自己控制的，所以可以加入并發或者錯誤邊界等功能。文章首發于個人博客前言 2016 年都已經透露出來的概念，這都 9102 年了，我才開始寫 Fiber 的文章，表示慚愧呀。不過現在好的是關于 Fiber 的資料已經很豐富了，...

Jiavan 2019-08-23 18:19 評論0 收藏0