温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-08-09 17:46:11 来源:ITPUB博客 阅读:167 作者:EAWorld 栏目:移动开发

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

转载本文需注明出处:微信公众号EAWorld,违者必究。

引言:

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

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

一、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大概的发展历程如下

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


二、React-native使用案例 

RN较H5而言,有以下优势:

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

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也是具有优势的:

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

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还具有其特殊的背景优势

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

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

2.React-native本身是开源的,所有的源代码都是可以看到的。React-native从开源道现在就备受关注,React-native是历史上第一个没到正式版本,github却有7w+星星的项目。社区的组件得益库也已经比较丰富,社区活跃度比较高。对于很多复杂的组件,我们都不需要重复再去造轮子。

三、React-native使用案例 

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

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


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

当时公司在进行后台重构的同时,CTO也打算把APP使用React-native进行重构一遍。我一个做安卓的和两个ios的一起边学边做,摸着石头过河,我们用了三个月时间完成APP重构。主要功能涉及到聊天,微信分享等业务功能。然后因为特殊原因自己离开,APP由两个ios进行维护以及新功能迭代(自己在走之前教会ios同事安卓的打包和发布)。再到后来另一个ios同事也离开做前端去了,就剩下一个人。在公司需求少的情况下,他一个维护这个APP已经是绰绰有余(药店帮手)

案例二:使用RN效率提升

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


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

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

那么,企业选择RN的原因有哪些呢?我认为有如下几点:

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

  1. 使用React-native之后,代码更新方便以此来满足紧急。当业务需求少的时候,APP较少的人员就可以维护。

  2. 隐藏价值:如果公司使用React技术栈,那么前端人员经过较短的学习时间就可以快速参与到APP开发当中,同样APP开发人员经过较短时间学习就可以进入前端开发中,这样极大的对人才进行了复用。这就是为什么那么多小公司如此钟爱使用React-native技术进行APP开发。极大的缩短了开发周期短。

  3. 同时也有一部分大公司使用React-native和原生进行混合开发,React-native页面嵌在原生里面。我个人觉得他们这做的原因是:对于经常需求修改的页面使用H5体验又不好,使用原生热更新比较困难,结合这两点,React-native就理所当然的成了最好的选择。

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

当然,也不能盲目选择,应该辩证的看待RN。我们上面列举了那么多React-native的优点,但是并不代表我们就能完完全全抛弃原生。React-native并不是一个完美的技术方案,它也有其自身的缺点。所以对于React-native技术选择,需要企业考虑学习成本,开发成本,维护成本,以及企业自身的业务等等实际情况来评估是否选择React-native这门技术。

四、展望

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

Facebook现在的口号是:

Learn once,Write anywhere。

我认为会有那么一天实现

Write once,run anywhere。

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

于作者范涛,普元React-native开发工程师,毕业于长沙理工大学,专注于使用React-native开发APP,负责太平洋保险APP内部保险箱务RN改造业务。

关于EAWorld:微服务,DevOps,数据治理,移动架构原创技术分享。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI