跳到主要內容

State of React Native 2018

·5 分鐘閱讀
Sophie Alpert
Facebook React 工程經理

距離我們上次發佈關於 React Native 的狀態更新已有一段時間。

在 Facebook,我們比以往任何時候都更常使用 React Native,並將其用於許多重要專案。我們最受歡迎的產品之一是 Marketplace,它是我們應用程式中的頂級標籤之一,每月有 8 億人使用。自 2015 年創建以來,Marketplace 的所有功能都是使用 React Native 建置的,包括應用程式不同部分的一百多個全螢幕檢視。

我們也將 React Native 用於應用程式的許多新部分。如果您上個月觀看了 F8 主題演講,您會認出「血液捐贈」、「危機應對」、「隱私捷徑」和「健康檢查」——所有這些都是最近使用 React Native 建置的功能。Facebook 主要應用程式以外的專案也在使用 React Native。全新的 Oculus Go VR 頭戴裝置包含配套行動應用程式,該應用程式完全使用 React Native 建置,更不用說 React VR 為頭戴裝置本身的許多體驗提供支援。

當然,我們也使用許多其他技術來建置我們的應用程式。LithoComponentKit 是我們在應用程式中廣泛使用的兩個程式庫;兩者都提供類似 React 的組件 API,用於建置原生螢幕。React Native 從未打算取代所有其他技術——我們專注於讓 React Native 本身變得更好,但我們很高興看到其他團隊借鑒 React Native 的想法,例如將 即時重新載入 帶到非 JavaScript 程式碼。

架構

當我們在 2013 年啟動 React Native 專案時,我們將其設計為在 JavaScript 和原生之間具有單一「橋樑」,該橋樑是非同步、可序列化且批次處理的。正如 React DOM 將 React 狀態更新轉換為對 DOM API(例如 document.createElement(attrs).appendChild())的命令式、變異調用一樣,React Native 的設計目的是傳回單一 JSON 訊息,其中列出要執行的變異,例如 [["createView", attrs], ["manageChildren", ...]]。我們將整個系統設計為永遠不依賴於取得同步回應,並確保該清單中的所有內容都可以完全序列化為 JSON 並返回。我們這樣做是為了它給予我們的彈性:在這個架構之上,我們能夠建置諸如 Chrome 偵錯 之類的工具,這些工具透過 WebSocket 連線非同步執行所有 JavaScript 程式碼。

在過去 5 年中,我們發現這些初始原則使得建置某些功能變得更加困難。非同步橋樑意味著您無法將 JavaScript 邏輯與許多期望同步回應的原生 API 直接整合。批次處理橋樑會將原生調用排隊,這意味著讓 React Native 應用程式調用以原生方式實作的函數變得更加困難。可序列化橋樑意味著不必要的複製,而不是在兩個世界之間直接共享記憶體。對於完全在 React Native 中建置的應用程式,這些限制通常是可以忍受的。但對於 React Native 和現有應用程式程式碼之間具有複雜整合的應用程式,它們令人沮喪。

我們正在對 React Native 進行大規模的重新架構,以使框架更具彈性,並在混合 JavaScript/原生應用程式中更好地與原生基礎架構整合。 透過這個專案,我們將應用我們在過去 5 年中學到的知識,並逐步將我們的架構轉變為更現代化的架構。我們正在重寫 React Native 的許多內部組件,但大多數變更都在幕後:現有的 React Native 應用程式將繼續運作,幾乎沒有或沒有變更。

為了使 React Native 更輕量級並更好地適應現有的原生應用程式,這種重新架構有三個主要的內部變更。首先,我們正在變更執行緒模型。UI 的每次更新不再需要在三個不同的執行緒上執行工作,而是可以在任何執行緒上同步調用 JavaScript 以進行高優先順序的更新,同時仍將低優先順序的工作放在主執行緒之外以保持回應能力。其次,我們正在將 非同步渲染 功能整合到 React Native 中,以允許多個渲染優先順序並簡化非同步資料處理。最後,我們正在簡化我們的橋樑,使其更快、更輕量級;原生和 JavaScript 之間的直接調用更有效率,並且將更容易建置諸如跨語言堆疊追蹤之類的偵錯工具。

一旦這些變更完成,更緊密的整合將成為可能。如今,如果不進行複雜的駭客攻擊,就無法整合原生導覽和手勢處理或原生組件(例如 UICollectionView 和 RecyclerView)。在我們變更執行緒模型之後,建置此類功能將變得簡單明瞭。

隨著這項工作接近完成,我們將在今年稍後發佈關於此工作的更多詳細資訊。

社群

除了 Facebook 內部的社群之外,我們很高興在 Facebook 外部擁有蓬勃發展的 React Native 使用者和協作者群體。我們希望更多地支援 React Native 社群,既能更好地為 React Native 使用者服務,又能使專案更易於貢獻。

正如我們的架構變更將幫助 React Native 更乾淨地與其他原生基礎架構互操作一樣,React Native 在 JavaScript 方面應該更精簡,以便更好地適應 JavaScript 生態系統,其中包括使 VM 和捆綁器可交換。我們知道,重大變更的步伐可能難以跟上,因此我們希望找到減少主要版本發佈的方法。最後,我們知道有些團隊正在尋找更全面的文件,例如啟動最佳化等主題,而我們在這方面的專業知識尚未寫下來。預計在未來一年中會看到其中一些變更。

如果您正在使用 React Native,您就是我們社群的一份子;請繼續告訴我們如何讓 React Native 對您來說變得更好。

React Native 只是行動開發人員工具箱中的一種工具,但它是我們堅信的一種工具——而且我們每天都在使其變得更好,在過去一年中,有來自 500 多位貢獻者的 2500 多次提交。