跳到主要內容

Fabric

Fabric 是 React Native 的全新渲染系統，是舊有渲染系統的概念進化。其核心原則是將更多渲染邏輯統一在 C++ 中，提高與 宿主平台 的互操作性，並為 React Native 解鎖新功能。開發始於 2018 年，並於 2021 年，Facebook 應用程式中的 React Native 由新的渲染器支援。

本文件概述了新渲染器及其概念。它避免了平台細節，並且不包含任何程式碼片段或指標。本文件涵蓋了關鍵概念、動機、優點以及不同情境下渲染管線的概述。

新渲染器的動機與優點​

建立渲染架構是為了釋放舊有架構無法實現的更佳使用者體驗。 一些範例包括

  • 透過改進 宿主視圖 和 React 視圖之間的互操作性，渲染器能夠同步測量和渲染 React 介面。在舊有架構中，React Native 佈局是非同步的，這導致在 宿主視圖 中嵌入 React Native 渲染視圖時出現佈局「跳躍」問題。
  • 憑藉對多優先順序和同步事件的支援，渲染器可以優先處理某些使用者互動，以確保及時處理這些互動。
  • 與 React Suspense 整合，這允許在 React 應用程式中更直覺地設計資料擷取。
  • 在 React Native 上啟用 React 並行功能。
  • 更輕鬆地為 React Native 實作伺服器端渲染。

新架構還在程式碼品質、效能和可擴充性方面提供了優勢

  • 類型安全： 程式碼產生可確保 JS 和 宿主平台 之間的類型安全。程式碼產生使用 JavaScript 組件宣告作為事實來源，以產生 C++ 結構來保存 props。JavaScript 和宿主組件 props 之間的不匹配會觸發建置錯誤。
  • 共用 C++ 核心：渲染器在 C++ 中實作，並且核心在平台之間共用。這提高了相容性，並使在新平台上採用 React Native 更加容易。
  • 更佳的宿主平台互操作性：同步且執行緒安全的佈局計算改善了將宿主組件嵌入到 React Native 中的使用者體驗，這表示更容易與需要同步 API 的宿主平台框架整合。
  • 效能提升：透過新渲染器系統的跨平台實作，每個平台都受益於效能改進，這些效能改進可能是由一個平台的限制所推動的。例如，視圖扁平化最初是 Android 的效能解決方案，現在在 Android 和 iOS 上預設提供。
  • 一致性：新的渲染系統是跨平台的，因此更容易在不同平台之間保持一致性。
  • 更快的啟動速度：宿主組件預設為延遲初始化。
  • 減少 JS 和宿主平台之間資料的序列化：React 過去常常在 JavaScript 和 宿主平台 之間以序列化的 JSON 傳輸資料。新的渲染器透過使用 JavaScript 介面 (JSI) 直接存取 JavaScript 值，從而改進了資料傳輸。