Facebook正在以流行的JavaScript框架React為基礎(chǔ)開(kāi)發(fā)一個(gè)全新的架構(gòu)。這個(gè)名為React Fiber的全新設(shè)計(jì)改變了檢測(cè)變更的方法和時(shí)機(jī),借此可改進(jìn)瀏覽器端和其他渲染設(shè)備的響應(yīng)速度。
這一全新架構(gòu)最初已于2016年7月公開(kāi)發(fā)布,其中蘊(yùn)含著過(guò)去多年來(lái)Facebook不斷改進(jìn)的工作成果。該架構(gòu)可向后兼容,徹底重寫(xiě)了React的協(xié)調(diào)(Reconciliation)算法。該過(guò)程可用于確定出現(xiàn)變更的具體時(shí)間,并將變更傳遞給渲染器。
實(shí)際上該團(tuán)隊(duì)在單線程JavaScript引擎的基礎(chǔ)上構(gòu)建了一種可劃分優(yōu)先級(jí)的協(xié)作式任務(wù)調(diào)度器。在最初的協(xié)調(diào)算法(現(xiàn)已更名為Stack Reconciler)中,Virtual DOM diff會(huì)一次性處理整個(gè)組件樹(shù):
重點(diǎn)在于,Stack Reconciler始終會(huì)一次性地同步處理整個(gè)組件樹(shù)。Stack Reconciler無(wú)法暫停,因此如果更新較為深入并且可用CPU時(shí)間有限,這種做法并非最優(yōu)化的。
與之相對(duì)的Fiber Reconciler則有著截然不同的目標(biāo):
能夠?qū)⒖芍袛嗟娜蝿?wù)拆分成塊。 能夠?qū)M(jìn)程中的工作劃分優(yōu)先級(jí)、重新設(shè)定基址(Rebase)、恢復(fù)。 能夠在父子之間來(lái)回反復(fù),借此為React的Layout提供支持。 能夠通過(guò)render()返回多個(gè)元素。 為錯(cuò)誤邊界提供了更好的支持。簡(jiǎn)單來(lái)說(shuō),此時(shí)不在需要等待變更傳播到整個(gè)組件樹(shù),React Fiber可以知道如何時(shí)不時(shí)暫停一下,檢查是否有其他更重要的更新。這種調(diào)度能力主要基于requestIdleCallback的使用,而這是一種W3C候選推薦標(biāo)準(zhǔn)。
在React Conf 2017大會(huì)上,Lin Clark通過(guò)名為React Fiber簡(jiǎn)介的演講循序漸進(jìn)介紹了新協(xié)調(diào)器的獨(dú)到之處。
大部分情況下,開(kāi)發(fā)者無(wú)需擔(dān)心代碼的適配問(wèn)題,但也有少量應(yīng)用依賴以特定順序進(jìn)行的生命周期鉤子(Lifecycle hook)。由于順序已經(jīng)無(wú)法保證,因此可能會(huì)遇到一些問(wèn)題。
“為確保這一特性不會(huì)影響應(yīng)用”,Clark稱:“Fiber團(tuán)隊(duì)正在制定更為平緩的升級(jí)路徑”。
Dan Abramov寫(xiě)到,React團(tuán)隊(duì)認(rèn)為大部分React應(yīng)用不會(huì)因?yàn)榈?6版而遇到問(wèn)題:
React 16(正在開(kāi)發(fā)中)是一次革新,但也使用了相同的公開(kāi)API。對(duì)于Facebook所使用的超過(guò)30,000個(gè)(?。┙M件,其中只有少量需要改動(dòng),并且這少數(shù)組件主要被一些已經(jīng)不再支持或沒(méi)有正式記錄在案的行為所使用。因此可以說(shuō)完全可以保證99.9%的兼容性。這也讓我們確信React 16基本上也可以直接適用于你的代碼。
Fiber將在React 16中首次登場(chǎng),第16版不僅包含新的協(xié)調(diào)引擎,而且提供了可串聯(lián)使用的全新渲染器(例如ReactDOM、React Native)。同時(shí)isfiberreadyyet.com提供了測(cè)試套件的最新結(jié)果。截至撰寫(xiě)本文時(shí),已順利通過(guò)了92.2%的測(cè)試。
閱讀英文原文:React Fiber: A Closer Look at the New Engine of React