3229人阅读
& &&&最近工作中接触到React-Native框架，对其进行一些技术分析，结合之前了解的H5的一部分，加上自己做了很久的原生开发（十几个android app、sdk，包括2个ios）, 总结下目前了解到的这三种移动端应用开发方式的特点和试用范围，作为个人知识的记录，也作作为公司内部互相学习的分享。
一、原生开发
& & & & &原生开发是系统自带的app开发方式，也是大部分人最熟悉app开发的技术，如android、ios、wp。
&&&&&原生开发依然是开发者采用最广泛的开发方式，优点十分显著。相比其他开发方式而言，原生开发可以访问设备中的所有功能，运行速度更快，性能更高，而且可以启用优秀的离线处理和存储能力等等，提供最佳的用户体验，最优质的用户界面，最华丽的交互。原生开发人员众多，开发环境成熟，有许多的开源库提供开发人员调用，可是方便实现各种设计效果。
& & &原生开发的缺点在逐渐的开发、运营过程中显现出来。开发成本高，不同平台需要定制不同的app，也就是android定制apk，ios定制app，开发人员需要多平台多语言，人力成本、时间成本较多，通用性差；上线时间不稳定，需要审核，特别是苹果审核机制，审核时间长短不一，对内容还有控制，国内Android APP市场（百度手机助手，应用宝，360市场等等）也有类似的问题；版本控制能力差，版本发布到达率无法控制，多个版本更新发布，修复bug，无法保证及时送达到用户手中；获得新版本需要重新下载安装，虽然目前有增量升级方式逐渐改变，但是随之而来的其他问题如增量升级多版本控制也是个很头疼的问题；
& & &总结：原生开发虽然有各种缺点，但是在目前所有的开发技术中原生是最成熟，有效，也是开发人数最多，开源库最广泛的。对APP要求各方面性能、响应要求高，人员充足，完整开发、测试流程，适合原生APP开发。
二、H5开发
& & &H5开发是Html5开发的app，本质上运行在手机浏览器中的页面，一般使用app做一个壳套用浏览器运行H5的页面，由于H5的特性也有很多app使用半原生半H5的hybird app 开发模式。
& & &H5有许多优点，特别针对原生开发的缺点。如： 直接在网页上调试和修改，几乎不用考虑用户机型和适配的问题，针对原生开发的平台碎片化、开发人力成本、时间成本高；版本升级优势，网页的升级与用户无关，用户无需下载更新安装，保证实时送达到用户手中；上线时间稳定、快速，不需要通过开发市场的审核，有收入分成的开发市场更是可以绕过收入分成。除此以外在视频媒体方面H5表现也十分优秀的。
& & &H5的缺点有许多，当新技术出现时候许许多多的人都在吹嘘它的优点，到真正实用时才对它的缺点正视。H5加载大图片的时候性能会下降，大量用户访问同一个H5应用时性能会下降，响应速度比不上原生app，上网速度也不及原生app，H5不能自动处理动画上反复交互（网页游戏），需要借助css3、javascript。H5本质上是网页，无论是离线的还是在线的，它本质上是通过浏览器呈现到用户面前的网页，在手机上模拟得像app，网页的缺陷它无可避免。1.软、硬件的支撑问题，现在早已不是问题，这里讲出是由于2012年左右当时H5火起来时，我在FF公司看到宣讲H5时，当时许多的手机依然无法支持h5，几年过去了这个问题基本不存在了；2.性能问题，这才是H5最大的问题，原生开发对性能的支持远超H5，在用户体验上，H5的app绝对是占据下风的，app反应速度、流畅度等；3.功能问题，对某些硬件摄像头、陀螺仪、麦克风等硬件支持较差，频繁调用这些硬件，H5不容易扩展，调用速度也不如人意。
& & &&总结：纯H5 app适合小游戏、媒体、视频、营销产品、介绍等功能，大部分大型app属于原生、H5混合的hybird app。
& & &H5话题的延伸。年H5大火，有许多人认为可以替换原生开发，成为一种“write once,run anywhere”的开发模式，但是在许多公司的案例中就遭遇了失败，但是仅仅过去了3-4年，硬件设备的更新，软件的支持，H5又一次以不同的面目再一次火起来。这个过程十分让人唏嘘。HTML5已经出来很多年了，早在2010年，乔布斯在封杀Flash的言论中，就预言HTML5将取代Flash成为下一波技术浪潮。就算不关心技术的朋友，去翻翻手机也能感受到在pc端一直以来占据统治地位的Flash在手机端几乎不见踪影，这是从2010年以来苹果公司与Adobe公司的战争开始，苹果背后无数开发人员支持研发HTML5技术，让HTML5技术得以普及开来。2011年Adobe自己也放弃了Flash移动端的研发工作，HTML5已经被移动浏览器广泛支持，Flash已经落后于时代了。很多大公司都在推动HTML5的发展，但是也有滑铁卢，Facebook的扎克伯格是最惨痛的教训，他想要用HTML5的web
app来打破ios和android的垄断，实用HTML5来代替原生App。在这件事上facebook失败了，具体表现在2013年前facebook在移动端的产品的市场表现非常一般，最后无奈宣布回归原生app的开发。Facebook在html5的试错大大打击了HTML5的实用性，但是HTML5自身的厚积薄发还是让这项技术没有没落。
&&&&&手机硬件的提升和HTML5本身的完善，使得基于HTML5的应用表现更好，iPhone对HTML5的支持更加完善，Google也完成了移动端Chrome浏览器向Chromiumnie内核的切换，大幅提升对HTML支持。很多基于HTML5的应用都在试图替代原生app，但是由于技术限制，用户体验远远不如原生app，但是某些方面HTML5提供了比原生App更好的体验，但这种体验的基础不是单纯的替代原生App，而是做一些最适合HTML5的细分应用，比如小游戏、媒体和营销类的产品。这些细分的方向能够最大程度发挥HTML5跨平台、开发成本低、开发速度快的优点，在整体产品体验上远超过原生app。HTML5和原生app并不是对立的，反而原生app需要HTML5去解决一些核心的问题，让整个移动市场更有效率。很多公司在努力推动HTML5技术，但是让HTML5重新焕发生机的是微信，利用朋友圈的私密社交，以及HTML5自身的跨平台、低成本开发、速度快等特性，不少公司利用HTML5技术在朋友圈做了一次又一次的营销。微信本身没有在HTML5技术上有什么创造性的推动，而是在HTML5的应用场景上做出了自己的不同尝试，形成了附着微信这个超级app的HTML5应用场景。HTML5的优点跨平台、低成本开发、开发速度快等优点不是最终站稳市场的根源，最终成就它的还是它自身比原生app更加优秀的特质，比如小游戏、媒体、视频、营销产品等等。目前许多app都采用hybird
app 开发（微信、支付宝等等），在h5适合的地方展示，在其他地方使用原生开发，以规避缺点，发扬优势。
三、react-native框架
& & &介绍react-native之前，需要先提下react，react 是facebook在2013年开源的网站ui开发的js库，react-native是用react 进行原生app开发的框架，让广大开发者使用js和react开发应用，提倡组件化开发。react-native提供一个个封装好的组件让开发者使用，也可以相关嵌套形成新的组件。使用react-native可以维护多种平台（Web，Android和IOS）的同一份逻辑核心代码来创建原生app。从代码上看结构类似，细节有差别，facebook强调的是“learn
once,write everywhere”，应用前端使用js和React来开发不同平台的ui，下层核心模块编写复用业务逻辑代码，提高应用的开发效率。
& & &react-native的原理。react-native的优点和H5类似，跨平台、低成本开发、开发速度快、动态发布、一套类似代码维护三个平台。代码结构如下图：
程序结构上，有两个工程分别是ios 、android，编译后回在相应文件夹中生成apk和app，界面代码是选中的index.android.js和index.ios.js，右侧的JS代码在这两个JS文件中几乎一模一样。
它与web app很类似，但是绝对不是web app，查看开源代码，你不会发现webview的使用，也就是本质上react-native的app不是web app 或者hybird app，而是原生控件。那它是怎么实现的呢，react-native的原理如下图：
原理上看react-native在js端和java端互相有个映射关系，通过两端的配置表来实现，java端和js端持有同一张表，通信时靠这张表的各个条目的对应进行的。上面提到了facebook实现了组件让开发者调用，就是通过js的配置表调取原生控件，java调用js也是类似的情况。所以当我们使用复杂控件时，可以自己实现java代码，添加入配置表中，即可自定义心新的映射关系，让我们js调用自定义的复杂控件
, 当然web 、ios、androi需要实现不同的控件代码，只是js端的调用代码一样或者类似。
react-native的优点：不用webview,摆脱了webview的交互和性能问题；有较强的扩展性，java端提供了基础控件，js可以自由组合使用也可以自定义组合控件；
react-native的缺点：组件不全，第三方组件也不全，遇到某些特殊功能，需要花大力气写；性能方面也无法媲美原生，还是有一些损耗，特别是交换大数据时；IOS版本略好，androi发展较慢；ios和android代码并非通用，有可能需要维护两套代码或者在代码中做一些判断；开发人员还是需要会原生开发，不然自定义组件无法编码；
个人感受，react-native不是万能药，只是一种高效的解决方案，不要期望它解决所有的问题，要不要使用需要场景衡量；客户端转开发react-native感觉比较简单，比较JS大部分人都有基础，前端人员开发react-native理解原生部分的代码应该十分困难；相比原生海量的第三方控件和第三方包，react-native大部分道路还得靠自己摸索；不同端的代码风格和结构大体类似，但具体标签可能会不一样；目前得到经验是IOS版本比较稳定，android版本还不太成熟，android
版本2015年下半年发布，一直在0.*版本上更新，android1.0版本还没有发布；把把facebook的第三方包网络连接包okhttp和图片下载解析包fresco等一起封装进结果，造成包增加7、8M，但据了解这是可以修改的；只支持IOS7以上和android4.1以上机型，这应该不成问题，比较其他属于少数；听说qzone使用了react-native，但是crash率前10，react-native占8个，前5全是react-native，但是我一朋友项目使用过react-native，虽然有坑，但是不会有如此多
总结：新技术，开发环境和代码编码方面都比较艰涩，有可能有很多坑，但是在界面简单，三端都要求，开发成本需要降低情况下可以使用react-native。
最近在学习react-native，以后可能会有新感受，公司内部最近可以找个项目实战一下。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：4818次
排名：千里之外手机APP开发纠结使用React Native还是ionic - 跟谁学
搜索你想学的科目、老师试试，例如“数学”搜索吉安
&&手机APP开发纠结使用React Native还是ionic看了一些案例，使用ionic1在IOS比较流畅，安卓上也还可以动画会不那么自然，但是能用。 但是我不想用ionic1，因为PC端我想上angular2 所以想直接用ionic2，但是ionic2还是是beta 所以看了些react native，不知道RN有哪些坑。 我这个APP属于理财的，参考精融汇APP angular在PC端试过写了个 员工列表的单页，没有深入了。 react 看了入门教程而已。 目前给我的安排是： 跨平台，项目2个月内搞定IOS和android追风jackwang
看看你是想要开发效率，跨平台还是，要体验了。用过ionic开发。在安卓上尤其是低端机上。表现确实不如人意。
RN在安卓上还是一个坑！但是IOS的体验已经不错了。理财APP里面涉及图表比较多。图表类在WEB上有很好的JS库去支持了，一般用到canvas。如果想快速出品的话，IOINC的确是一个不错的选择。当然，如果想以后有更好的用户体验还是选择原生吧！
你熟悉angular，那ionic可能更适合你，ionic、rn都是基于js框架实现，又都是用node.js驱动，所以，不考虑底层实现的话，纯就使用上来说，两者对上层开发者来说大同小异。RN确实还有很多坑，但ionic也不见得完美到哪去，一句话，你熟悉什么就用什么，在各平台上的流畅度我不建议你作为参考点，跨平台应用的性能在现阶段，不要要求太高，以完成功能为重点。
哈哈哈，当然用swift咯呵呵，用原生有错？用rn碰到坑了就呵呵了
相关问题大家都在看最新提问
关注我们官方微信关于跟谁学服务支持帮助中心使用&React&Native&开发原生&App&各种疑问汇总
OSCHINA 第 80 期高手问答（6月29日- 7月5日）我们请来了 &（王利华）为大家解答关于
Native 开发原生 App
方面的问题。
原文地址：http://www.oschina.net/question/314&
王利华， ，携程框架研发部，无线框架高级研发工程师，主要负责携程
HTML5 框架 UI 组件开发及其性能优化、React-Native 的研究和探索、Canvas-UI 的相关研究、Node.js
相关系统研发；擅长 Node.js、JavaScript 以及前后端分离实践。 年，在高德地图研发中心工作，负责
JavaScript API 研发和布道以及 Web App 的 Node.js 服务端研发。热爱生活，热爱开源。
React Native一经推出，就获得众多开发者的关注。React Native
使得 JavaScript 能够开发真正的 APP, 它不仅有着与原生应用相媲美的体验，同时拥有着 web
应用的优势和开发效率。React Native 鲜明的特点就是组件化，一个应用都是多个组件构成；同时为了更高的效率，React
Native 采用了内存 Dom tree Diff 计算，优化了 view 的渲染效率和体验。使用 JavaScript
开发跨终端的应用是未来的趋势。
7 月 18 日杭州源创会的第五个主题就是由 带来《使用 React Native 开发原生
App》主题演讲，杭州的朋友可以点击这里报名参加活动。
：React-Native请问是基于什么设计模式开发的？
：设计模式硬套倒也想不出，基本3个层面：（1）语言层面：js
& jsx，这个对前端人员比较熟悉。（2）核心层面：使用javascript内核引擎 ＋ oc原生组件
（3）使用组件开发app，就像搭积木一样。
：React-Native一般使用什么软件工具开发？？
：这个xcode
：这个需要什么基础？还有就是以后的发展您是怎么看的？会代替原生还是和原生相辅相成？
：（1）基础：前端基础，例如：js、jsx、flexbox以及熟悉ios的组件即可。（2）前景：现在最大的优势就是热更新；对于需要及时更新的部分，可以采用react－native（3）目前：相辅相成；未来的话，我希望更多是大部分替代原生
：组件的属性和方法够多够灵活吗？
React-Native 的第三方库还不是很丰富，需要 oc
的支持和暴露，当然这只是目前。组件的方法不是很多，但是很好的处理了一个UI组件的渲染生命周期，足以控制组件；组件可以自定义和扩展，所以属性是可以灵活使用。具体的可以关注3个比较重要的属性：props、state、ref.
：哦，目前国内还没有系统和教程，等有了系统的教程我也学习一下，可以先试用试用，毕竟是新出来的。
：这里有个入门教程可以看一下：/vczero/react-native-lession
：目前react-native对于android的支持还没有，预计是十月份。我也大概看了下ios的demo效果：js服务端修改，客户端（app）立马显示效果。我想知道的是我们现有app都是用的原生组件来编写，如果后续要进行业务重构的话，react-native可以重构哪类业务，有什么弊端和优点？
：(1)可以将已经封装的原生组件暴露出来给React-Native使用；(2)因为Recat-Native还是有些坑的，哪一门技术和语言没坑呢，踩完就好，可以像天猫一样，重构营销页面开始（更新方便）。这样呢，既能熟悉踩坑熟悉api，又能渐渐重构。
：对于跨平台应用来说，react
是否可以替代目前的开发框架，要实现真正意义上的统一，还有哪些关键点需要解决？
：这个统一谈不上了，至少react-native还不支持android，因为倒不是android的支持是件多么难的事儿，主要是因为android平台的不统一，定制成分较高，引擎的性能参差不齐。跨平台而言，更多强调的是js能够编写跨平台应用，体验也能够和原生相媲美。关键React-Native的发展还需要facebook团队在android上的发力，同时也需要更多的同仁将oc的接口和功能暴露处理，以弥补一些不足。
：phonegap
能开发原生应用吗？
：所有原生应用功能都是可以通过phonegap扩展调用的。
：想知道，这个与
phonegap 的比较，包括开发效率，学习曲线，用户体验，工具的完善程度等
：phonegap 和
react-native 还是不同。react-native 内部在 iOS7 版本以上采用的是 js core engine
解析的，在版本上是降级使用 webview。React-Native 针对前端开发者上手难度应该不是很大，主要熟悉 flexbox
布局、jsx 语法、react-native api。
：我所知道的是 react
现在的学习资料百度谷歌能够搜到的都是 iOS 的，有许多资料顺便提了下 Android 没有像 iOS 那么仔细
：React-Native 目前主推的是 iOS，后面我们一同期待
android 吧
：您好。我想问一下，目前使用 React-Native
有那些局限，React-Native 更适合开发那些应用？
：React-Native
还是有些坑需要踩的，现在 github 上也能看到 Recat-Native 源码库都有不少开发者在提bug，更新的也很快。目前
React-Native 做一些内部 app 还是可以的；目前对动画的支持不是很高，这个可以在一些 app
中做一些优雅降级；更适合开发那些动画效果要求不是忒高、组件功能要求相对较少（如果团队中有 oc 的开发者可以忽略）的
app。很多坑，我们团队现在都在踩。
：React-Native
实现的应用能否实现增量更新？如果能，苹果商店会限制此类应用吗？
：可以实现增量更新；大家都知道天猫已经上了一个活动页，至少目前来看，apple
是不会限制的。相信大公司应该有大公司的胸怀。
：React-Native 是在 React
的基础上设计的（也许描述的不对），对于前端来说，纯业务组建（不涉及 ui，仅仅是逻辑）能否在 ios，android，web
：你说的很对，react-native 是 react
基础上设计的，这是当时 facebook 两个团队做的事情，reactjs 先出来的。如果是语法层面，不设计
UI，是可以共享的。android 的话，我们一起期待吧。、
：从官方的视频看到，React Native 提倡的是 Learn
once, write anywhere，这不是是预示着多个平台还得每个写一遍，不知道共享度能有多少
：目前我们框架团队正在努力做这件事。希望打通
react-native和react.
：React-Native 和 react 的代码可以复用吗
：目前我们团队也在做这件事，想要完全的复用还是很难的。需要做就是将一个方向大通，比如
react 转native。那么就会遇到如需要将 div、img 等封装成 react-native 的 View、Image
组件；同时 css 样式的改变和css-layout
的打通也是比较耗时的工作。后期，我会在大会上分享我们团队正在做的这件事。
：最近由于工作原因也开始关注类似的终端开发,最开始了解的是sencha
touch,能不能做一下两者的对比?
：这个可比性不大呀。sencha touch 就像 jquery
mobile 一样的框架支持 h5，可以配合 phonegap 一起使用；react-native 可以是开发原生的 app，是在
native 层面。
：请问 React-Native
的目前推广和应用局限性有哪些？谢谢~
：React-Native技术的推广可以从公司内存app试水；边踩坑边开发，React-Native的局限性除了平台因素，就是对开发者要求较高。当然开发效率来说，应该是很快的。如果团队中有object-c成员，相对而言，上手就会轻松很多
：Dom tree Diff 是什么鬼？
具体是怎么运算的呢？ 尤其是提高效率上&
：举个栗子：以前我们需要给一个评论点赞，需要更新该评论下的赞，赞的用户昵称信息，我们暂且叫做视图重渲染吧，比如使用jquery,
$('#container').empty().....render()。那么react做了一件什么事呢？react构建的是虚拟的dom，通过内部属性的改变通知虚拟dom进行内存计算（与旧属性的虚拟dom进行一次比较，即diff），将计算后的结果直接更新在界面上，不要我们手动管理视图。内存换效率。
具体的可以看下这篇文章 https://facebook.github.io/react/docs/glossary.html
：React-Native开发出来的app和原生的app的性能有区别吗?
：react-native开发效率高于
react-native效率和体验高于react-native整体性能跟native差距不大
：我想问下，react native
应该是支持热跟新吧，就是通过服务端来控制界面，这样就不要老提交苹果审核了，但是我不确定支持吗？还有就是他和原生开发有什么区别？原生能做的它都可以吗？
：远程的热更新是ok的，因为执行的是jsbundle，jsbundle是打包完成的js文件；原生做的它都可以么？－－至少可以通过各种途径去实现，React-Native
iOS版本目前也是公测中。
Native我们公司也一直再跟进，刚开源就搞起了，现在在产品中使用了，因为怕被拒，所以没有使用动态发布。目前来看只适合做UI，复杂的业务逻辑都得需要Native的配合，使用过程中发现Native中业务的变化无法主动告知JS端，变通做法是JS端不断轮询，不知道大神有何高见？
：React-Native做业务逻辑还是很ok的，你可以尝试下。我们这边开发的内部应用也在使用React-Native,看了下代码，基本的逻辑完全是可以的
使用sendDeviceEventWithName应该可以解决问题，具体的可以看这：/facebook/react-native/search?utf8=✓&q=sendDeviceEventWithName&type=Code&
想了解更多 React Native？赶紧报名杭州源创会吧：http://www.oschina.net/question/713&
原文地址：
http://www.oschina.net/question/314&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。iOS程序员的React Native开发工具集
当前位置： > 公众号文章 >
> iOS程序员的React Native开发工具集
iOS程序员的React Native开发工具集
本文整理了React Native iOS开发过程中有用的工具、服务、测试、库以及网站等。工具你可以选择不同的开发环境：DECO、EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO XDE，不推荐使用DECOSnowflake、Pepperoni和Ignite是React Native iOS初学者的工具包f8App主要提供了着手React Native开发的新手教程React Developer Tools是一款Chrome Extension，可以检查React组件层如果你需要本地playground，可以使用React Native StorybookCodePush是另一款节省时间的利器，基于云服务可以直接在用户设备上部署APP的更新Npm desktop manager可轻松添加、移除以及更新全局和本地packagesSentry是一个跨平台的崩溃报告和聚合工具ESLint和Flow可帮你编写高质量的正确代码DevTools for Redux让你实时的监控Redux状态树的Store，有助于热重载和自定义UI库React Native开发必不可少的跨平台UI组件库-NativeBaseA React Native Apple HealthKit--与Apple HealthKit数据交互的桥接模块儿Styled Component让你在React或React-native组件里面编写css的库React Color收集了来自Sketch, Photoshop, Chrome, Github, Twitter以及Material Design等处的颜色选择器Native Navigation和React Native Router Flux用于页面间的跳转Axios用于Http RequestRedux状态管理库用来确保 state 变化的可预测性测试快速可靠的React Native测试库--Jest &网站React.Rocks提供了大量优秀的ReactNative示例React Native github页面Made with React收集了大量使用React Native技术的网站和应用程序Start React可免费下载React.js主题和模板ReactEx UI提供了大量的React Native组件我最喜欢的React Native网站&高质量的React Native Newsletter &Facebook React Native page页面ReactNativeExpress--一份帮助开发者开始React Native学习的指南&视频React Conf 2017React Native Tutorial—Build Apps With React Native服务SegmentIO’s Analytics SDK的React Native封装Intercom.io的React Native封装&四款React Native beta版测试工具：Testfairy、HockeyApp、Buddybuild以及Applivery，个人比较喜欢用Buddybuild
郑重提醒：本文《iOS程序员的React Native开发工具集》来源于微信公众号“”，请勿轻信投资理财、广告软文等有可能损害您利益的相关信息！
微信号功能介绍CocoaChina苹果开发中文社区官方微信，提供教程资源、app推广营销、招聘、外包及培训信息、各类沙龙交流活动以及更多开发者服务。 关注该公众号 微信扫描二维码关注
该公众号的更多微文
1234567891011121314151617181920