React Native迎來重大架構升級，性能將大幅提升

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"7 月 14 日，React Native 核心團隊的 Joshua Gross 在 Twitter 說，RN 的新架構已經在 Facebook 內部落地了，並且99%的代碼已經開源。這次的架構升級“蓄謀已久”，Joshua 說他們從 2018 年 1 月就開始規劃了。"}]},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/8f\/f0\/8f07893f9b50593e15b33759d63585f0.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Facebook 曾在 2018 年 6 月宣佈了大規模 重構 RN 的計劃和路線圖，整個的重構目的是爲了讓 RN 更輕量化、更適應混合開發，接近甚至達到原生的體驗。具體包括以下幾個方面："}]},{"type":"numberedlist","attrs":{"start":null,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"改變線程模型。UI 更新不再同時需要在三個不同的線程上觸發執行，而是可以在任意線程上同步調用 JavaScript 進行優先更新，同時將低優先級工作推出主線程，以便保持對 UI 的響應。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"引入異步渲染能力，允許多個渲染並簡化異步數據處理。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"簡化 JSBridge，讓它更快更輕量。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這次的架構升級對於 React Native 意義重大，按照官方的說法，這將大幅度提升 RN 的性能。自 RN 發佈以來，它大致經歷瞭如下幾次的版本迭代（圖片來自京東熊文源 GMTC PPT），這一次主要是解決詬病已久的性能問題。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/3a\/8e\/3a72169afdee975aaeef3583d9d15e8e.png","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲了進一步瞭解 RN 這次架構迭代的細節，InfoQ 記者採訪了 58 同城資深前端工程師，58RN、Hybrid 框架的負責人蔣宏偉。以下爲具體內容。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"**InfoQ：能給大家介紹下你理解的這次架構升級嗎？新的 Fabric 渲染引擎是不是會大幅度提升 RN 的性能？**"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"**蔣宏偉**：首先說明對下，Fabric 不是渲染引擎，是新架構 UI 渲染部分的代號。React Native 新架構包括三個關鍵部分：JSI 、TurboModules 和 Fabric。JSI 全稱是 JavaScript Interface，代替的是原來的 Bridge。通過 JS 調用 C++，C ++ 調用 Java\/OC 的方式，實現了 JS 和 Java\/OC 之間的相互操作的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"TurboModules 是新架構 API 部分的代號。得益於 JSI，JavaScript 可以直接調用 Native 模塊的方法。類似於在瀏覽器中，JavaScript 調用獲取經緯度方法，實際調用的是 C++ 底層的獲取方法。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Fabric 是新架構 UI 渲染部分的代號。得益於 JSI，JavaScript 可以直接操作 Native 的組件，渲染 UI。類似於，在瀏覽器中，JS 調用 createElement 創建 div 元素，並通過 C++ 底層渲染 UI。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"根據現有的性能報告來看，新架構的性能大概提升了一個數量級"},{"type":"text","text":"。這裏的性能指的是 API、UI 的操作性能，對首屏性能的影響還有待進一步評估。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"**InfoQ：新的架構代碼全量放到 GitHub 了嗎？你們團隊計劃升級嗎？**"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"**蔣宏偉**：Facebook 內部落地的新架構代碼並未完全放到 GitHub。目前，JSI 和 TurboModules 部分已經可以使用，Fabric 部分還要等上一段時間。此外，在新架構的生態方面，比如導航、動畫等，估計會有很多變化。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們今年是有升級計劃的，也非常期望能夠快點用上 RN 新架構。根據我們以往的升級經驗，最需要關心的是新、舊版本兼容性問題。我們內部有 9 個 App，300+ 的項目需要遷移，既需要自動化遷移工具，也需要業務開發和測試同學的配合，還需要一套逐步擴量的方案。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"**InfoQ**：大家經常會拿 RN 和 Flutter 做對比，2019 年 GMTC 上，京東架構師熊文源說，在啓動性能上，RN 稍微優於 Flutter，但渲染方面明顯不如 Flutter，這是 RN 整個框架的瓶頸。這次升級過後，你會怎麼評價兩個框架呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"**蔣宏偉**：這次升級過後，RN 在性能上能夠追平 Flutter。首先，JavaScript 和 Dart 語言上都支持了 AOP 預編譯，打個平手。其次，JavaScript 和 Dart 和底層交互都是通過 C++ 進行的，也是打個平手。最後，RN 原生組件繪製有平臺的優化加成， 相對於 Flutter 自繪引擎繪製，可能還會好上一些。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其他方面，蘿蔔青菜各有所愛，"},{"type":"text","marks":[{"type":"strong"}],"text":"前端同學會更喜歡 RN 一些，客戶端同學更喜歡 Flutter 一些"},{"type":"text","text":"。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"**InfoQ：你們有調研過 Flutter 嗎？**"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"**蔣宏偉**：我們內部其實有很多 App 在用 Flutter，也開源了 Flutter Fair UI& 模板動態化框架，和 Magpie 開發的工具流。但 58 同城、安居客這種超級 App 沒有用 Flutter，主要擔心的還是包體積大小和啓動內存。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"**InfoQ：從你視角看，決定跨端框架發展的關鍵因素是什麼？跨端和原生的解決方案之間，未來會是一種怎麼樣的動態平衡？**"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"**蔣宏偉**：跨端框架發展的關鍵因素是淨收益的大小。從框架開發者的角度講，"},{"type":"text","marks":[{"type":"strong"}],"text":"Facebook 內部有 1000+ RN 頁面，跨平臺帶來的淨收益肯定很不錯"},{"type":"text","text":"。Flutter 我有些不確定，這決定於 Google 的 Fuchsia 操作系統能否成功。從框架開發者的角度講，生態起不來的，比如 Weex、NativeScript，開發成本太高，淨收益可能爲負的，這也會反過來制約框架的發展。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"有原生就有跨端，二者會一直並存，但跨端方案的市場份額會變的更大。原生解決方案更多是在一些創新的、基礎的場景中，比如短視頻、VR 或者跨端基礎設施。跨端解決方案，比如 Hybrid、小程序、RN、Flutter 等等，會更加成熟，使用的場景也會越多。又因爲能夠節約開發成本，在現有的場景中會被更多的使用。"}]},{"type":"horizontalrule"},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"京東架構師熊文源曾經在GMTC詳細分享過RN的新架構，如果你想看他的Slides的話，可以在視頻號給我私信，我單獨發你。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.infoq.cn\/resource\/image\/e9\/5d\/e992926d35ebb7014d2cbd23f77d885d.jpg","alt":null,"title":"","style":[{"key":"width","value":"50%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}