阅读更多

2顶
0踩

移动开发

转载新闻 使用React Native一年后的感受

2016-06-14 11:29 by 副主编 mengyidan1988 评论(0) 有15524人浏览
引用


当我在面试Discord的时候,技术主管Stanislav跟我说:
引用
React Native代表着未来。等它一发布,我们就会用它从零构建iOS应用。


作为一名原生iOS开发者,基于先前使用PhoneGap的经验,我非常怀疑使用Web技术构建移动应用的这种方式。但是当我学习并使用React Native一段时间之后,我非常庆幸我们做了这个决定。
开发效率

虽然iOS“团队”只有我自己一个人,但是iOS应用开发依然可以赶上Web和桌面应用开发闪电般的速度。Apple公司已经允许开发者使用JavaScriptCore进行应用的升级,而无需等待App Store的审核流程。这对于那些缺乏专业的iOS QA(质量保障)团队的小公司来说是非常便利的,因为iOS团队可以在发布新功能之后进行热更新。

使用React Native一年之后,我们的iOS开发周期明显变快了,这得益于很高的开发效率。比如:
  • 基于现有的前端架构,我们在两周之内就发布了V1.0的版本。
  • 相比于Auto Layout,基于Flexbox的样式可以节省一半的代码,并且更容易理解。
  • 使用Flux设计模式,iOS和Web应用共享了store和action的98%的代码。

性能

React Native在后台线程运行JavaScript并发送极小的代码到主线程中。事实证明,React Native相比于Objective-C或Swift编写的原生iOS应用来说有一些性能差异!
引用
Reactiflux小组的性能演示,该组有超过1.1万个会员 —— UI和JS线程大多数都是60FPS


然而,我们当初开始构建iOS应用时发现聊天滚动视图的性能并不令人满意,尤其是一些活跃的聊天分组。于是,我们决定使用ComponentKit构建聊天视图并编写必要的桥接代码代替原有的方案。当JS线程在完成一些繁重任务的时候,类库也无法提供原生那样流畅的动画(译注:之前动画是在JS线程执行,目前有人提交了一份代码,有望使用原生iOS动画接口),因此我们在抽屉侧滑动画上继续使用PopAnimation

注: 作者称该应用仅聊天视图和抽屉动画是原生代码实现的,其他均由React Native实现。

当React Native Android版本发布时,我们也尝试在Android设备上运行应用,但遗憾的是,我们遇到了一些性能问题,只好暂时放弃。Android开发主管Miguel是这样说的:
引用
很遗憾,不同Android设备的性能差异很大,这点明显落后于iOS。我们可以让应用运行地很快,但是性能——尤其是触摸事件,即使在更高端设备上也不能令人满意。并且在早期,由于React Native Android缺乏完善的功能,我们从产品原型过渡到成品应用比iOS花费了更多时间。


可用性



React Native让开发工作更简洁,使得开发者可以专注于每个新版本核心功能的开发。应用内自带的开发者菜单为我节省了大量的时间。

其中我最喜欢的一个功能是Show Inspector(审查工具),它可以即时展现交互视图的层级结构以及被选组件中所有必要的样式信息,这无疑是我用过的最棒的iOS审查工具。
社区

React Native项目每两周会发布一个新版本,其中包含一些新的特性以及修复的bug。这有利有弊,好比iOS几个月的稳定版本的发布,新的代码需要额外的时间进行升级,尤其是生产环境中的应用。因此,这也是到目前为止我们fork的React Native仓库只有四次主要升级的原因。

由于React Native还不太成熟,资源有限,也不完整。但随着它越来越流行,在不久之后一定能赶上其他成熟的技术。下面列出了一些实用的资源,我也经常在它的仓库上提问和获取最新的信息:

引用
译注:中文资源:React Native学习指南

总的来说,React Native很有潜力,它把我们团队的移动应用开发带上了一个新的台阶。像我这样原生的iOS开发者可以平滑地过渡到React Native,这有些出乎我的意料。同时,它也帮助我扩展职业技能,因为我也可以很轻松地向React编写的Web应用贡献代码了。
  • 大小: 7.5 MB
  • 大小: 126.8 KB
2
0
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 使用 React Native 一年后的感受

    当我在面试Discord的时候,技术主管Stanislav跟我说: React Native代表着未来。等它一发布,我们就会用它从零构建iOS应用...但是当我学习并使用React Native一段时间之后,我非常庆幸我们做了这个决定。 开发效率 ...

  • React Native 的未来与React Hooks

    近期和一些朋友聊到了 React-Native 的官方重构状态,而刚好近期发布的 0.59.x 系列版本中,上层设计出现了比较大的调整,结合体验之后的状态,就想聊聊 React-Native 的现状、新版本的升级体验、还有新支持的 React...

  • React Native 迁移的阵痛

    另外,新功能应该使用 React Native 还是 Native 开发也是个问题。尽管大家都知道,新功能应该尽可能地用 React Native 开发,但是有些时候,不得不用 Native 开发,因为很多模块还没有被迁移。那么当前要用 Native...

  • 全网最全 Flutter 与 React Native 深入对比分析

    在去年也整理过 《移动端跨平台开发的深度解析》 的对比文章,时隔一年之后,本篇将重新由 环境搭建、实现原理、编程开发、插件开发、编译运行、性能稳定、发展未来 等七个方面,对当前的 React Native 和 ...

  • React Native学习资料

    官网: React 官方网站:https://reactjs.org/ React Github网址:...React Native官方网站:https://facebook.github.io/react-native/ React Native Github网址:https://github.com/facebook/...

  • 值得推荐的React Native学习资料

    转:值得推荐的React Native学习资料 https://github.com/reactnativecn/react-native-guide React-Native学习指南 本指南汇集React-Native各类学习资源,给大家提供便利。指南正在不断的更新,大家有好的资源...

  • React Native指南汇集了各类react-native学习资源、开源App和组件

    React-Native学习指南 本指南汇集React-Native各类学习资源,给大家提供便利。指南正在不断的更新,大家有好的资源欢迎Pull Requests! 同时还有Awesome React Native系列 ...

  • 谈谈学习ReactNative那些资料

    学习ReactNative的现阶段,学习资料并不是那么的多。我们要寻找适合自己的资料才能有效的达到开发的要求。 * **构建 Facebook F8 2016 App / React Native 开发指南** http://f8-app.liaohuqiu.net/ ...

  • React-Native学习指南

    本指南汇集React-Native各类学习资源,给大家提供便利。指南正在不断的更新,大家有好的资源欢迎Pull Requests! 同时还有Awesome React Native系列https://github.com/jondot/awesome-react-native 目录 教程 ...

  • react-native 入门学习指南

    本指南汇集React-Native各类学习资源,给大家提供便利。指南正在不断的更新,大家有好的资源欢迎Pull Requests!同时还有Awesome React Native系列 https://github.com/jondot/awesome-react-native目录教程React ...

  • React Native学习指南

    本指南汇集React-Native各类学习资源,给大家提供便利。指南正在不断的更新,大家有好的资源欢迎Pull Requests!同时还有Awesome React Native系列 https://github.com/jondot/awesome-react-native目录教程React ...

  • H5、React Native、Native应用对比分析

    Native发展的一年,2016年必定是React Native蓬勃的一年!2016年React Native很可能成为最为成功的开源技术之一。为什么React Native这么火呢?那么React Native相比H5、Native又有哪些优势呢?使用React Native的...

  • React Native初探

    React Native初探 转自:博客园叶小钗 前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在...

  • 小米15工程固件 可以用于修改参数 修复tee损坏 修复底层分区 会用的下载

    资源描述: 机型代码:dada 1-----工程固件可以用于修改参数 开启diag端口。可以用于修复tee损坏以及修复底层分区。 2-----此固件是完整官方。不是第三方打包。请知悉 3-----此固件可以解锁bl后fast模式刷写。也可以底层深刷。也可以编程器写入 4-----请会用此固件 了解工程固件常识以及会用的朋友下载。 5-----个别高版本深刷需要授权才可以刷入。需要自己会刷写。 6------资源有可复制性。下载后不支持退。请考虑清楚在下载哦 工程资源常识可以参考博文:https://blog.csdn.net/u011283906/article/details/141815378 了解基本

  • 牙买加太阳能电池板检测7-YOLO(v5至v11)、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rar

    牙买加太阳能电池板检测7-YOLO(v5至v11)、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rar牙买加太阳能电池板检测-V11 2023-02-09 7:47 PM ============================= *与您的团队在计算机视觉项目上合作 *收集和组织图像 *了解和搜索非结构化图像数据 *注释,创建数据集 *导出,训练和部署计算机视觉模型 *使用主动学习随着时间的推移改善数据集 对于最先进的计算机视觉培训笔记本,您可以与此数据集一起使用 该数据集包含1406张图像。 太阳能板以可可格式注释。 将以下预处理应用于每个图像: *调整大小为640x640(拉伸) 没有应用图像增强技术。

  • JSP设计班级学生管理系统论文(2024ic).7z

    1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于计算机科学与技术等相关专业,更为适合;

  • 基于卷积神经网络的衣服识别系统详细文档+全部资料+优秀项目+源码.zip

    【资源说明】 基于卷积神经网络的衣服识别系统详细文档+全部资料+优秀项目+源码.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

  • 基于卷积神经网络的人脸识别项目详细文档+全部资料+优秀项目+源码.zip

    【资源说明】 基于卷积神经网络的人脸识别项目详细文档+全部资料+优秀项目+源码.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

  • 基于selenium与requests的暨南大学自动健康打卡程序资料齐全+详细文档+高分项目+源码.zip

    【资源说明】 基于selenium与requests的暨南大学自动健康打卡程序资料齐全+详细文档+高分项目+源码.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

Global site tag (gtag.js) - Google Analytics