React Native 新架構

譯者：xiaoxiaosaohuo

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

第一部分 React and Codegen

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

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

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

1. 你自己書寫的React 代碼

2. 從你書寫的代碼轉換之后的js

3. The Bridge ，

4. Native side

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

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

React

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

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

JSI and JSC

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

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

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

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

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

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

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

Fabric and TurboModules

這個簡化的舊架構的bridge 模塊

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

新架構將bridge分為兩部分

1. Fabric，新架構的UI manager,

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

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

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

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

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

Native Modules

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

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

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

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

完整的新架構圖如下

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

推薦閱讀

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

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

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

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