我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

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如何变为移动端的弄潮儿

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

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,数据治理,移动架构原创技术分享。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

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

转载本文需注明出处:微信公众号EAWorld,违者必究。引言:随着移动端对用户体验要求越来越友好,以及企业对代码能够跨平台执行的迫切需求。React-Native因此应运而生,从出生就一直备受关注。 开发周期的缩短,开发成本和维护成本的降
2023-06-05

如何解析移动应用的跨平台开发工具Xamarin和React Native

这篇文章跟大家分析一下“如何解析移动应用的跨平台开发工具Xamarin和React Native”。内容详细易懂,对“如何解析移动应用的跨平台开发工具Xamarin和React Native”感兴趣的朋友可以跟着小编的思路慢慢深入来阅读一下
2023-06-17

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录