React新引擎React Fiber究竟要解決什麼問題？

本文首發地址：React新引擎React Fiber究竟要解決什麼問題？關注前端之巔公眾號，及時獲得最新推送哦！

ntt作者 | David Ifflandntntt譯者 | 大愚若智nt

Facebook 正在以流行的 JavaScript 框架 React 為基礎開發一個全新的架構。這個名為 React Fiber 的全新設計改變了檢測變更的方法和時機，藉此可改進瀏覽器端和其他渲染設備的響應速度。

這一 全新架構 最初已於 2016 年 7 月公開發布，其中蘊含著過去多年來 Facebook 不斷改進的工作成果。該架構可向後兼容，徹底重寫了 React 的協調（Reconciliation）演算法。該過程可用於確定出現變更的具體時間，並將變更傳遞給渲染器。

實際上該團隊在單線程 JavaScript 引擎的基礎上構建了一種可劃分優先順序的 協作式 任務調度器。在最初的協調演算法（現已更名為 Stack Reconciler）中，Virtual DOM diff 會一次性處理整個組件樹：

重點在於，Stack Reconciler 始終會一次性地同步處理整個組件樹。Stack Reconciler 無法暫停，因此如果更新較為深入並且可用 CPU 時間有限，這種做法並非最優化的。

n

與之相對的 Fiber Reconciler 則有著截然不同的目標：

• 能夠將可中斷的任務拆分成塊。

n

• 能夠對進程中的工作劃分優先順序、重新設定基址（Rebase）、恢復。

n

• 能夠在父子之間來回反覆，藉此為 React 的 Layout 提供支持。

n

• 能夠通過 render() 返回多個元素。

n

• 為錯誤邊界提供了更好的支持。

n

簡單來說，此時不在需要等待變更傳播到整個組件樹，React Fiber 可以知道如何時不時暫停一下，檢查是否有其他更重要的更新。這種調度能力主要基於 requestIdleCallback 的使用，而這是一種 W3C 候選推薦標準。

在 React Conf 2017 大會上，Lin Clark 通過名為 React Fiber 簡介 的演講循序漸進介紹了新協調器的獨到之處。

大部分情況下，開發者無需擔心代碼的適配問題，但也有少量應用依賴以特定順序進行的生命周期鉤子（Lifecycle hook）。由於順序已經無法保證，因此可能會遇到一些問題。

「為確保這一特性不會影響應用」，Clark 稱：「Fiber 團隊正在制定更為平緩的升級路徑」。

Dan Abramov寫到，React 團隊認為大部分 React 應用不會因為第 16 版而遇到問題：

React 16（正在開發中）是一次革新，但也使用了相同的公開 API。對於 Facebook 所使用的超過 30,000 個（！）組件，其中只有少量需要改動，並且這少數組件主要被一些已經不再支持或沒有正式記錄在案的行為所使用。因此可以說完全可以保證 99.9% 的兼容性。這也讓我們確信 React 16 基本上也可以直接適用於你的代碼。

n

Fiber 將在 React 16 中首次登場，第 16 版不僅包含新的協調引擎，而且提供了可串聯使用的全新渲染器（例如 ReactDOM、React Native）。同時 isfiberreadyyet.com 提供了測試套件的最新結果。截至撰寫本文時，已順利通過了 92.2% 的測試。

ntt英文原文

React Fiber: A Closer Look at the New Engine of React今日薦文nttnttnttnttnttnttnttntt前端每周清單：支付寶前端構建工具發展、LinkedIn用Brotli加快網頁響應速度、餓了么PWA 升級實踐ntt

視野拓展

InfoQ 主辦的移動和前端開發領域的精品大會【GMTC 2017】將於 6 月 9～10 日在北京舉行，作為首屆以「大前端」為主題的大會，GMTC 涉及移動、前端、跨平台、AI 應用等多個技術領域，幫助你方方面面提高技術水平。前往官網了解詳細信息！

前端之巔nt

「前端之巔」是 InfoQ 旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號後回復「加群」。推薦分享或投稿請發郵件到 editors@cn.infoq.com，註明「前端之巔投稿」。

推薦閱讀：