比较Native iOS（Swift）和React-Native的性能
React-Native是一个跨平台的移动框架，可让您仅使用JavaScript来构建应用程序。 但是，与其他混合移动技术不同，您不是在构建“移动Web应用程序”（Web应用程序包装在本机容器中）。 最后，您得到了真实的东西。 您的JavaScript代码库已编译为与使用Objective-C构建的iOS应用程序或使用Java的Android应用程序无法区分的移动应用程序。 这意味着React-Native提供了本机和混合移动应用程序的好处。
我的目标是找出他们是否能够兑现承诺。 为此，我将需要在Swift和React-Native中构建相同的应用程序。 它必须足够简单，以便我可以同时学习两种语言并及时完成应用程序，但又需要足够复杂，以便可以比较每个应用程序的CPU，GPU，内存使用情况和电源使用情况。 该应用程序将具有四个标签。 第一个将被命名为“个人资料”，并提示用户登录Facebook，以检索用户的个人资料照片，姓名和电子邮件并将其显示在页面上。 第二个选项卡称为“待办事项列表”，使用NSUserDefaults（iPhone内部存储器）将是一个简单的待办事项列表。 它将具有“添加项目”和“删除项目”功能。 第三个选项卡将被命名为“页面查看器”，并将由一个页面查看控制器组成。 页面视图控制器将具有用户可以在其中滑动的三个屏幕（“绿色”，“红色”和“蓝色”屏幕）。 最终选项卡将被命名为“地图”，并将包括一个放大到用户当前位置的地图视图，在地图上带有一个蓝点代表用户的位置。
迅速的过程
首先是iOS和Swift。 学习Swift相对容易，因为它类似于我已经知道的许多语言（Java，C ++）。 但是，学习Cocoa Touch（iOS框架）是一项艰巨的任务。 我在Udemy.com上观看了罗伯·珀西瓦尔（Rob Percival）的视频系列，这是从Swift的引入到完成多个应用程序的全部过程。 即使在介绍性视频之后，我仍然在理解Cocoa Touch方面仍然遇到困难。 这些视频中的许多“学习”都涉及复制/粘贴代码，但我们不确定它的作用。 我什至有一种感觉，甚至老师都不知道，只是记住了。 我不喜欢不知道我的代码的每一行做什么。
毫无疑问，Apple的IDE（Xcode）非常先进且用户友好。 您可以单击“情节提要”，然后按所需顺序设置应用程序屏幕，在屏幕上将要启动应用程序的地方放置一个箭头。 在第一个标签（“配置文件”）中，我可以将图像视图，名称标签和电子邮件标签拖到所需的位置。 然后，我将其拖到代码中并进行连接，在此过程中的代码中创建了一个新变量。 然后，以编程方式，一旦用户通过Facebook登录，我就将这些变量名称设置为其相应的Facebook值。 花了3周的时间才完成了该视频系列，并在Swift / iOS中获得了舒适的编码。
您可以通过以下链接在GitHub上查看此应用程序的Swift版本的代码：https：//github.com/jcalderaio/swift-honors-app
反应本机过程
第二名是React-Native。 学习JavaScript比Swift难一点，但仍然不难。 我尝试从互联网上学到的React-Native片段中编写应用程序，但这还不够。 我需要一些视频讲座。 回到Udemy.com ，我观看了Stephen Grider对React-Native的精彩介绍。 起初，我感到难以置信。 React-Native的结构对我来说毫无意义，但是在观看了Stephen的讲座仅一周之后，我便能够自行开始编写代码。
我真正喜欢React-Native的地方在于，与iOS不同，您编写的每一行代码都很有意义-您知道每一行代码的作用。 另外，与iOS中不同（在iOS中，您必须调整每个页面的设置才能在不同屏幕尺寸的横向和纵向上看起来都不错），而在React-Native中，所有调整都是为您完成的。 没有任何设置，我使用的是横向制作的应用程序，看起来非常不错。 我以多种不同的iPhone尺寸运行了该应用程序，并且在那里看起来也不错。 由于React-Native使用flexbox（类似于HTML的CSS），因此它可以响应正在显示应用程序的屏幕大小。
您可以通过以下链接在GitHub上查看此应用程序的React-Native版本的代码：https://github.com/jcalderaio/react-native-honors-app
*更新：由于升级到iOS 10，此源代码以前无法正常工作。我已解决了该问题，现在应该可以正常工作🙂
数据
现在是时候让应用程序相互竞争，看看哪个程序性能更好。 我将使用Apple Instruments（Xcode，Apple IDE的工具）在以下三个主要类别中测试这两个应用程序：CPU（“时间剖析工具”），GPU（“核心动画工具”）和内存使用情况（“分配”工具”）。 Apple Instruments允许我插入手机，选择手机上任何正在运行的应用程序，选择要使用的测量工具，然后开始记录（M，Igor）。
每个应用程序中都有4个标签，每个标签都有一个“任务”，我将在每个类别中对其进行衡量。 第一个（“配置文件”）选项卡的功能是通过Facebook登录。 在代码中是一个图形请求，要求从Facebook的服务器返回给应用程序的个人资料图片，电子邮件和姓名。 第二个（“待办事项列表”）应用程序的任务是在列表中添加和删除“待办事项”。 第三个（“页面视图”）选项卡的任务是在3个页面视图屏幕上滑动。 第四个（“地图”）选项卡的任务是单击该选项卡，该代码将使GPS放大地图到我当前的位置，并在我身上放一个蓝色的辐射点。
CPU测量
让我们遍历每个类别：
简介： React-Native凭借1.86％的CPU有效使用率略胜一筹。 在执行任务并记录测量结果时，在我按下“使用Facebook登录”按钮的确切时刻，观察到CPU使用率出现峰值。
待办事项： React-Native也几乎没有赢得此选项卡，其CPU使用效率提高了1.53％。 在执行任务并记录测量结果时，恰好在我将一个项目添加到“列表”时以及删除该项目时，观察到CPU使用率的峰值。
页面浏览量：这次，Swift通过使用CPU的效率提高了8.82％击败了React-Native。 在执行任务并记录测量值时，恰好在我浏览到页面视图中的另一个页面时，观察到CPU使用率的峰值。 停留在页面上后，CPU使用率下降了，但是如果再次滑动页面，CPU使用率就会上升。
地图： Swift凭借13.68％的CPU有效使用率再次赢得该类别。 在执行任务并记录测量结果时，在我按下“地图”选项卡的确切时间观察到CPU使用率的峰值，这提示MapView查找我的当前位置并用蓝色的脉动点突出显示它。
是的，Swift赢得了两个选项卡，React-Native赢得了两个选项卡，但是总体而言，Swift的CPU使用效率提高了17.58％。 如果我允许自己在每个应用程序中有更多的时间，而不是仅仅专注于一个任务并停止，那么结果可能会有所不同。 我确实注意到从一个选项卡到另一个选项卡更改时根本没有使用CPU。
GPU测量
我们将绘制图形的第二个数据集是GPU测量值。 我将为每个Swift和React Native的每个选项卡执行一项任务，并写下测量值。 Y轴最高每秒60帧。 在执行标签任务的过程中，每秒都会通过“核心动画”工具记录一次测量。 我将取这些平均值并将其绘制在下表中。
让我们遍历每个类别：
简介： Swift以比React-Native高1.7帧/秒的速度稍微赢得了此标签。 在执行任务并记录测量值时，在我按下“使用Facebook登录”按钮的确切时刻，观察到帧/秒的峰值。
待办事项： React-Native以高于Swift的6.25帧/秒的速度赢得该类别的冠军。 在执行任务并记录测量值时，在我将一个项目添加到“列表”中以及删除该项目的确切时刻，观察到帧/秒的峰值。
页面浏览量：在此标签中，Swift击败了React-Native，运行速度提高了3.6帧/秒。 在执行任务并记录测量值时，我观察到如果我快速浏览页面，每秒的帧数会飙升至50s。 停留在页面上后，帧数减少，但是如果再次滑动页面，则帧数会再次增加。
地图： React-Native赢得了这一奖项，因为它比Swift快3帧/秒。 在执行任务并记录测量结果时，在我按下“地图”标签的确切时刻观察到帧/秒的峰值，这提示MapView查找我的当前位置并用蓝色的脉动点突出显示它。
Swift再一次赢得两个标签，React-Native再赢得两个标签。 但是，React-Native整体以0.95帧/秒的速度赢得了该类别的冠军。 令人惊讶的是，Facebook能够从React-Native的代码中榨取多少汁-到目前为止，似乎它在抵制本机iOS（Swift）。
记忆体量测
我们将绘制的第三个数据集是内存测量值。 我将为每个Swift和React Native的每个选项卡执行一项任务，并写下测量值。 Y轴（内存）将达到我的最高测量值。 我的CPU使用率采样间隔为1毫秒。 在执行任务时，每毫秒，都会通过“分配”工具记录一次测量。 我将取平均值并将其绘制在下表中。
让我们遍历每个类别：
配置文件： Swift通过使用少0.02 MiB的内存来赢得此选项卡。 在执行任务并记录测量值时，恰好在我按下“使用Facebook登录”按钮的那一刻，观察到内存使用量激增。
待办事项： React-Native通过使用Swift内存少0.83 MiB赢得了该标签。 在执行任务并记录测量结果时，恰好在我将一个项目添加到“列表”的那一刻观察到内存使用率的峰值，当我从列表中删除一个项目时，内存使用率下降了。
页面视图：在此选项卡中，React-Native通过使用少0.04 MiB的内存击败Swift。 在执行任务和记录测量值时，我注意到在页面视图中的页面之间切换时没有内存峰值。 从字面上看，什么都没有改变。
地图： React-Native通过使用比Swift少61.11 MiB的内存而在该类别中大获全胜。 在执行任务并记录测量结果时，在我按下“地图”标签的确切时刻观察到内存使用率出现峰值，这提示MapView查找我的当前位置并用蓝色的脉动点突出显示它。 在这两个应用程序中，内存在任务过程中一直在增加，但最终达到停滞状态。
React-Native赢得了三个选项卡，Swift赢得了一个选项卡。 总体而言，React-Native使用的内存减少了61.96 MiB，并赢得了“内存”类别。 如果我允许自己在每个应用程序中有更多的时间，而不是仅仅专注于一个任务并停止，那么结果可能会有所不同。 我确实在两个应用程序中的“地图”标签中都注意到，当我缩小地图或四处移动地图时，所使用的内存呈指数增长。 到目前为止，“地图”在每种情况下使用的内存最多。
结论
我为Swift和React-Native开发的移动应用程序的外观几乎相同。 从四个选项卡中每个任务执行期间测量应用程序的CPU，GPU和内存所收集的数据中可以看出，这些应用程序的性能几乎相同。 Swift在CPU类别中总体上获得了冠军，React-Native在GPU类别中获得了（几乎），React-Native在Memory类别中获得了重要的成绩。 从这些数据中我可以推断出，Swift比React-Native更有效地使用iPhone的CPU，React-Native比Swift更为有效地使用iPhone的GPU，并且React-Native在某种程度上比iPhone更加有效地利用了iPhone的内存。斯威夫特做到了。 React-Native赢得了三项大奖中的两项，是性能更好的平台，位居第一。
我没有考虑的是Native Android。 iOS是我首选的首选平台，所以这是我最关心的平台。 但是，出于完整性考虑，我可能很快会在Android上尝试相同的实验。 我很想知道结果如何，但我敢打赌，如果React-Native可以击败本机iOS性能，那么它也可以击败本机Android性能。
现在，我比以往任何时候都更加相信，React-Native是未来的框架-它具有如此之多的优点，而缺点却很少。 React-Native可以用Javascript（许多开发人员已经知道的一种语言）编写，其代码库可以部署到iOS和Android平台上，生产应用程序更快，更便宜，并且开发人员可以直接向用户推送更新，以便用户不必担心下载更新。 最棒的是，React-Native仅成立一年，就已经超越了本机iOS Swift应用程序。
参考文献
阿比德，罗比。 “混合与本机移动应用程序—答案很明确。” Y Media Labs ，2016年11月10日，www.ymedialabs.com / hybrid-vs-native-mobile-apps-the-answer-is-clear /。 2016年12月5日访问。
M，伊戈尔。 “ IOS应用性能：Instruments＆Amp; Medium ，2016年2月2日，media.com / @ mandrigin / ios-app-performance-instruments-beyond-48fe7b7cdf2＃.6knqxp1gd。 2016年12月4日访问。
“ React Native | “使用React构建本机应用程序的框架。” React Native ，facebook.github.io / react-native / releases / next / 。 2016年12月5日访问。