React Native 新架構

React Native 宣布發布 0.76 版本。透過此更新，新架構現在將預設為啟用。在版本 0.76 之前，啟用新架構的唯一方法是選擇加入。

本部落格將重點放在新架構中的新增內容。

新的 React Native 架構已經成為頭條新聞一年多了，而且有充分的理由。這種新架構也稱為「無橋」。為什麼叫無橋？我們將在部落格中探討這一點。 ”

在探索新架構之前，讓我們先快速回顧一下之前的架構。

？舊建築回顧

a.有兩個領域－JavaScript 和 Native。

b.有 3 個主題：

• JavaScript Thread (JavaScript)：負責 JavaScript 捆綁程式碼。
• 主，UI 本機執行緒：負責本機模組。
• 陰影，或背景線程（瑜珈）：負責佈置。

c. JavaScript 和 Native 程式碼相互溝通的唯一方式是透過 Bridge。

d.任何本機元件（例如 Button 或 Alert）都會在 JavaScript 層中序列化為 JSON，並透過橋接送到本機執行緒。在本機執行緒中，此 JSON 隨後會轉換為本機（iOS 或 Android）元件。

e.在本機執行緒中，當本機元件上發生事件時，它會透過橋將事件以 JSON 形式傳送到 JavaScript 執行緒。這種通訊是異步的，使橋能夠促進 JavaScript 和本機元件之間的互動。

？舊架構的問題

JavaScript 和本機層之間的通訊依賴於橋，這是舊架構的主要限制。

1. 效能問題

2. 乾澀或空白影格

3. 節點的重複

✨ 新架構的目標

新架構專注於解決前一個架構的挑戰。其目標是：

1. 快速啟動？

2. 並發渲染？ ️

3. 響應式應用程式 ?‍?

4. 支援多個平台？

5. 減少崩潰？

6. 更好的記憶體管理？

7. 同步執行？

？新架構

新架構是用 C 重寫的，它帶來了兩個重大改進：

A. JavaScript 與本機層之間無需橋樑即可直接通訊。這就是為什麼新架構通常被稱為“無橋”。

B.支援多平台（只要平台使用React Native）

---

？新架構的組成部分：

1。 JavaScript 介面 (JSI)

JSI是JavaScript Interface，這是用C寫的層。任何 JS 引擎都可以與此一起使用，這可以實現跨平台支援 - 不僅在 IOS、Android 上，還可以在智慧電視、智慧手錶等上。

JSI 使 JavaScript 能夠保存對本機模組的參考。這些使得 JavaScript 能夠直接與本機模組通信，並且這使得 JavaScript 和本機線程之間能夠同步通信

PS：你的 React Native 程式碼透過 Metro 進行捆綁並進入 JSI。

2。新的本機模組

New Native Modules 是新的和改進的本機模組。這是用 C 編寫的，它可以實現從 JS/TS api 到 Native 的同步存取。這意味著Native 和 JavaScript 執行緒之間將直接通信，而不需要橋接。 C 還可以編寫您自己的本機模組以進行跨平台共用。

新的本機模組可處理事件、讀取版面配置、排程非同步和同步更新。

正如我們之前所了解的，JSI 保留 TurboModule 中物件的引用，這將允許 JavaScript 程式碼僅在需要時載入每個模組（動態載入模組）。與舊架構相比，這縮短了應用程式的啟動時間。

3。程式碼產生

Codegen 是一個創建強型別合約的工具。這些合約有助於開發人員節省時間，並使跨程式語言之間的通訊更容易。

在 React Native 中，JavaScript 和 Typescript 不是強型別語言，但 C 是強型別語言。為了在 JavaScript 和 C 之間進行通信，codegen 產生介面（類型）。這發生在建置時，以便在運行時快速執行。

因為Codegen JSI（JavaScript Interface）直接與Turbo模組通信，所以無需任何橋樑。

4。新渲染器

新渲染器被稱為 Fabric。這也是用 C 寫的。
還記得 React Native 中有 3 個執行緒嗎？ - JavaScript、主/UI 本機和影子/後台執行緒。在舊架構中，問題是我們的主執行緒被阻塞，這導致：

1. 效能問題

2. 空白影格（缺 60FPS）

3. 此外，舊架構必須維護節點和 DOM 的 2 個副本。這會導致記憶體問題

4. 無法中斷低優先級任務來優先處理緊急更新。

在 Fabric 中這些問題都得到了解決。現在，使用新的渲染器，我們可以使用轉換來中斷緊急的低優先級任務。 這將使應用程式回應良好，並且主/UI 本機執行緒不會解鎖。事件將異步執行。 使用新的渲染器系統，將有一個不可變的視圖層次結構樹。

不可變意味著它不會改變。不可變的好處：

1. 這允許線程安全的更新處理。

2. 這也意味著將會有多個正在進行的樹，每個樹代表不同版本的使用者介面。

3. 由於不同版本的UI 有多個樹，*更新可以在後台渲染，而不會阻塞UI *（例如在轉換期間）或在主執行緒上（作為回應）使用者輸入）

4. 新的渲染器還可以同步讀取佈局資訊並跨不同執行緒。這可以在需要時啟用低優先權更新和同步讀取的後台計算。

---

？端對端架構

？概括

1. 新架構從 0.76 開始預設可用

2. 引進了新架構：JavaScript 介面(JSI)、新原生模組（Turbo 模組）、codegen、新渲染器系統（布料）

3. JSI 是 JavaScript 介面它基於 C，使 JavaScript 和 Native 模組可以直接通信，無需任何 Bridge

4. 新的原生模組是改良的目前原生模組。用 C 編寫，具有許多好處：與 JavaScript 和本機進行同步通信，無需橋接，延遲載入。

5. Codegen 產生 JavaScript 和 C 相互通訊的型別介面。

6. 新渲染器（Fabric） 是用 C 寫的新渲染器系統。這可以透過啟用多執行緒並中斷低優先級任務來實現更好的效能。

7. 新的事件循環讓React Native更接近DOM

8. 好好閱讀 GitHub 問題

快樂學習！ ！

以上是React Native 新架構的詳細內容。更多資訊請關注PHP中文網其他相關文章！