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 和本機層之間的通訊依賴於橋，這是舊架構的主要限制。
-
效能問題
-
幀不穩定或空
-
節點的重複
✨ 新架構的目標
新架構的重點是解決前一個架構的挑戰。其目標是：
-
啟動速度快🥳
-
並發渲染🎟️
-
響應式應用程式🧑💻
-
多平台支援🎮
-
減少崩潰🧨
-
更好的記憶體管理💃
-
同步執行🎢
🆕 新架構
新架構是用 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 本機和影子/後台執行緒。在舊架構中，問題是我們的主執行緒經常被阻塞，這會導致：
-
效能問題
-
空幀（缺 60FPS）
-
另外，舊架構必須維護節點和 DOM 的 2 個副本。這會導致記憶體問題
-
無法中斷低優先級任務來優先處理緊急更新。
在 Fabric 中這些問題都得到了解決。現在，使用新的渲染器，我們可以使用transition來中斷低優先順序的緊急任務。這將使應用程式具有響應能力並且主/UI 本機線程不會解鎖。事件將異步執行。使用新的渲染器系統，將有一個不可變的視圖層次結構樹。
不可變意味著它不會改變。不可變的好處：
-
這允許線程安全的更新處理。
-
這也意味著將有多個正在進行的樹，每個樹代表不同版本的使用者介面。
-
由於不同版本的 UI 有多個樹，**更新可以在背景呈現，而不會阻塞 UI **（例如在轉換期間）或在主執行緒上（響應用戶輸入）
-
新的渲染器還可以跨不同執行緒同步讀取佈局資訊。這使得可以在需要時進行低優先權更新和同步讀取的後台計算。
🎯 端對端架構
🎉總結
-
新架構從 0.76 開始預設可用
-
引入了新的架構： JavaScript 介面 (JSI) 、新的本機模組 (Turbo Modules) 、 codegen 、新的渲染器系統 (fabric)
-
JSI是JavaScript Interface，它基於C++，使JavaScript和Native模組可以直接通信，無需任何Bridge
-
新的本機模組是改進的當前本機模組。用 C++ 編寫，具有許多優點：與 JavaScript 和本機進行同步通信，無需橋接，延遲載入。
-
Codegen為 JavaScript 和 C++ 產生類型介面以相互通訊。
-
新渲染器（Fabric）是用 C++ 寫的新渲染器系統。這透過啟用多執行緒和中斷低優先權任務來實現更好的效能。
-
新的事件循環使 React Native 更接近 DOM
-
很好讀GitHub 問題
快樂學習！
原文出處：https://dev.to/hellonehha/react-native-new-architecture-1hao
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式