React Native 宣布發布 0.76 版本。透過此更新,新架構現在將預設為啟用。在版本 0.76 之前,啟用新架構的唯一方法是選擇加入。
本部落格將重點放在新架構中的新增內容。
新的 React Native 架構已經成為頭條新聞一年多了,而且有充分的理由。這種新架構也稱為「無橋」。為什麼叫無橋?我們將在部落格中探討這一點。 ”
在探索新架構之前,讓我們先快速回顧一下之前的架構。
a.有兩個領域-JavaScript 和 Native。
b.有 3 個主題:
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。新的本機模組
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 本機和影子/後台執行緒。在舊架構中,問題是我們的主執行緒被阻塞,這導致:
效能問題
空白影格(缺 60FPS)
此外,舊架構必須維護節點和 DOM 的 2 個副本。這會導致記憶體問題
無法中斷低優先級任務來優先處理緊急更新。
在 Fabric 中這些問題都得到了解決。現在,使用新的渲染器,我們可以使用轉換來中斷緊急的低優先級任務。 這將使應用程式回應良好,並且主/UI 本機執行緒不會解鎖。事件將異步執行。 使用新的渲染器系統,將有一個不可變的視圖層次結構樹。
不可變意味著它不會改變。不可變的好處:
這允許線程安全的更新處理。
這也意味著將會有多個正在進行的樹,每個樹代表不同版本的使用者介面。
由於不同版本的UI 有多個樹,*更新可以在後台渲染,而不會阻塞UI *(例如在轉換期間)或在主執行緒上(作為回應)使用者輸入)
新的渲染器還可以同步讀取佈局資訊並跨不同執行緒。這可以在需要時啟用低優先權更新和同步讀取的後台計算。
新架構從 0.76 開始預設可用
引進了新架構:JavaScript 介面(JSI)、新原生模組(Turbo 模組)、codegen、新渲染器系統(布料)
JSI 是 JavaScript 介面它基於 C,使 JavaScript 和 Native 模組可以直接通信,無需任何 Bridge
新的原生模組是改良的目前原生模組。用 C 編寫,具有許多好處:與 JavaScript 和本機進行同步通信,無需橋接,延遲載入。
Codegen 產生 JavaScript 和 C 相互通訊的型別介面。
新渲染器(Fabric) 是用 C 寫的新渲染器系統。這可以透過啟用多執行緒並中斷低優先級任務來實現更好的效能。
新的事件循環讓React Native更接近DOM
好好閱讀 GitHub 問題
快樂學習! !
以上是React Native 新架構的詳細內容。更多資訊請關注PHP中文網其他相關文章!