首頁 > web前端 > js教程 > 主體

React Native 新架構

Patricia Arquette
發布: 2024-11-12 06:36:01
原創
957 人瀏覽過

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

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

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

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

?舊建築回顧

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

React Native New Architecture

b.有 3 個主題:

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

React Native New Architecture

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

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

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

React Native New Architecture

?舊架構的問題

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

React Native New Architecture

  1. 效能問題

  2. 乾澀或空白影格

  3. 節點的重複

✨ 新架構的目標

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

  1. 快速啟動?

  2. 並發渲染? ️

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

  4. 支援多個平台?

  5. 減少崩潰?

  6. 更好的記憶體管理?

  7. 同步執行?

?新架構

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

React Native New Architecture

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

React Native New Architecture

B.支援多平台(只要平台使用React Native)


?新架構的組成部分:

React Native New Architecture

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 New Architecture

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

因為Codegen JSI(JavaScript Interface)直接與Turbo模組通信,所以無需任何橋樑。

4。新渲染器

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

React Native New Architecture

  1. 效能問題

  2. 空白影格(缺 60FPS)

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

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

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

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

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

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

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

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


?端對端架構

React Native New Architecture

?概括

  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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板