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使用案例 

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+星星的项目。社区的组件得益库也已经比较丰富,社区活跃度比较高。对于很多复杂的组件,我们都不需要重复再去造轮子。三、React-native使用案例 

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

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

案例二:使用RN效率提升

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

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

  1. 使用React-native之后,代码更新方便以此来满足紧急。当业务需求少的时候,APP较少的人员就可以维护。
  2. 隐藏价值:如果公司使用React技术栈,那么前端人员经过较短的学习时间就可以快速参与到APP开发当中,同样APP开发人员经过较短时间学习就可以进入前端开发中,这样极大的对人才进行了复用。这就是为什么那么多小公司如此钟爱使用React-native技术进行APP开发。极大的缩短了开发周期短。
  3. 同时也有一部分大公司使用React-native和原生进行混合开发,React-native页面嵌在原生里面。我个人觉得他们这做的原因是:对于经常需求修改的页面使用H5体验又不好,使用原生热更新比较困难,结合这两点,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开发APP,负责太平洋保险APP内部保险箱务RN改造业务。

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

Image placeholder
来了
未设置
  83人点赞

没有讨论,发表一下自己的看法吧

推荐文章
用react怎么做移动端

用react怎么做移动端1、首先使用create-react-app脚手架创建react项目;2、然后打开index.html文件,在头部添加meta元数据,设置用户网页的可视区域宽度为设备的宽度,初

基于vue移动端UI框架有哪些?

vuxVUX(读音[v’ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。文档地址:https://doc.vux.li/zh-CN/演示地址:ht

TPC-C解析系列02_OceanBase如何做TPC-C测试

导语:蚂蚁金服自研数据库OceanBase登顶TPC-C引起业内广泛关注,为了更清楚的展示其中的技术细节,我们特意邀请OceanBase核心研发人员对本次测试进行技术解读,共包括五篇:1)TPC-C基

eclipse如何导入vue项目?

eclipse导入vue项目的方法1、首先,我们需要去导入的项目根目录下看一下,是否包含.project和.classpath文件,我这里是没有这两个文件的。这里要注意显示文件夹下的隐藏文件。2、由于

云端的生存之道,第 1 单元:将 Spring Boot 部署到 Kubernetes

初始化Kubernetes集群 第一步是初始化IBMCloud上的Kubernetes集群。IBMCloud可能需要几分钟时间来启动新的Kubernetes集群;因此,通过先执行初始化操作,可以在后台

云端的生存之道,第 2 单元:将 Spring Boot 应用程序连接到云托管的数据库

前提条件 本系列教程的第1部分,因为本教程直接以第1部分中的课程内容和完成的操作为基础。 一个IBMCloud帐户 云原生数据持久性 IBMCloud提供了许多可持久存储数据的选项。在本教程中,我

svn服务端安装、权限修改以及客户端的使用

欢迎加入前端交流群交流知识获取视频资料:749539640svn服务端安装、权限修改以及客户端的使用svn服务端、客户端、汉化包:下载地址1.安装服务器端程序(傻瓜式下一步。。下一步)选择服务器和管理

如何解决云中容器数据存储的移动性挑战?

如今,在云计算领域,越来越多的IT组织正在构建混合云和多云环境以支撑其业务运行。从容器的角度来看,我们知道,容器应用程序从一开始就内置了非常可观的可移动性、灵活性和效率。但是对于容器数据来说,它的移动

从reddit的一亿美元商业逆袭,看移动与PC产品的时代天堑

提起有“互联网头版”之称的reddit,你会联想到什么?想到这一网站上层出不穷的搞笑梗或meme图?还是程序员们经常制造出的各种有趣小发明?说起来在这个体量巨大、包容性极强、时刻制造着互联网新热点的论

VIM 光标的移动

移动光标 单位级 h向左一字符 j下一行 k上一行 l向右一字符 单词级 worW向右移动到下一单词开头 eorE向右移动到单词结尾 borB向左移动到单词开头 注意:所有小写单词都是以分词符

用户从0到5亿,中国移动 OneLink 架构演进之路

导语本文根据范良泽老师在2019年10月31日【第十一届中国系统架构师大会(SACC)】现场演讲内容整理而成。范良泽(中移物联网有限公司系统架构专家)2008年毕业于上海交通大学,曾供职于华为、Ope

大数据对移动应用开发的影响

大数据如何影响移动应用程序开发?目前,数据量正以前所未有的速度在增长。由于产生的总数据将在几年内跨越泽字节级别,因此更加需要进行大数据高级分析,并从庞大的数据池中获取有价值的信息。数字互联为移动应用开

中国移动智能硬件质量报告解读 分布式路由市场你了解多少?

今年6月份,中国移动终端实验室发布了《中国移动2019年智能硬件质量报告》(第一期),并于近日对该报告进行了相关解读,同时对优秀智能硬件产品进行颁奖。根据介绍,本次报告在内容上主要包括手机产品综合评测

低代码平台在移动开发方面的缺陷

本文由公众号EAWorld翻译发表,转载需注明出处。作者:TimoRailo 译者:白小白 原题:Whymostlow-codeplatformsfallshortonmobiledevelopmen

2019年你应该认真对待这7个移动安全威胁

如今,移动安全是每家公司最担心的问题——而且理由很充分:几乎所有员工现在都经常使用智能手机访问公司数据,这意味着让敏感信息不落入坏人之手是一个越来越复杂的难题。可以说,风险比以往任何时候都要高:根据波

校准产品质量,把控出海航向,腾讯WeTest《2019中国移动游戏质量白皮书》正式开放预约

每当步入一个新的年份,温故知新是我们常常做的事。对于不少游戏人来说,刚过去的2019年是一个新起点,也是一个修养生息、应对挑战的年份。这一年,国产网络游戏版号新政的落实,使得国内市场产品门槛更加抬高,

css怎么设置div不随滚动条移动?

css怎么设置div不随滚动条移动?把一个内容固定到某一个位置,相对与浏览器窗口进行定位就可以了。这里使用的是fixed定位。定位position通常有absolute绝对定位,relative相对定

如何在浏览器中获取 Production Mode 的 React 实例

https://github.com/LiuuY/Blog...在ProductionMode下,React并没有暴露其实例。无论什么原因如果你要获取的话可以参考以下方法。条件浏览器安装了ReactD

你真的了解 React 吗?这里有 50 个 React 面试问题

如果你是一位有理想的前端开发人员,并且正在准备面试,那么这篇文章就是为你准备的。本文收集了React面试中最常见的50大问题,这是一份理想的指南,让你为React相关的面试做好充分的准备工作。首先我

React Hooks 完全指南,读React作者博文感悟(2W字精华)

阅读facebook大佬:DanAbramov的文章颇有感悟大佬github地址https://github.com/gaearon 重点总结 useEffect是同步的 状态是捕获的当前props

如何调试react native项目

如何调试reactnative项目调试reactnative项目有两种方式:1、模拟器调试;2、真机调试。一、模拟器调试我们在Android模拟器上按快捷键Command⌘+M,在iOS模拟器上按快捷

如何使用react native

如何使用reactnative一、首先安装react-native-cli脚手架工具npminstall-greact-native-cli二、使用react-native-cli创建一个初始化的工程

1.0. 抽象工厂模式(Abstract Factory)

1.1.1.目的 在不指定具体类的情况下创建一系列相关或依赖对象。通常创建的类都实现相同的接口。抽象工厂的客户并不关心这些对象是如何创建的,它只是知道它们是如何一起运行的。 1.1.2.UML图 1

IBM Spectrum Protect 8.1.7在AIX7.1上的安装和配置

                                                本文作者: 谷铁柏摘要:    本文章主要讲述IBMSpectrumProtect8.1.7版本在AIX

如何运行一个react项目?

React起源于Facebook的内部项目,因为该公司对市场上所有JavaScriptMVC框架,都不满意,就决定自己写一套,用来架设Instagram的网站。做出来以后,发现这套东西很好用,就在20