React Native 新架構(gòu)

譯者：xiaoxiaosaohuo

原文：https://github.com/xiaoxiaosaohuo/Note/issues/60

第一部分 React and Codegen

React Native是一個開源的跨平臺解決方案，可以讓你輕松地使用React（和JavaScript）來創(chuàng)建 native 移動應(yīng)用程序.

為了更好的理解 React Native 的工作原理，我們準(zhǔn)備了這個基本圖表

如圖所示，有四個核心部分：

1. 你自己書寫的React 代碼

2. 從你書寫的代碼轉(zhuǎn)換之后的js

3. The Bridge ，

4. Native side

當(dāng)前架構(gòu)的關(guān)鍵方面是兩個領(lǐng)域，JavaScript和Native，他們彼此并不真正直接通信，它們的通信依賴于跨Bridge傳輸?shù)漠惒絁SON消息。這些被發(fā)送到native的代碼，未來的某個時間會做出響應(yīng)。最近React Native 團(tuán)隊(duì)重新考慮了這種異步消息方法，他們正在為React Native開發(fā)一個新的架構(gòu)。

我們可以這樣描述他們的策略：針對React Native的四個核心部分中的每一部分并單獨(dú)改進(jìn)它們。

React

React Native團(tuán)隊(duì)主要利用其同事在核心React庫上所做的工作。意味著他們會采用React 16.6版本的新特性。在可預(yù)見的未來，會允許開發(fā)者使用Suspense來讓組件在render之前等待某些東西，使用Hooks,和其他一些React features 。

React Native團(tuán)隊(duì)也在代碼中加入了靜態(tài)類型檢查器（Flow或TypeScript），們正在開發(fā)一個名為CodeGen的工具來“自動化”的處理JS和native端之間的兼容性。通過類型化的JS,這個生成器可以定義Fabric和TurboModules(新架構(gòu)的元素)所需的接口文件，以便可以放心的在各個領(lǐng)域發(fā)送消息，這種自動化處理也會加速通信的速度，因?yàn)闆]有必要每次驗(yàn)證數(shù)據(jù)。

JSI and JSC

這部分介紹React Native如何使用你編寫的代碼以及新架構(gòu)如何更改它。

由于JavaScript的性質(zhì)，React Native團(tuán)隊(duì)必須依賴引擎來解釋它，以便它可以在native移動應(yīng)用程序中運(yùn)行,在當(dāng)前的架構(gòu)中，團(tuán)隊(duì)選擇直接使用JavaScriptCore（JSC）.

為了增強(qiáng)這一部分，他們決定適當(dāng)?shù)姆蛛x從編寫的代碼生成的bundle和壓縮的js,以及使用它的引擎。這是通過在兩者之間引入第三個元素（明確稱為JavaScript接口（JSI））來實(shí)現(xiàn)的。

JSI本身不是React Native的一部分，它是（理論上）任何JavaScript引擎的統(tǒng)一，輕量級，通用層。

首先，現(xiàn)在可以更輕松地將JSC更換為其他引擎（或更新版本的JSC，最近發(fā)生在RN 0.59中）。您可能知道的其他選項(xiàng)包括Microsoft的ChakraCore和Google的V8 。

第二 ， 可以說是整個新架構(gòu)的基石 - 是“通過使用JSI，JavaScript可以保存對C ++ host對象的引用并調(diào)用它們上的方法。”,這意味著JavaScript和Native的兩個領(lǐng)域?qū)⒄嬲庾R到彼此的存在，并且不需要將要傳遞的消息序列化為JSON，從而消除橋上的所有擁塞。

這是一個非常激動人心的變化，因?yàn)镃 ++一直是在不依賴JavaScript的情況下在Android和iOS之間共享代碼的少數(shù)方法之一;Android的native代碼是用C \ C ++編寫的（Java和Kotlin通過Java Native Interface“向下翻譯”，類似iOS默認(rèn)支持它（Objective-C是C的嚴(yán)格超集）。

Fabric and TurboModules

這個簡化的舊架構(gòu)的bridge 模塊

這組元素基本上負(fù)責(zé)兩種不同的行為：定義UI的外觀和行為方式（通過Shadow Tree）和管理Native 端（通過Native Modules），如上所述，這些通信是通過異步JSON消息進(jìn)行的，這些消息通過一個通信通道進(jìn)行批處理和來回發(fā)送，正如您所料，這可能會變得擁擠并導(dǎo)致次優(yōu)的體驗(yàn)。

新架構(gòu)將bridge分為兩部分

1. Fabric，新架構(gòu)的UI manager,

2. TurboModules，這個與native端交互的新一代實(shí)現(xiàn)

Fabric 主要關(guān)注UI層的渲染，在當(dāng)前的架構(gòu)中，所有UI操作都由一系列跨橋“步驟”處理（React - > Native - > Shadow Tree - > Native UI），在新的實(shí)現(xiàn)中，允許 UI manager 直接用C++創(chuàng)建Shadow Tree ，通過減少跨越領(lǐng)域的“跳躍”次數(shù)，極大地增加了這個過程的快速性。基本上，這極大地提高了用戶界面的響應(yīng)能力。

通過使用JSI,Fabric將UI操作作為函數(shù)公開給JavaScript，新的Shadow Tree（決定在屏幕上真正顯示的內(nèi)容）在兩個領(lǐng)域之間共享，允許兩端直接交互。

而且JavaScript端的直接控制允許從新的React中獲得UI操作的優(yōu)先級隊(duì)列，為了在有利于性能的情況下進(jìn)行選擇性同步執(zhí)行。這部分將允許改進(jìn)常見的陷阱，如列表，導(dǎo)航和手勢處理。

在當(dāng)前的實(shí)現(xiàn)中，當(dāng)應(yīng)用程序打開時，需要初始化JavaScript代碼（例如藍(lán)牙）使用的Native Modules，即使它們沒有被使用。
新的TurboModules方法允許JavaScript代碼僅在真正需要時加載每個模塊，并直接持有模塊的引用，意味著不再需要使用舊橋上的批處理JSON消息進(jìn)行通信，這將顯著的提升應(yīng)用的啟動時間。

Native Modules

React Native，在更概念的層面上，希望對其原生平臺“不可知”,這是支持創(chuàng)建第三方實(shí)現(xiàn)（如react-native-web和react-native-windows等）的關(guān)鍵功能.

此外，F(xiàn)acebook團(tuán)隊(duì)并不擁有iOS或Android平臺，因此最后一個塊的方法不能“縱向”深入了解這些行為的方式,但是在橫向上可以減少react-native codebase 的總體大小。

這項(xiàng)工作稱為‘“Lean Core” ’ 從高層次來看，這種方法想要實(shí)現(xiàn)的是將代碼置于主React Native代碼庫中并將其提取到自己的存儲庫中。

這主要有兩個好處，減少生成的應(yīng)用程序的重量，并允許對Facebook未直接使用的元素進(jìn)行適當(dāng)?shù)木S護(hù)，由于修改Facebook擁有的代碼的復(fù)雜性，后者在過去得到的關(guān)注較少。

完整的新架構(gòu)圖如下

正如您所看到的，F(xiàn)acebook團(tuán)隊(duì)的復(fù)雜工作影響了React Native工作方式的許多不同方面，而不會顯著影響使用它的開發(fā)人員。不是一個小壯舉。

推薦閱讀

我的公眾號能帶來什么價值？(文末有送書規(guī)則，一定要看)

每個前端工程師都應(yīng)該了解的圖片知識(長文建議收藏)

為什么現(xiàn)在面試總是面試造火箭？

在看轉(zhuǎn)發(fā)是對作者最大的鼓勵！???