React Native團(tuán)隊(duì)宣布新架構(gòu)將于2022年推出。點(diǎn)擊??這里[1??]查看他們的完整博客。

“2022 is going to be the year of the New Architecture in open source”(2022將會(huì)是新架構(gòu)開源之年)

由于新版本發(fā)布在即，現(xiàn)在是個(gè)很好的機(jī)會(huì)去了解它的底層發(fā)生了哪些改變，以及這些改變會(huì)對(duì)我們的React Native App造成什么影響

本文主要介紹這次重構(gòu)變化最多的地方：

1. JavaScript Interface(JSI)
2. Fabric
3. Turbo Modules
4. CodeGen

當(dāng)前架構(gòu)

在學(xué)習(xí)新架構(gòu)之前，讓我們先回顧下當(dāng)前的架構(gòu)。

此次僅列舉一些和本文相關(guān)的知識(shí)點(diǎn)，如果想了解更多關(guān)于當(dāng)前架構(gòu)的內(nèi)容，閱讀Bianca Dragomir的??這篇文章[2]??

簡(jiǎn)而言之：

當(dāng)我們運(yùn)行RN應(yīng)用時(shí)，所有的 javascript 代碼會(huì)被打包到 JS Bundle，Native代碼則被單獨(dú)保存。

RN有以下三個(gè)線程：

1. JS thread：JS引擎使用該線程運(yùn)行JS Bundle。
2. Native/UI thread:  運(yùn)行原生能力(Native Modules)，處理UI渲染，用戶手勢(shì)事件等操作。
3. shadow thread：在元素渲染之前先計(jì)算布局。

JS和Native thread通過bridge進(jìn)行通信，當(dāng)通過bridge發(fā)送數(shù)據(jù)時(shí)，bridge會(huì)將數(shù)據(jù)排隊(duì)批處理(優(yōu)化)，并序列化成JSON，并且該通信只能是異步的。

current

重要術(shù)語(yǔ)：

JavaScriptCore：JavaScript引擎，用于執(zhí)行JS代碼。

Yoga：UI引擎，用于計(jì)算元素在用戶屏幕上展示的位置。

1. JavaScript Interface (JSI)

當(dāng)前架構(gòu)中，JS和Native thread通過bridge實(shí)現(xiàn)通信，每次傳輸數(shù)據(jù)時(shí)，需要先將數(shù)據(jù)序列化為JSON，接收時(shí)，再解析回來(lái)。

這意味著JS和Native相互獨(dú)立。(JS thread無(wú)法直接調(diào)用Native thread的方法)

另一個(gè)需要注意的點(diǎn)是，bridge傳輸?shù)臄?shù)據(jù)本質(zhì)上是異步的，在大多數(shù)用例中沒有問題，但在某些情況下，我們也需要JS和native代碼同步執(zhí)行。

舉個(gè)例子：

當(dāng)JS thread需要使用原生模塊時(shí)(如：藍(lán)牙)，需要發(fā)送信息給Native thread。首先JS thread會(huì)發(fā)送一條序列化后的JSON數(shù)據(jù)給bridge，之后bridge將數(shù)據(jù)優(yōu)化后發(fā)送給Native thread，Native thread解析JSON數(shù)據(jù)，最后再運(yùn)行所需的native代碼。

bridge

1)JS thread 準(zhǔn)備data

2)在發(fā)送給bridge前將data序列化為JSON

3)在bridge傳輸?shù)牧硪欢私馕鰀ata

4)Native thread執(zhí)行所需native代碼

然而，在新架構(gòu)中，bridge將被JavaScript Interface替代，這是一個(gè)輕量的，通用的層，使用C++編寫，JS引擎可以用它直接調(diào)用native的方法。

什么是通用？

當(dāng)前的架構(gòu)使用的是JavaScriptCore引擎，bridge只兼容該引擎。而JSI并非如此，它將JavaScript接口與引擎解耦，這意味著新架構(gòu)可以使用其他JavaScript引擎，如Chakra，v8，Hermes等，因此它是“通用”的。

JSI怎么讓JavaScript直接調(diào)用native方法？

在JSI中，native方法通過C++宿主對(duì)象暴露給JavaScript。JavaScript會(huì)將這些對(duì)象的引用保存下來(lái)，并通過這些引用直接調(diào)用方法。類似于在web中，JavaScript保存DOM元素對(duì)象的引用，并調(diào)用其方法。例如：

const container = document.createElement(‘div’);

在這段代碼中，JavaScript變量container指向DOM元素的引用，DOM元素則可能是C++初始化的。當(dāng)我們調(diào)用container的任何方法時(shí)，container會(huì)調(diào)用DOM元素內(nèi)的方法。JSI以類似的方式工作。

與bridge不同，JSI允許JavaScript保存對(duì)Native Modules的引用，JavaScript可以通過JSI直接調(diào)用這個(gè)引用的方法。

jsi

1)JavaScript持有native module的引用

1)它通過JavaScript Interface調(diào)用native module的方法

總而言之，JSI允許使用其他的JavaScript引擎，并且實(shí)現(xiàn)了線程間的互相操作，JavaScript可以在JS thread中直接與native端通信。以后不再需要將data序列化為JSON，同時(shí)避免了bridge的堵塞以及異步問題。

JSI的另一個(gè)巨大優(yōu)勢(shì)是，它是由C++編寫的，借助C++，React Native可以在大量的系統(tǒng)中運(yùn)行，如智能電視、智能手表等。

2.Fabric

Fabric是渲染系統(tǒng)，它會(huì)取代當(dāng)前的UI Manager。

為了理解Fabric的優(yōu)勢(shì)，我們先看看當(dāng)前React Native是如何渲染UI的：

app運(yùn)行時(shí)，React執(zhí)行代碼，在JavaScript中創(chuàng)建ReactElementTree，Renderer會(huì)基于它在C++中創(chuàng)建ReactShadowTree。

布局引擎根據(jù)虛擬樹計(jì)算UI元素在屏幕上的位置，計(jì)算完成后，虛擬樹會(huì)被轉(zhuǎn)換成由Native Elements組成的HostViewTree。*(例如：ReactNative中的元素在Android和iOS中會(huì)分別轉(zhuǎn)換為ViewGroup和UIView)*

fabric

ReactElementTree (JavaScript) -> ReactShadowTree(C++) -> HostViewTree(Native)

這種方式的問題：

正如我們所知，線程間的通信都通過bridge來(lái)實(shí)現(xiàn)，這意味著緩慢的傳輸速率以及非必要的數(shù)據(jù)復(fù)制。

例如：ReactElementTree中的節(jié)點(diǎn)，在ReactShadowTree中也是image，但是兩份數(shù)據(jù)必須在兩個(gè)節(jié)點(diǎn)中都復(fù)制一份。

并且，由于JS和UI的線程不是同步的，在某些情況下甚至?xí)驗(yàn)閬G幀導(dǎo)致app卡頓。(例如：滾動(dòng)一個(gè)包含大量數(shù)據(jù)的FlatList)

Fabric是什么？

根據(jù)ReactNative的官方文檔[3]，

"Fabric is React Native’s new rendering system, a conceptual evolution of the legacy render system"（Fabric是ReactNative新的渲染系統(tǒng)，它的概念從傳統(tǒng)渲染系統(tǒng)進(jìn)化而來(lái)）

正如我們?cè)诒疚闹蠮SI部分所看到的，JSI將native方法直接暴露給JavaScript，這也包括了UI方法，由此使得JS和UI線程能夠同步，這會(huì)提高列表，導(dǎo)航，手勢(shì)處理等的性能。

Fabric會(huì)帶來(lái)什么好處?

在新的渲染系統(tǒng)中，滾動(dòng)，用戶手勢(shì)等用戶交互可以優(yōu)先在主線程或native線程中同步執(zhí)行，而其他任務(wù)，比如接口請(qǐng)求等會(huì)異步執(zhí)行。

并且，新的Shadow Tree是不可變的，JS和UI線程中共享該tree，以允許來(lái)自兩端的直接交互。

在當(dāng)前的架構(gòu)中，React Native 必須維護(hù)兩個(gè)層次結(jié)構(gòu)/DOM 節(jié)點(diǎn)。而新架構(gòu)中，只需維護(hù)shadow tree，并且是線程間共享的，這也將有助于減少內(nèi)存消耗。

3.Turbo Modules

在當(dāng)前的架構(gòu)中，所有JavaScript使用的的原生模塊(如藍(lán)牙，地理位置，文件存儲(chǔ)等)必須在app打開前初始化。這意味著即使用戶不需要某個(gè)模塊，它還是會(huì)在啟動(dòng)時(shí)被初始化。

Turbo Modules基本上是對(duì)老的Native Modules的增強(qiáng)。我們?cè)谏衔目吹降模F(xiàn)在JavaScript可以保留這些模塊的引用，這可以讓我們的JS按需加載模塊，大大提高ReactNative app的啟動(dòng)速度。

4.CodeGen

Fabric和Turbo Modules聽起來(lái)很有前途，但是JavaScript是一門動(dòng)態(tài)語(yǔ)言，而JSI是用C++寫的，C++是一門靜態(tài)語(yǔ)言，因此需要保證兩者間的順利通信。

這就是新架構(gòu)還包括一個(gè)名為CodeGen的靜態(tài)類型檢查器的原因。

CodeGen使用類型確定后的JavaScript來(lái)為Turbo Modules和Fabric定義供他們使用的接口元素，并且它會(huì)在構(gòu)建時(shí)生成更多的native代碼，而非運(yùn)行時(shí)。

總結(jié)

將所有的變化結(jié)合起來(lái)，新架構(gòu)如圖所示：

new

主要亮點(diǎn)為：

• Bridge會(huì)被JSI取代
• 可以用其他引擎替代JavaScriptCore
•  所有線程間可以完全互相操作
• Web式的渲染系統(tǒng)
• 對(duì)時(shí)間敏感的任務(wù)可以同步執(zhí)行
• Turbo Modules實(shí)現(xiàn)模塊懶加載
• JS端和Native端的靜態(tài)類型檢查

我們可以確信，新架構(gòu)會(huì)給React Native帶來(lái)強(qiáng)大的提升。