我们改进 React 原生应用的 5 种方式

原文：https://medium.com/hackernoon/5-ways-we-improved-our-react-native-app-2704d5098b20

提高性能的真实场景

在过去的几天里，我有机会专注于改善我们公司开发的 React 原生应用程序的性能:由于已经在两个市场(iOS/Android)上市，我采取的方法主要是以 JS 为重点，以便能够通过微软的 Codepush 工具部署调整。

我必须承认，我对这些改变的有效性感到非常惊讶——这就是为什么我与你们分享它们，希望帮助你们理解提高绩效可以是简单的；正如我在上周之前所想的那样，这不是只有铁杆老兵才能完成的事情。

起点:需要基准

正如任何从事表演工作的人都会告诉你的那样，在开始改善表演之前，你需要给自己配备一些 with…🥁来衡量它们🎉

在react-native基础项目中，有一个名为PerfMonitor的基准测试工具。根据我的理解，这基本上是同一个标准的 React Perf 工具——你可以在这里阅读更多关于的内容。基本上，它为你提供了一个关于你的应用程序在无用的重新渲染中浪费了多少时间的分析；但是它有一个缺陷，那就是它只能在调试器模式下运行，这是没有优化的。

无论如何，它仍然是一段非常有价值的代码——我是这样设置它的:

我将这几行代码放在我们的根组件之一的 ComponentDidMount 中，这个根组件叫做 Logged——它基本上“拥有”登录用户的主导航。在这些行未被注释的情况下，在“启动”时，该工具将开始记录发生的一切，并在 20 秒后(在我看来，这是将一切正确加载到应用程序中的良好“平稳”时间)，它将打印出关于渲染的分析。

我不能进入我们的应用程序架构的细节，但我认为你应该知道的是，提到的日志组件包含主导航标签栏(由 4 个标签组成)，第一个主标签包含自己的标签栏导航，也是 4 个标签(其中一个使用 Airbnb 的地图组件)。 (对了，我们用 反应-导航 )

The actual starting point

这是我使用的基线:在应用任何优化之前，这是 Perf 工具提供的基准。

改进 1:强制执行无绑定规则

作为一个已经在 v2.x 中的应用程序，经过一年多的开发，难怪代码库没有在每个角落都得到完善——谢天谢地，我们使用 Eslint 成功地找到并更新了所有不遵守规则的文件。

我们在前 10 名中获得了不错的~ 50ms (只有几个例外，比如 CellRenderer)。很好，但没什么大问题——所以我继续挖。

改进 2:改变比较器

由于我们的一些组件有大量的项目要显示(像大多数应用程序)，我们需要以特定的方式对道具的变化做出反应。我们在 componentWillReceiveProps 中做的一项检查是对列表的数据集进行的，当我们将数组比较从 standard ===更改为 lodash _ 时。isEqual()方法，事情是这样的: