FB大規模重構React Native，Airbnb宣布回歸原生，前端巨變來臨？

編輯｜小智

Facebook 大規模重構 React Native；Airbnb 宣布放棄使用 React Native，回歸使用原生技術；谷歌發布了 Flutter Release Preview 1。這是前端圈子裡你不應忽視的新變化。

Facebook 正在大規模重構 React Native

幾日前，Facebook 剛剛發布了 React Native 0.56，隨後，React 工程經理 Sophie Alpert 在其官方博客上宣布他們將要重構 React Native，使其更輕量，更適應 JavaScript 生態圈的發展。

React Native 的應用現狀

Sophie Alpert 說，在 Facebook 內部，他們比以往任何時候都重視 React Native，它已經被用於 Facebook 許多重要的項目上。包括他們最受歡迎的產品之一 Marketplace，每月有 8 億人使用。

React Native 也開始被應用在應用程序的其他地方，如果讀者上個月觀看了 F8 主題演講，就會發現 Blood Donations、Crisis Response、Privacy Shortcuts 和 Wellness Checks 的所有新功能都是使用 React Native 構建的。

Facebook 主應用以外的項目也在使用 React Native。新的 Oculus Go VR 頭戴式設備對應的移動應用程序就完全使用 React Native 構建。

Sophie Alpert 表示，React Native 的目標從來都不是替代其他技術，他們專註於 React Native 自身，努力使之變得更好，但他們希望看到其他團隊從 React Native 中得到一些想法或靈感，例如將即時重新載入技術運用到非 JavaScript 代碼中。

架構

React Native 項目的設計初衷是成為 JavaScript 和原生應用之間的橋樑。React DOM 將 React 的狀態更新變成了命令式、可變的 DOM API 調用，如 document.createElement(attrs) 和.appendChild()，而 React Native 則返回一個單獨的 JSON 消息，它列出了要執行的一些操作，如 [["createView", attrs], ["manageChildren", ...]]。

他們將整個系統設計為永不依賴獲取同步響應，並確保列表中所有的內容都可以完全序列化為 JSON，並可以反序列化回來。

這樣做是為了提高靈活性：在這個架構之上，可以構建像 Chrome 調試器之類的工具，這些工具可以通過 WebSocket 連接非同步運行所有的 JavaScript 代碼。

在過去的 5 年裡，他們發現最初的設計原則加大了某些特性的開發難度。非同步橋接（asynchronous bridge）意味著不能直接將 JavaScript 邏輯與很多原生 API 集成在一起，因為這些原生 API 是同步的。

批量橋接（本地調用隊列）意味著 React Native 應用程序調用本地函數會更加困難。而且串列化的橋接意味著不必要的複製，因為它不是直接在兩個世界之間共享內存。對於完全使用 React Native 構建的應用程序，這些限制通常是可承受的。但對於在 React Native 與現有應用程序代碼之間進行複雜集成的應用程序，就很糟糕了。

因此，Facebook 正在對 React Native 進行大規模重構，讓框架變得更加靈活，並更好地與 JavaScript / 原生混合應用中的原生基礎設施集成。

通過這個項目，他們將應用在過去 5 年中學到的知識，逐步讓架構走向現代化。他們正在重構 React Native 內部，大部分工作都是在底層進行的，現有的 React Native 應用程序幾乎不需要做出更改。

為了使 React Native 更輕量化並能更好地適應現有的原生應用，此次重構主要從三個方面進行。

首先，改變線程模型。UI 更新不再需要在三個不同的線程上執行，可以在任意線程上同步調用 JavaScript 進行優先更新，同時將低優先順序工作推出主線程，以便保持對 UI 的響應。

其次，將非同步渲染功能引入 React Native 中，允許執行多個渲染並簡化非同步數據處理。

最後，簡化橋接，讓它更快、更輕量。原生和 JavaScript 之間的直接調用效率更高，並且可以更輕鬆地構建調試工具，如跨語言堆棧跟蹤。

完成以上工作之後，就有可能帶來更緊密的集成。現在，如果不通過複雜 hack 的手段就無法讓原生導航和手勢處理或原生組件（如 UICollectionView 和 RecyclerView）一起工作。在對線程模型做出更改之後，就可以直接構建這樣的功能。

Sophie Alpert 最後說，他們的目標是希望 React Native 在 JavaScript 端能夠更加輕量，以更好地適應 JavaScript 生態系統。等這個項目將要完工時，Facebook 會披露更多的細節，敬請期待。

Airbnb 放棄 RN，回歸原生

Airbnb 表示，儘管很多團隊都依賴 React Native 並計劃在可預見的將來使用它，但他們最終還是無法實現最初的目標。此外，還有一些他們無法克服的技術和組織挑戰，如果繼續使用 React Native，這些挑戰最終會變成更大的難題。因此，Airbnb 宣布放棄使用 React Native，並將所有的努力重新投入到基於原生技術開發 App。

Airbnb 放棄使用 React Native 的主要原因是 React Native 未能實現完全的跨平台抽象，有時候仍然需要針對特定平台單獨編寫代碼來解決問題。

更早以前，百度曾傳出內部停用 React Native，改用 Vue 或自研的 San 框架的新聞。

Google 發布 Flutter Release Preview 1

6 月 21 日，在北京 GMTC 大前端大會上，Google Flutter 高級工程師於瀟宣布 Flutter Release Preview 1 發布，並宣布與阿里巴巴閑魚團隊在 Flutter 上合作，這標誌著 Flutter 進入了一個新階段。

Flutter 一直在進步

在 Google I/O 大會上，Flutter 團隊與很多 Flutter 的開發者進行了溝通，並對 Flutter 進行了改進。在那之後，Flutter 生態得到了快速地增長，Flutter 的活躍用戶增長了 50%，不僅如此，在 I/O 大會之後的幾周內，在全世界範圍內，已有超過 150 個與 Flutter 相關的事件發生。

Flutter 團隊表示，Flutter 從 beta 版本到現在的 Release Preview 1，都體現了他們對穩定性和質量的信心和關注。

Flutter 預覽版從社區中得到了很多支持，來自外部的貢獻就包括 Flutter 對硬體鍵盤和條形碼掃描儀、視頻錄製、圖像的支持。此外，還有許多新軟體包對 Flutter 包站點的貢獻，例如 Flutter Platform Widgets，一組可自適應 iOS 或 Android 的小部件； mlkit，Firebase MLKit API 的包裝類（wrapper）； 序列動畫（Sequence Animation）。

在這個過程中，Flutter 團隊將重點轉向了場景的完整性（scenario completeness）。他們不斷改進視頻播放器套件，提供更廣泛的格式支持和提升可靠性。並進一步擴展了對 Firebase 的支持，如 Firebase Dynamic Links，這是一款用於創建和處理跨多個平台的鏈接的應用解決方案。目前已經擴大到對 ARMv7 晶元、32 位 iOS 設備的支持，這讓使用 Flutter 編寫的應用仍可以在全球流行的舊設備（如 iPad Mini 和 iPhone 5c）上運行。

Flutter 在中國

使用 Flutter 的中國開發者人數僅次於美國和印度，在中國，已經有許多大型公司採用 Flutter，阿里巴巴已經將他們基於 Flutter 的應用程序部署到數百萬的設備上，而騰訊正在推出基於 Flutter 的 NOW 應用程序。目前，中國版的 Flutter 網站已經上線，你可以訪問啦！

鏈接：https://flutter-io.cn/

你在用什麼前端框架？

今日薦文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！