返回顶部
首页 > 资讯 > 精选 >React-native如何变为移动端的弄潮儿
  • 747
分享到

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

2023-06-05 02:06:16 747人浏览 泡泡鱼
摘要

转载本文需注明出处:微信公众号EAWorld,违者必究。引言:随着移动端对用户体验要求越来越友好,以及企业对代码能够跨平台执行的迫切需求。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,数据治理,移动架构原创技术分享。

--结束END--

本文标题: React-native如何变为移动端的弄潮儿

本文链接: https://lsjlt.com/news/240804.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • React-native如何变为移动端的弄潮儿
    转载本文需注明出处:微信公众号EAWorld,违者必究。引言:随着移动端对用户体验要求越来越友好,以及企业对代码能够跨平台执行的迫切需求。React-Native因此应运而生,从出生就一直备受关注。  开发周期的缩短,开...
    99+
    2023-06-05
  • 如何解析移动应用的跨平台开发工具Xamarin和React Native
    这篇文章跟大家分析一下“如何解析移动应用的跨平台开发工具Xamarin和React Native”。内容详细易懂,对“如何解析移动应用的跨平台开发工具Xamarin和React Native”感兴趣的朋友可以跟着小编的思路慢慢深入来阅读一下...
    99+
    2023-06-17
  • 如何解决React Native端口号修改的问题
    这篇文章主要为大家展示了“如何解决React Native端口号修改的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决React Native端口号修...
    99+
    2024-04-02
  • React如何引入antd-mobile和postcss搭建移动端
    这篇“React如何引入antd-mobile和postcss搭建移动端”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Rea...
    99+
    2023-07-04
  • 如何解决基于Vue/React项目移动端适配的问题
    这篇文章给大家分享的是有关如何解决基于Vue/React项目移动端适配的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。px2rem或postcss-px2rem在移动端中,为...
    99+
    2024-04-02
  • vue中如何实现移动端的scroll滚动
    这篇文章主要为大家展示了“vue中如何实现移动端的scroll滚动”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中如何实现移动端的scroll滚动”这篇文...
    99+
    2024-04-02
  • JS如何实现移动端实时监听输入框变化
    小编给大家分享一下JS如何实现移动端实时监听输入框变化,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!方案一以前做一个简单的模糊搜...
    99+
    2024-04-02
  • 如何在React Native开发中防止滑动过程中的误触
    目录一、问题背景二、解决思路三、总结整理一、问题背景 常见的情形是长列表中,在滑动过程中可能会出现误触到列表中的某一项的情形,对于用户使用非常不好的体验。 如下列表组件中,就会存在滑...
    99+
    2023-05-19
    React Native防止滑动误触 React Native滑动误触
  • Html5如何实现移动端、PC端的刮刮卡效果
    这篇文章将为大家详细讲解有关 Html5如何实现移动端、PC端的刮刮卡效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。先给大家展示下效果图:刮刮卡需求:每一位用户有三次...
    99+
    2024-04-02
  • 如何解决移动端吸顶fixbar的问题
    这篇文章主要介绍如何解决移动端吸顶fixbar的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!需求背景经常会有这样的需求,当页面滚动到某一个位置时,需要某个页面元素固定在屏幕顶部...
    99+
    2024-04-02
  • 如何解决移动端1px边框的问题
    这篇文章主要为大家展示了“如何解决移动端1px边框的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决移动端1px边框的问题”这篇文章吧。当然了,在这之...
    99+
    2024-04-02
  • css3如何解决移动端卡顿的问题
    这篇文章主要介绍css3如何解决移动端卡顿的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、使用css,jquery,canvas制作动画Canvas优点:性能好,强大,支持多数浏览器(除了IE6、IE7、IE...
    99+
    2023-06-08
  • 如何实现css移动端与pc端一样的acitve效果
    本篇内容主要讲解“如何实现css移动端与pc端一样的acitve效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何实现css移动端与pc端一样的acitve...
    99+
    2024-04-02
  • 如何解决移动端小图标模糊的问题
    这篇文章将为大家详细讲解有关如何解决移动端小图标模糊的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前言之前给大家讲到图片和文字垂直方向不对齐的问题,其中举的小例子中用到了一个小图标,这个小图标我用的...
    99+
    2023-06-08
  • 如何提升移动端响应式布局的性能?
    如何优化移动端响应式布局的性能? 移动端的响应式布局是现代网页设计中的重要因素。然而,随着设备和屏幕尺寸的不断增加,如何优化响应式布局的性能成为了一个迫切需要解决的问题。在本文中,我们将讨论一些方法和代码示例,帮助您优化移动端响...
    99+
    2024-01-29
    移动端 性能优化 响应式设计
  • 如何解决html5在移动端的屏幕适应问题
    这篇文章主要讲解了“如何解决html5在移动端的屏幕适应问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何解决html5在移动端的屏幕适应问题”吧! ...
    99+
    2024-04-02
  • 如何快速操作移动端Web页面的CSS3flex布局
    这篇文章将为大家详细讲解有关如何快速操作移动端Web页面的CSS3flex布局,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。 1...
    99+
    2024-04-02
  • 如何解决canvas在移动端绘制模糊的问题
    小编给大家分享一下如何解决canvas在移动端绘制模糊的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!由于一些移动端的兼容性原因,我们某个项目需要前端将pdf...
    99+
    2023-06-09
  • 如何解决移动端HTML5音频与视频的问题
    小编给大家分享一下如何解决移动端HTML5音频与视频的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!最近在研究用视频代替动画,用视频代替精灵动画,我们称这种视...
    99+
    2023-06-09
  • HTML如何实现移动端手指操控左右滑动的菜单
    这篇文章主要介绍HTML如何实现移动端手指操控左右滑动的菜单,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下<!DOCTYPE html> ...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作