本文翻譯自 Instagram Engineering 發(fā)布的 React Native at Instagram
React Native 自從 2015 年開源以來剑肯，已經(jīng)走過了漫漫長路职抡。僅僅兩年后揪惦，它已經(jīng)不僅被用于 Facebook 和 Facebook Ads Manager陈哑， 還用于很多其他公司，從財富 500 強公司到熱門的創(chuàng)業(yè)公司 仗哨。
開發(fā)速度定義了 Instagram 移動端的價值的一方面桥言。2016年初，我們開始探索使用 React Native谋国，使產(chǎn)品團隊通過代碼重用和快速迭代 更快地發(fā)布功能槽地，使用 Live Reload 和 Hot Reloading 等工具，省去編譯安裝的時間。
挑戰(zhàn)
將 React Native 集成到現(xiàn)有的 native app 中會帶來額外的工作和挑戰(zhàn)捌蚊，但如果從頭開始寫就不會遇到這個問題集畅。考慮到這一點逢勾，我們決定先移植我們可以想到的最簡單的視圖：推送通知視圖牡整。這個視圖最初被實現(xiàn)為一個 WebView，所以我們覺得在一開始搞定它并不會太難溺拱。最重要的是逃贝，這個視圖不需要我們建立很多導航結構——UI 很簡單，翻譯由后端確定迫摔。
Android 方法計數(shù)
出現(xiàn)的第一個問題是把 React Native 添加為一個依賴沐扳，而不是直接拖入整個庫。否則不僅會增加包的大小句占，而且會對方法計數(shù)產(chǎn)生很大的影響沪摄，導致 Instagram for Android 的所有性能結果都是多指的（Instagram仍然是單指令！）纱烘。我們最終選擇性地只拖入我們當時需要的視圖管理器杨拐，然后自己實現(xiàn)那些不想拖入的依賴庫。最終擂啥，React Native 添加了大約 3500 個方法哄陶。用 React Native 編寫的功能幾乎不需要定義 Java 方法，因此我們相信這種投資在長期內是值得的哺壶。
指標
作為推送通知設置實驗的一部分屋吨，我們審核了 React Native 對多個指標的影響，包括崩潰和內存溢出山宾。我們發(fā)現(xiàn)這些指標在實驗開始時和用戶離開 React Native 功能時都保持中間值（因此下次進入時我們不必重新創(chuàng)建它）至扰。
啟動性能
React Native 有一個啟動開銷，主要是由于必須將 JavaScript 包注入JavaScriptCore（React Native 在 iOS 和 Android 上使用的 VM）并實例化本機模塊和視圖管理器资锰。雖然 React Native 團隊在 提高性能方面 取得了很大進步敢课，但對于 Instagram 的集成，我們希望衡量這種差距台妆，來判斷這種權衡是否真的有意義翎猛。為此，我們將現(xiàn)有的 native Edit Profile 視圖移植到 React Native接剩。我們構建了產(chǎn)品基礎架構，開始被產(chǎn)品團隊并行使用（例如導航萨咳，翻譯懊缺，核心組件）。
我們最終利用了 React Native 團隊已經(jīng)構建的想法和基礎，即Random Access Module Bundling鹃两，Inline Requires遗座，Native Parallel Fetching 以及已經(jīng)集成到框架中的大量內容。
產(chǎn)品
如上一節(jié)所述俊扳，Core Client 團隊將推送通知設置和 Edit Profile 視圖移植到 React Native途蒋。我們還移植了 Photos Of 視圖，查看使用 React Native 加載列表時的性能：
除了這些例子馋记，還有幾個產(chǎn)品團隊發(fā)布了 React Native 的其它功能号坡。
推廣文章
Instagram 有一個輕量級界面，用于宣傳推廣文章梯醒。此產(chǎn)品最初實現(xiàn)為 WebView宽堆，因為該技術允許團隊比 native 代碼更快地迭代。WebView 的問題是茸习，UX 不覺得 native 的啟動非常緩慢畜隶。銷售團隊將此功能移植到 React Native，并在啟動時間和用戶體驗方面取得了極大的改進号胚。值得一提的是籽慢，盡管這是一個非常復雜的創(chuàng)建流程，它只添加了 6 個方法到 Android DEX 中猫胁。
保存
每個月有超過 6 億人來到 Instagram箱亿，聯(lián)系他們的朋友的同時發(fā)現(xiàn)了大量基于興趣的靈感。然而杜漠，他們并不總是想在發(fā)現(xiàn)的時候就立馬做什么极景，而是想在以后再回顧這個內容。為了滿足這個需求驾茴，Save 團隊實現(xiàn)了對 保存帖子 的支持盼樟，想回顧的時候就直接打開一個新的、私人的 tab锈至，出現(xiàn)在個人資料上晨缴，但只對自己可見。
Save 團隊用 React Native實現(xiàn)了 iOS 版本的保存帖子列表峡捡。
驗證碼
驗證碼是從服務器觸發(fā)的流量击碗，以響應可疑操作（例如：當需要驗證電話號碼時，我們就認為您的賬戶已被盜用们拙，等等）稍途。
過去，驗證碼已使用 WebView 實現(xiàn)砚婆。如前所述械拍，WebView 適用于代碼重用和快速迭代速度，但 UX 沒有發(fā)現(xiàn) native 和啟動時間可能很慢。
Protect and Care 團隊開始著手改進其中一些流程坷虑。他們決定使用 React Native 來實現(xiàn)代碼重用甲馋，同時保持良好的用戶體驗和快速啟動時間。
評論審核
我們希望 Instagram 是一個安全的地方迄损，每個人都可以捕捉和分享他們最重要的時刻定躏。隨著 Instagram 社區(qū)的發(fā)展和來自世界各地的人們分享更多的內容，我們希望努力工作以保持 Instagram 的積極和安全芹敌，尤其是您的照片和視頻的評論痊远。考慮到這一目標党窜，F(xiàn)eed 團隊推出了一項功能拗引，允許用戶審核他們在帖子上發(fā)布的評論。
Lead Gen Ads
Lead Gen Ads 是一個界面的稱呼幌衣，允許用戶與廣告客戶共享信息矾削。廣告客戶可以自定義此界面上的表單。
結果
React Native 允許產(chǎn)品團隊更快地將功能發(fā)布到 iOS 和 Android app豁护。下面的列表顯示了一些產(chǎn)品的 app 之間重用代碼百分比哼凯，可用作衡量提高開發(fā)人員的速度：
- 推廣文章：99%*
- 短信驗證碼：97％
- 評論審核：85％
- Lead Gen Ads：87％
- 推送通知設置：92％
補充
我們最近將移動端基礎架構開發(fā)團隊（ iOS 和 Android ）搬到了紐約市。如果這篇博文讓你對我們正在做的事感到興奮楚里，我們正在招聘——請查看我們的 招聘頁面 断部。
Martin Bigio ， Don Yu 班缎， Brian Rosenfeld 和 Grace Ku 是 Instagram 紐約 Core Client 團隊的軟件工程師蝴光。
