React-native如何变为移动端的弄潮儿

引言：

随着移动端对用户体验要求愈来愈友好，以及企业对代码可以跨平台执行的迫切需求。React-Native所以应运而生，从出生就一直备受关注。 

开发周期的缩短，开发成本和维护成本的下降，简单的代码热更新机制等优势被各大中小企业所钟爱。活跃的社区服务，以及丰富的三方插件都为React-Native注入了强大的生命力。本文将和你们一块儿找寻React-Native如此火热的起因。

1、React-native的发展

众所周知，React-native是由Facebook开源的一门技术。它的出现也是经历了种种尝试与摸索。Facebook在客户端2.0版本的时候，将主要页面使用web来实现。

网上得知：大约是在2011年，android还在2.3版本、ios还在5.0版本。当时手机硬件和软件优化相对比较差，用户体验一塌糊涂、怨声载道。Facebook无奈只能换成原生来实现。Facebook做为混合应用开发的先驱和探索者，此次失败为React-native的孕育种下了但愿种子。失败是成功之母，这句话说的一点没错。React-native想法的出现大约是在2013年一个极客大会上提出的。2014年7月Facebook本身开始实现并尝试使用该项技术，一直到2015年3月份，React-native的ios版本横空出如今世人眼中，同年9月，React-native的android版本也相继亮相世人。React-native大概的发展历程以下：

2、React-native使用案例

RN较H5而言，有如下优点：

1.页面加载速度：React-native号称是99%接近原生体验，它是写js代码，映射原生去渲染页面，页面渲染速度和原生是差很少的。可是H5就不同，特别依赖手机的硬件配置，ios对H5应用的支持还能够，可是安卓就差太多。安卓里面一些高端机型运行H5应用还能够，可是大部分机型都是会有点卡顿，尤为是像加载图片这种比较消耗资源的操做，H5的页面渲染速度和React-native就会有很明显的差异。

2.机型适配：例如H5对于如今的iPhone x刘海屏的适配就比较麻烦。还有对于不少安卓机型H5并不能作很好的适配。

3.动画效果：H5的动画是经过css和js实现的，对于一些复杂的动画实现相对是比价困难的，也是比较消耗内存的。React-native自身提供了实现动画的API，若是为了过于追求动画的流畅度，React-native还能够借助原生去实现，原生封装出来空间来供给React-native使用。

相对于原生来讲，RN也是具备优点的：

1.热更新：作移动开发的都知道，苹果的审核一直让你们很头疼。原生对于紧急的业务开发完成以后，还必须等待苹果的审核才能上线，这个时候React-native就体现出来它的优点，在不碰及原生代码的时候，能够直接经过热更新js代码来实现实时发布。React-native能够很好的支持线上业务功快速迭代和随时更新发布。

2.开发效率：React-native有20%的代码是原生代码，80%的代码为能够复用的js代码，这样大大缩短了开发周期，为企业节省了发开成本。

3.维护成本低：若是业务仅仅涉及到js代码的修改，在APP开发需求少的状况下，一个React-native工程师就能够很好的维护本该APP，同时又为企业节省了维护成本（即便刚开始该工程师不会原生开发，可是通过长时间的锻炼，或多或少都会一点）。

4. 学习成本低：React-native使得以前作前端的工程师能够快速的参与APP的开发，下降了学习成本。

5. 扩展性强：React-native提供了自定义原生控件以供js调用渲染的API，这使得它的扩展性极其强大。

此外，RN还具备其特殊的背景优点：

1.React-native做为Facebook的“亲儿子”，依靠这棵大树，让这个技术一直在不断的完善。

2.React-native自己是开源的，全部的源代码都是能够看到的。React-native从开源道如今就备受关注，React-native是历史上第一个没到正式版本，github却有7w+星星的项目。社区的组件得益库也已经比较丰富，社区活跃度比较高。对于不少复杂的组件，咱们都不须要重复再去造轮子。

3、React-native使用案例

案例一：三个月重构两个APP

当时公司在进行后台重构的同时，CTO也打算把APP使用React-native进行重构一遍。我一个作安卓的和两个ios的一块儿边学边作，摸着石头过河，咱们用了三个月时间完成APP重构。主要功能涉及到聊天，微信分享等业务功能。而后由于特殊缘由本身离开，APP由两个ios进行维护以及新功能迭代（本身在走以前教会ios同事安卓的打包和发布）。再到后来另外一个ios同事也离开作前端去了，就剩下一我的。在公司需求少的状况下，他一个维护这个APP已是绰绰有余（药店帮手）

案例二：使用RN效率提高

在两个APP开发人员，开发维护三个APP，而且公司的需求迭代特别频繁的背景下。若是没有使用React-native这个技术，公司一个月的需求我评估使用原生两我的最少须要两个月，甚至更长。可是使用React-native以后，任务是两我的均摊的，而且彼此的代码均可以看懂，这大大加快咱们的开发速度。

那么，企业选择RN的缘由有哪些呢？我认为有以下几点：

使用React-native以后，代码更新方便以此来知足紧急。当业务需求少的时候，APP较少的人员就能够维护。

隐藏价值：若是公司使用React技术栈，那么前端人员通过较短的学习时间就能够快速参与到APP开发当中，一样APP开发人员通过较短期学习就能够进入前端开发中，这样极大的对人才进行了复用。这就是为何那么多小公司如此钟爱使用React-native技术进行APP开发。极大的缩短了开发周期短。

同时也有一部分大公司使用React-native和原生进行混合开发，React-native页面嵌在原生里面。我我的以为他们这作的缘由是：对于常常需求修改的页面使用H5体验又很差，使用原生热更新比较困难，结合这两点，React-native就理所固然的成了最好的选择。

固然，也不能盲目选择，应该辩证的看待RN。咱们上面列举了那么多React-native的优势，可是并不表明咱们就能完彻底全抛弃原生。React-native并非一个完美的技术方案，它也有其自身的缺点。因此对于React-native技术选择，须要企业考虑学习成本，开发成本，维护成本，以及企业自身的业务等等实际状况来评估是否选择React-native这门技术。

4、展望

如今不少游戏APP都开始使用React-native来作壳。一些大公司也在逐步将一些业务使用React-native来替换。React-native依靠Facebook这个亲‘爸爸’，版本迭代特别快，也一直在不断完善中。

资料分享欢迎Android工程师朋友们加入安卓开发技术进阶互助：856328774免费提供安卓开发架构的资料（包括Fultter、高级UI、性能优化、架构师课程、 NDK、Kotlin、混合式开发（ReactNative+Weex）和一线互联网公司关于Android面试的题目汇总。

合理利用本身每一分每一秒的时间来学习提高本身，不要再用"没有时间“来掩饰本身思想上的懒惰！趁年轻，使劲拼，给将来的本身一个交代！