深入瞭解React新引擎:ReactFiber
Facebook正在以流行的JavaScript框架React為基礎開發一個全新的架構。這個名為React Fiber的全新設計改變了檢測變更的方法和時機,藉此可改進瀏覽器端和其他渲染裝置的響應速度。
這一全新架構最初已於2016年7月公開發布,其中蘊含著過去多年來Facebook不斷改進的工作成果。該架構可向後相容,徹底重寫了React的協調(Reconciliation)演算法。該過程可用於確定出現變更的具體時間,並將變更傳遞給渲染器。
實際上該團隊在單執行緒JavaScript引擎的基礎上構建了一種可劃分優先順序的協作式任務排程器。在最初的協調演算法(現已更名為Stack Reconciler)中,Virtual DOM diff會一次性處理整個元件樹:
重點在於,Stack Reconciler始終會一次性地同步處理整個元件樹。Stack Reconciler無法暫停,因此如果更新較為深入並且可用CPU時間有限,這種做法並非最優化的。
與之相對的Fiber Reconciler則有著截然不同的目標:
能夠將可中斷的任務拆分成塊。 能夠對程式中的工作劃分優先順序、重新設定基址(Rebase)、恢復。 能夠在父子之間來回反覆,藉此為React的Layout提供支援。 能夠通過render()返回多個元素。 為錯誤邊界提供了更好的支援。
簡單來說,此時不在需要等待變更傳播到整個元件樹,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基本上也可以直接適用於你的程式碼。
Fiber將在React 16中首次登場,第16版不僅包含新的協調引擎,而且提供了可串聯使用的全新渲染器(例如ReactDOM、React Native)。同時isfiberreadyyet.com提供了測試套件的最新結果。截至撰寫本文時,已順利通過了92.2%的測試。
本文轉自d1net(轉載)
相關文章
- 瞭解JavaScript引擎JavaScript
- JavaScript——深入瞭解thisJavaScript
- 深入瞭解機器學習機器學習
- 深入瞭解原型原型
- 深入瞭解 NSURLSessionSession
- React的新引擎—React Fiber是什麼?React
- 模擬實現 JS 引擎:深入瞭解 JS機制 以及 Microtask and MacrotaskJSMac
- [譯] 深入瞭解 FlutterFlutter
- 深入瞭解Synchronized原理synchronized
- 深入瞭解babel(一)Babel
- Express基礎瞭解—模板引擎Express
- 快速瞭解 React Hooks 原理ReactHook
- 瞭解一個React元件React元件
- 深入瞭解 Object.definePropertyObject
- 深入瞭解Zookeeper核心原理
- 深入瞭解 Builder 模式 - frankelUI模式
- 深入瞭解MySQL的索引MySql索引
- 深入瞭解Object.definePropertyObject
- 深入瞭解Java社群程式Java
- 深入瞭解jvm-2Edition-虛擬機器位元組碼執行引擎JVM虛擬機
- 只需要瞭解常用的4個api, 就能深入理解React HooksAPIReactHook
- 深入React v16新特性(二)React
- 深入React v16新特性(一)React
- 深入瞭解解析Https - 從瞭解到放棄HTTP
- 你真的瞭解Innodb儲存引擎?儲存引擎
- 深入瞭解JavaScript中的物件JavaScript物件
- Nginx深入瞭解-基礎(一)Nginx
- Nginx深入瞭解-基礎(三)Nginx
- 前端進階-深入瞭解物件前端物件
- 深入瞭解 gRPC:協議RPC協議
- 轉載 :深入瞭解ORACLE SCNOracle
- 深入瞭解Oracle資料字典Oracle
- React-HOC瞭解一下React
- react-router瞭解一下React
- 深入瞭解 iOS 的初始化iOS
- 深入瞭解Kafka基本原理Kafka
- OkHttp3深入瞭解之InterceptorsHTTP
- 深入瞭解JS型別判斷JS型別