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

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

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

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

📱 舊建築回顧

一個。有兩個領域——JavaScript 和 Native。

b.有3個線程：

• JavaScript執行緒（JavaScript） ：負責JavaScript捆綁程式碼。

• Main, UI Native Thread ：負責本機模組。

• 陰影，或背景 Thread (Yoga) ：負責佈局。

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. 新的原生模組

新的本機模組是新的和改進的本機模組。這是用 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 中這些問題都得到了解決。現在，使用新的渲染器，我們可以使用transition來中斷低優先順序的緊急任務。這將使應用程式具有響應能力並且主/UI 本機線程不會解鎖。事件將異步執行。使用新的渲染器系統，將有一個不可變的視圖層次結構樹。

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

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

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

3. 由於不同版本的 UI 有多個樹，**更新可以在背景呈現，而不會阻塞 UI **（例如在轉換期間）或在主執行緒上（響應用戶輸入）

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

🎯 端對端架構

🎉總結

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

2. 引入了新的架構： JavaScript 介面 (JSI) 、新的本機模組 (Turbo Modules) 、 codegen 、新的渲染器系統 (fabric)

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

4. 新的本機模組是改進的當前本機模組。用 C++ 編寫，具有許多優點：與 JavaScript 和本機進行同步通信，無需橋接，延遲載入。

5. Codegen為 JavaScript 和 C++ 產生類型介面以相互通訊。

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

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

8. 很好讀GitHub 問題

快樂學習！

原文出處：https://dev.to/hellonehha/react-native-new-architecture-1hao