React Native簡史

誕生

React Native 誕生於 2013 年的 Facebook 內部黑客馬拉松（hackathon）：

In the essence of Facebook’s hacker culture, React Native started as a hackathon project in the summer of 2013.

（摘自In the beginning: React Native’s roots）

從 React 提及

隨着 React 的大規模應用，Facebook 愈加感覺到 React 以及 Web 技術的優點，但願 Native 開發也能像 Web 同樣Move fast：

• 快速迭代（Rapid iteration cycle）：Web 一天兩版，產品迭代週期更短
• 快速反饋（Immediate testing feedback）：Web 發佈當即觸達用戶，A/B test 等實驗結果立等可取，產品演進更快
• 快速開發（Rapid development velocity）：刷新瀏覽器便可生效，沒必要等待從新編譯 App

爲了達成這個目的，Facebook 嘗試了 3 種方案：

• WebView：由 Native 提供 Webview 容器，業務用 Web 技術來開發。優點在於能把 Web 開發體驗一鍋端走，但受限於 Web 技術，體驗沒法與 Native 相提並論，最終因性能和擴展性沒有達到預期而做罷
• Porting React to native：把 React 移植到 Native 實現，一個瘋狂的想法。在 2015 年完成了 iOS 版（ComponentKit），並在 2017 年推出了 Android 版（Litho）。以此讓 Native 開發也能具有 React 的種種優點，如 UI 可預測性、Flexbox 佈局等。但沒法知足提高開發效率的初衷，一點變更仍要從新編譯，另外一方面，這一套與 Web React 並不互通，沒法利用 Web 生態中創建在 React 之上的利器（如Relay）
• Scripting native：經過 JavaScript 調用 Native API。既能擁有 Web 開發的快速迭代能力，還不侷限於 Web 技術，同時也沒有脫離 JavaScript 生態，彷佛是個完美的方案

而React Native，就是第三種方案的最終成果

2015

• React.js Conf Round-up 2015：首次介紹 React Native，演講視頻見React.js Conf 2015 Keynote - Introducing React Native、React.js Conf 2015 Keynote 2 - A Deep Dive into React Native
• F8 2015: New Open Source Tools for Mobile Developers：發佈 React Native 並開源，演講視頻見F8 2015 - React Native & Relay: Bringing Modern Web Techniques to Mobile
• React Native: Bringing modern web techniques to mobile：發佈第一篇官方介紹，此時僅支持 iOS
• React Native for Android: How we built the first cross-platform React Native app：宣佈 React Native 支持 Android 了

2015 年 1 月的 React.js Conf 上，這個內部項目首次公佈，並在 5 月的 F8 Conference 上正式開源

最初只支持 iOS，同年 9 月支持了 Android

2016

• Introducing Hot Reloading：支持 Hot Reloading
• Dive into React Native performance：性能全面提高
• React Native on the Universal Windows Platform：進入 Windows 生態
• Samsung Committed to Bringing React Native to Tizen：進入三星物聯網生態（Tizen 系統）
• Right-to-Left Layout Support For React Native Apps：支持 RTL 佈局
• 0.36: Headless JS, the Keyboard API, & more：發佈 0.36，支持後臺任務、鍵盤操做等
• Introducing Button, Faster Installs with Yarn, and a Public Roadmap：發佈 0.37，新增<Button />組件及Yarn支持
• Easier Upgrades Thanks to Git：簡化版本升級操做

Microsoft UWP 和 Samsung Tizen 的支持，意味着React Native 從移動端走向了 PC（Win 10）、遊戲機（Xbox One）、手環（Gear Fit 2）、智能電視機（SUHD）甚至全息眼鏡（HoloLens）

此外，開發體驗、性能、API 能力等都在快速迭代中不斷提高

2017

• A Monthly Release Cadence: Releasing December and January RC：計劃按月發版
• Using Native Driver for Animated：動畫性能及易用性進一步提高
• Better List Views in React Native：對 List View 提供更友好的支持
• Introducing Create React Native App：推出官方腳手架Create React Native App
• React Native Monthly #1：與 Airbnb、Microsoft 等 8 個團隊按期召開月會，持續了半年
• React Native Performance in Marketplace：介紹 Facebook 在其 React Native 主應用（Marketplace）上的性能實踐

創建了月度迭代計劃，以及按期召開包括社區團隊在內的月會。性能仍然是一個重要方向，動畫、List View 等重要更新都涉及性能優化

另外，還開始了編譯時的性能優化探索，如Prepack，指望大幅削減 React Native core 的初始化耗時：

We plan to bring the cost of the React Native bridge close to zero via projects like Prepack and more build time processing.

2018

• Implementing Twitter’s App Loading Animation in React Native：用於 Twitter Loading 動畫
• Using AWS with React Native：配合 Amazon 雲計算生態
• Building <InputAccessoryView> For React Native：支持 InputAccessoryView
• Using TypeScript with React Native：社區提供 TypeScript 支持
• State of React Native 2018：React Native 在 Facebook 內外普遍使用，核心團隊開始架構升級
• Releasing 0.56：發佈 0.56，升級 Babel、Android SDK、Xcode、Flow 等依賴版本
• Introducing new iOS WebViews：iOS 切換至 WKWebView
• Open Source Roadmap：計劃精簡核心模塊，並開源 Facebook 內部的一些基建
• The State of the React Native Community in 2018：創建開源社區管理規範

爲了更好地支持 Native & React Native 混合 App，核心團隊啓動了架構升級計劃（Fabric），包括重構線程模型、支持 React async rendering 能力、簡化 React Native core 等大改。同時，Facebook 也計劃開源包括 JSI 在內的一些基礎設施，具體見Open Sourcing Internals and Updated Tooling

另外一方面，開源社區的管理也走向正規化，包括版本管理、RFC、交流討論等

2019

• Releasing React Native 0.59：發佈 0.59，支持 React Hooks，升級 Android JSC，核心模塊精簡計劃持續進行
• Mobile Innovation with React Native, ComponentKit, and Litho：分享 Facebook 的移動技術棧（React Native + ComponentKit 和 Litho）
• Meet Hermes, a new JavaScript Engine optimized for React Native：迎來 JS 引擎級性能提高，見Hermes: An open source JavaScript engine optimized for mobile apps, starting with React Native

在開源社區的參與下，架構升級計劃進展迅速，部分非核心模塊從 React Native Core 拆出去獨立維護，而且效果不錯：

These modules are getting more support than they ever did within React Native, showing that this is a great step for the community.

同時，性能優化從未停歇，甚至換用Hermes做爲 Android 平臺的 JS 引擎（以前 Android 也用 JavaScriptCore），以求進一步的性能提高：

Hermes is an open-source JavaScript engine optimized for running React Native apps on Android. For many apps, simply enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size.

參考資料

• React Native: A year in review
• React Native: Bringing modern web techniques to mobile
• State of React Native 2018
• Facebook's React Native Framework Gets Windows and Tizen Support
• React Native - Building Mobile Apps with JavaScript

有所得、有所惑，真好

關注「前端向後」微信公衆號，你將收穫一系列「用心原創」的高質量技術文章，主題包括但不限於前端、Node.js以及服務端技術

本文首發於 ayqy.net，原文連接 http://www.ayqy.net/blog/the-...