iOS原生，React Native，Cordova技术选型对比

    对于移动客户端开发，目前主要的开发模式有两种，分别是跨平台开发以及原生客户端开发。跨平台开发通俗来讲就是一套代码同时兼容多个手机系统。原生客户端开发就是使用官方开发语言进行开发。两种开发模式都可以开发出企业需要的应用终端功能，但是相对应的每种开发模式都有自己的优缺点，因此企业需要根据本身的需要以及开发模式的优缺点来选择更适合自己的开发模式。

开发模式介绍

    一． 跨平台开发

跨平台开发的特点就是使用一套代码兼容多个平台，在开发人员人手不足的前提下使用跨平台开发效率是挺高的，可以节约很多成本，但是性能不一定高，用户体验度不是特别高。目前主流的跨平台开发有很多种，例如：React Native，Cordova，Weex，Framework7等等。

接下来的跨平台介绍将以React Native和Cordova为主。

二． 原生开发

使用原生开发的特点是使用原生的API进行开发，比如说原生iOS应用开发使用的是Objective-C/Swift，Android使用Java开发，在对应的开发人员人手足够的前提下开发效率高，性能优化好，用户体验好，扩展性比较好，可以进行底层开发。由于需要配备对应的Android开发人员和iOS开发人员，因此开发成本相对较高。

跨平台开发技术介绍

Cordova

Cordova是一个开源的移动开发框架。允许用户使用标准的web技术HTML5，CSS和JavaScript做开发平台，应用在每个平台的具体执行被封装了起来，并依靠符合标准的API绑定去访问每个设备的功能，比如说；传感器、数据、网络状态等。（摘自Cordova官方中文文档）。

说白了，Cordova其实就是内嵌一个移动端的web页面，依托于原生平台上实现页面展示，业务逻辑处理等功能。

现有的Cordova项目在图中可以清楚的看到在iOS中App主页面是一个UIWebView。

React Native

React Native是由Facebook研发的一套跨平台开发技术，是在JavaScript和React的基础上获得一致的开发体验构建原生APP。宗旨是Learn once， write anywhere。（摘自React Native官方中文文档）

React Native是使用JavaScript做为主要语言开发的一种方式，其特点是使用JavaScript编写出的代码会转为原生平台的API。通过这种途径可以实现使用同一套React Native代码转换为Android和iOS系统的代码。

如下图所示，React Native项目会转为iOS原生的控件。

技术可行性对比

App是用户对整套系统最直接的终端体现，因此用户对App的体验度是对系统使用的最直观评价。因此，从综合方案作出一个技术对比是有必要的，因为使用跨平台开发或者原生开发生成的App会有一些差异。同样的在企业中开发人员使用不同的开发模式也会有差异。因此，接下来会从技术本身角度和开发者角度来分析技术可行性

在技术对比中，将会从以下几个方面对Cordova，React Native以及原生开发（以iOS客户端为例）进行对比。

1. 1. 性能（内存消耗，运行效率，帧率）
2. 2. 学习成本
3. 3. 可扩展性

性能

内存消耗：

在操作系统中，系统为每一个进程分配的内存空间是有限的，当一个进程在运行过程中需要的内存空间超出了系统为进程分配的内存空间，操作系统会对该进程做出相应的处理。例如在iOS应用中，如果应用程序在运行过程中不断的申请新的堆空间，但是没有有效的进行释放，当整个App运行空间将要超过系统分配的空间时，会给App发出内存警告，如果没有作出对应的处理。App就会直接闪退。对于这一现象的发生，从用户体验上来看是极其不友好的。因此内存消耗是一个衡量App性能的重要指标。

下面，我会直接从在一个应用中展示一段文字，应用分别使用Cordova，React Native和原生生成，设备为iPhone6模拟器。并展示出其占用的内存空间大小。

图1

图2

图3

在上图中，图1是使用Cordova生成的项目，可以看到占用的内存是68.9Mb，图2是使用React Native生成的项目，可以看到占用的内存是66.7Mb，图3是使用iOS原生创建的项目，内存占用空间为41.5Mb。

由此我们可以得出在同一项目需求下创建的三个工程（Cordova，React Native，原生iOS），其内存占用从大到小排列为:Cordova > React Native > 原生iOS。由于衡量标准为内存使用率越低越好，因此我们可以得出原生iOS在此方面是做的最好的。

注意点：在iOS开发中使用UIWebView极其容易产生内存泄漏，并且不好排查原因。

分析原因：

我们知道，使用Cordova生成的工程是原生App里内嵌一个UIWebView，因为UIWebView本身占用的系统空间就很大，因此占用最大的空间也不足为奇了。

在React Native中，项目会通过JS代码生成原生API，由于React Native因为跨平台的原因生成了繁复的继承体系，因此虽然最终得出的是原生控件，但是所占用的空间相对原生较大。

在原生iOS中，使用最精准的控件展示出所需要的内容，因此整个项目占用的内存空间较少。

运行效率：

在运行效率方面，主要体现在多线程开发。在操作系统中线程之间的调度体现在硬件CPU中，此技术充分体现了拿空间换时间的概念。我们通常所说的多核CPU就是指的操作系统可以在多个核中进行调度，从而使应用程序能够快速的得到计算的值。

在App开发过程中，最主要的是UI和UE。但是在开发过程中有时会需要进行一些耗时的操作，通常我们会将耗时的操作放在子线程中进行。当子线程中的任务完成时再进行接下来的操作，比如iOS中会将复杂的耗时操作放在子线程中，子线程中的任务执行完毕之后再回到主线程刷新UI。

下面，我们从Cordova，React Native和原生iOS中的多线程开发做对比。

Cordova中的多线程：

从上述我们可以知道Cordova是基于Web的开发。而在Web开发当中，JS的运行机制是“单线程”的。通过一些手段，我们可以做成多线程的效果来。但是由于没有和原生平台交互，因此不能有效的充分的利用原生平台底层和多核CPU之间的交互，从而造成了硬件CPU的资源无法有效利用。

React Native中的多线程

由于React Native可以根据JS代码生成对应的原生代码，就相当于间接打通了JS和原生平台与底层多核CPU交互的通道。因此React Native中的从多线程本身来讲是相同的。

原生中的多线程

原生开发中，开发者可以根据需要使用多线程开发。

帧率：

帧率（Frame rate），是用于测量显示帧数的量度。就是每秒显示的帧数。也就是我们平常说的FPS。有过打游戏经验的人会很容易理解到FPS这个概念。FPS
值越高，游戏页面越不卡顿。在App开发中，帧率也是衡量一个App性能的一个重要指标。其中最能体现出帧率的操作就是App中的动效，包含动画功能，手指触控屏幕滑动等操作。例如列表页面，从上往下滑动的过程就是一个动效。如果帧率高的情况下，页面会给人很流畅的感觉。同样的如果帧率比较低，则会给人以卡顿的感觉，甚至iOS系统本身做有帧率监测的措施，如果帧率低到某一程度会直接将系统杀死。

在App的开发中，影响帧率的因素有很多。首先是硬件，iPhone4和iPhone-X上运行同一款App，iPhone4肯定会比iPhone-X卡顿。在软件层次，影响帧率的最大因素就是代码开发的优化程度。如果优化程度高，对细节把控比较优秀。那么帧率就会相对提高一些。

在开发模式的选择中会不会产生帧率的差异呢。我们从Cordova，React Native和iOS原生方面做出一些对比。

图4

图5

图6

在上面，图4是使用巨感App iOS客户端大屏列表作为比较的一个页面。图5是React Native开发生成的一个页面。图6是使用iOS原生客户端开发生成的一个页面。

在这三个页面中，都有一个共同的特点。都是有图片和文字的列表。我们以此为基准，检测一下在以平常滑动手速中各个开发模式的FPS值。如下图所示。

图 7

图 8

图 9

上图中的，图7，图8，图9。分别对应的巨感App，React Native和原生的FPS值。其中测试的手机机型为iPhone6s，以平时我们滑动的手速来滑动页面。

从上面的FPS数据当中我们可以看出，帧率（FPS）基本上都在40-60之间。并没有特别大的区别。因此我们可以得出一个结果。在同样的手机中运行由Cordova和React Native 以及原生开发出的App帧率是无差别的。

小结：

通过综合对比Cordova，React Native和原生开发的性能（内存，运行效率，帧率）。以优，一般，差作为衡量标准我们可以得出以下表格

开发模式 对比项	Cordova	React Native	原生iOS
内存	差	一般	优
运行效率	一般	优	优
帧率	—	—	—

学习成本

开发所需技能

跨平台开发App需要有前端开发经验也就是需要使用JavaScript + HTML + CSS开发。因此需要开发者实际掌握并能够灵活运用前端开发语言，并且掌握一个或多个JS框架。每种跨平台开发框架使用的JS框架不尽相同。

当前巨感App是使用Cordova开发的，使用的是Angular.js1框架 和Angular.js2框架。Angular.js1和Angular.js2相比就类似于雷锋和雷峰塔的关系（从网上看到的）。

React Native使用的是React.js.。React Native更新版本快，需要及时更新知识库

原生开发则需要对应的官方开发语言选择。

开发现状

在现有的人员配备下，每个人的技术栈不太一样，所掌握的开发语言也不尽相同。在跨平台开发模式下，需要有前端开发经验。综合前端人员意见，Web前端对JS掌握熟练，但是使用新框架开发仍需要学习新框架。iOS客户端和Android客户端开发人员对JS掌握熟练情况良莠不齐，对JS框架认识程度也都不一样。因此如果使用混合模式开发的情况下，需要花费一定时间学习。学习成本和时间成本较高。

而使用原生开发的话，iOS客户端和Android客户端有天然优势，首先没有学习成本，其次可以从旧项目当中将原先的功能模块（网络层模块，图片模块，基类等）直接拿过来用。从一定程度上减少了时间成本。

可扩展性

由于没有完整的做过Cordova或React Native项目，因此无法确定具体的扩展性怎么样。npm, Gradle, CocoaPods都有异曲同工之妙。而且开发人员也都可以根据自己的需求封装一些控件或者功能类，提交到开源社区。因此从语言的扩展性方面无论是JS，还是android或者iOS都很具有扩展性。

从项目开发上来看，跨平台和原生有一点最根本的区别，那就是底层开发。在iOS的底层开发中，可以通过runtime和runloop做出一些黑魔法。从而做到跨平台做不到的功能。

总结

跨平台开发模式既然诞生出来并且流行了这么久，肯定是有无与伦比的优势，比如说人力成本低，开发效率高等。原生开发也有自己独到的有点，性能最高，稳定，而且可以做出很多跨平台做不到的功能。因此，使用哪种开发模式取决于企业的需要和追求。前段时间RN搞得沸沸扬扬的Lisense事件也是企业选择需要考虑进去的一些问题。