转载

[译] Instagram 的 React Native 之路

为了把大家从越来越多的技术水文中拯救出来，“大公司技术博客”将良心推送国内外大公司的优质干货文，如Facebook, Google, Medium, GitHub（嗯，我知道很多国外的文章你点不开，或者是英文的你懒得看）等。

技术创新、深度研究、未来趋势，这里都有。

当然了，这么说无非就是希望你点下关注。

文章介绍

来自 Facebook 的 Instagram 终于来强势支持了一把 React Native。很多人在争论 React Native 的应用前景，那如果 6 亿月活的 Instagram 顺利引入了 RN，大家会怎么想呢？快速迭代、代码复用、减少人力，这么多优点是否值得你去学习甚至在公司项目中引入 React Native 呢？

对了，文末有这两天旧金山 React Native 大会里对 RN 优劣的总结和应用场景的分析，不要错过。

下面是正文。

React Native 自从 2015 年开源以来一直在向前推动。在不到两年的时间，React Native 已经从 Facebook 和 Facebook Ads Manager 的内部项目走进了更多公司的技术栈，无论是财富五百强企业，还是热门创业公司。

开发速度是 Instagram 移动开发里至关重要的指标。

为了让我们产品更快速迭代更新，我们从 2016 年初开始探索使用 React Native 来实现代码共享和快速迭代，采用 RN (React Native 缩写，下文同) 中的 Hot Reloading 技术来减少反复编译安装的时间。

挑战

对于一个已经用 Native 开发好的 App 而言，集成 RN 会带来很多新的挑战和额外的工作，这比从零开始开发一个 RN App 更加艰难。考虑到这一点，我们决定从 App 里最简单的页面开始下手： Push Notification 页面（如下图）。这个页面以前是用 WebView 实现的，因此我们认为替换 RN 是相对安全的。

[译] Instagram 的 React Native 之路

Android 方法数限制

在引入 RN 过程中我们遇到的第一个问题是将 RN 作为 dependency 引入。这样做不仅增大了 apk 文件的 size，而且明显增加了 Android 的方法数，导致 Instagram Android 变成了 multi-dex ，这会带来很多性能上的问题。（没错， Instagram 现在仍然是 single-dex !）

最终，我们决定只引入 RN 中 View Managers 部分代码，其它未引入的代码我们自己来实现。通过这种方法，我们引入 RN 后只增加了 ~3500 个方法。另外，我们用 RN 做的一些 feature 基本不需要定义 Java 方法，因此从长远来看，我们认为这样做是值得的。

性能影响

在重写 Push Notification 页面的时候，我们也对 RN 带来的一些性能影响做了评估，包括 crash 率和 OOM 等。评估后发现这些指标在引入 RN 后基本保持稳定。

启动速度

RN 在启动时往往有不小的开销，主要由于 RN 需要将 JavaScript bundle 导入 JavaScriptCore（RN 在 iOS 和 Android 公用的运行 JS 的虚拟机），而且需要初始化 native 模块和 View Managers。尽管 RN team 一直在改进 RN 的性能，但是，我们还是想要衡量下引入 RN 对启动速度会带来多大的影响。

于是，我们将现有的原生 Edit Profile 页面替换成 RN。替换过程中，我们还构建了不少基础组建如navigation, translations, core components。

[译] Instagram 的 React Native 之路最终，我们采用了许多 RN team 提出的一些想法和基础组件引入到我们的项目中来改进性能，例如 Random Access Module Bundling , Inline Requires , Native Parallel Fetching 。

Products（ po 主觉得这里应该是 Photos, anyway... ）

正如上文提到的，Core Client team 用 RN 重新实现了 Push Notification Settings 页面和 Edit Profile 页面。除此之外，我们又用 RN 重新实现了 Photos Of Instagram 页面，以此来检验下 RN 对 list 的性能影响情况。

[译] Instagram 的 React Native 之路除了这些例子，product team 还基于 RN 发布了不少新的 feature。

Post Promote（类似新浪微博里花钱推广个人微博）

Instagram 有一个轻量级的用来推广个人 post 的接口： Post Promote 。这个功能当时是用 WebView 实现的，为的就是能更快速迭代。不过用 WebView 带来的问题是：UX 和原生相差比较大；启动速度太慢。然后，Promote team 用 RN 重写了这个功能后，大幅提升了启动时间，改善了用户体验。

值得一提的是， Post Promote 是一个相对复杂的 creation flow，但是 RN 实现仅仅给 Android DEX 文件增加了 6 个方法。

Save（收藏看过的 post 方便以后查看）

每个月有超过 6 亿人来 Instagram 发现各种基于兴趣推送的内容。为了让用户能够收藏这些内容方便日后查看，Save Team 开发了新的功能来支持收藏 post，当他们以后想再次查看这些 post 时，只要进入个人主页就能进行查看。Save Team 基于 RN 实现了下面这个收藏 post 列表的页面。

[译] Instagram 的 React Native 之路

Checkpoints（ 安全性检查 ）

Checkpoints 是当发现可疑行为时，server 触发的一套安全检查流程，例如当我们要验证你的手机号时，或者当我们觉得你的帐号出现安全隐患时。

Checkpoints 一直以来都是用 WebView 来实现的，正如上文所言，WebView 能方便地在 Android 和 iOS 中实现代码共享，但是，它的用户体验比较糟糕，而且启动时间很慢。

于是，Protect and Care Team 开始重新设计这些安全性检查 flow，他们最终也决定使用 RN 来达到代码共享，同时保证良好的用户体验和快速启动时间。

[译] Instagram 的 React Native 之路

Comment Moderation （ 过滤负面虚假的评论 ）

一直以来，我们都希望 Instagram 能安全地让用户在里面分享自己的重要时刻。而随着 Instagram 社区的快速成长，全世界各地的人开始分享越来越多的内容。对我们而言，我们希望能够持续保持 Instagram 的积极性和安全性，尤其是别人对你的照片、视频的评论。（ 这一点新浪微博做的简直是zha ）

为了保持 Instagram 里对图片和视频的评论更加积极和安全，Feed Team 基于 RN 发布了一个新的功能：用户可以选择自动过滤含有某些消极词汇的评论。（ 如下图中，用户可以自定义一些关键词涌来过滤：hate、dumb ）

[译] Instagram 的 React Native 之路