使用React Native一年后的感受
转载自;http://www.dobest.me/blog/2016/06/12/%E4%BD%BF%E7%94%A8React%20Native%E4%B8%80%E5%B9%B4%E5%90%8E%E7%9A%84%E6%84%9F%E5%8F%97/
当我在面试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是这样说的:
可用性

React Native让开发工作更简洁,使得开发者可以专注于每个新版本核心功能的开发。应用内自带的开发者菜单为我节省了大量的时间。
其中我最喜欢的一个功能是Show Inspector(审查工具),它可以即时展现交互视图的层级结构以及被选组件中所有必要的样式信息,这无疑是我用过的最棒的iOS审查工具。
社区
React Native项目每两周会发布一个新版本,其中包含一些新的特性以及修复的bug。这有利有弊,好比iOS几个月的稳定版本的发布,新的代码需要额外的时间进行升级,尤其是生产环境中的应用。因此,这也是到目前为止我们fork的React Native仓库只有四次主要升级的原因。
由于React Native还不太成熟,资源有限,也不完整。但随着它越来越流行,在不久之后一定能赶上其他成熟的技术。下面列出了一些实用的资源,我也经常在它的仓库上提问和获取最新的信息:
Reactiflux上的#react-native。
js.coach—React Native开源组件列表。
awesome-react-native—大量的React Native文章、教程和示例。
译注:中文资源:React Native学习指南
总的来说,React Native很有潜力,它把我们团队的移动应用开发带上了一个新的台阶。像我这样原生的iOS开发者可以平滑地过渡到React Native,这有些出乎我的意料。同时,它也帮助我扩展职业技能,因为我也可以很轻松地向React编写的Web应用贡献代码了。
使用React Native一年后的感受的更多相关文章
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
- React Native指南汇集了各类react-native学习资源、开源App和组件
来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-N ...
- React Native 常用学习链接地址
Android Studio下载http://www.android-studio.org/ 第二章:Android Studio概述(一)http://ask.android-studio.org/ ...
- React Native入门指南
转载自:http://www.jianshu.com/p/b88944250b25 前言 React Native 诞生于 2015 年,名副其实的富二代,主要使命是为父出征,与 Apple 和 Go ...
- 写给移动开发者的 React Native 指南
本文原创版权归 简书 wingjay 所有,如有转载,请于文章篇头位置显示标注原创作者及出处,以示尊重! 作者:wingjay 出处:http://www.jianshu.com/p/b8894425 ...
- windows 7下React Native环境配置
React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...
- React Native:使用 JavaScript 构建原生应用
[转载] 本篇为联合翻译,译者:寸志,范洪春,kmokidd,姜天意 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生 ...
- React Native Changed the World? or Nothing.
RN是一个awesome的技术, facebook很有想法的团队创造出一项新的技术改变了native开发界. 但是RN本身又疑点重重, RN是为了解决什么问题而存在的? 在诞生了一年后, RN又解决了 ...
- React Native开发技术周报2
(1).资讯 1.React Native 0.22_rc版本发布 添加了热自动重载功能 (2).技术文章 1.用 React Native 设计的第一个 iOS 应用 我们想为用户设计一款移动端的应 ...
随机推荐
- OGRE HelloWorld
#include <OGRE/ExampleApplication.h> #include <OGRE/Ogre.h> class EnvMapApplication : pu ...
- [转]5个JavaScript面试题
问题1:闭包 考虑下面的代码: 1 2 3 4 5 6 var nodes = document.getElementsByTagName('button'); for (var i = 0; i & ...
- OC之消息基本概念
要说清楚消息这个话题,我们必须先来了解三个概念 Class, SEL, IMP,它们在 objc/objc.h 中定义: typedef struct objc_class *Class; typed ...
- JavaScript的一些流行的框架
1.Underscore.js 扩展了很多原生js没有的方法,如集合 数组 对象 函数的一些基础和衍生方法,简单实用!2.Backbone.js 前段js代码的一个MVC框架,正在学习来着
- php笔记(一)面向对象编程
<?php //定义一个类 class Car { var $name = '汽车'; function getName() { return $this->name; } } //实例化 ...
- 【java学习】Servlet简单的表单程序(一)
此文用于java学习,在此小记. 在此小Demo中使用到了Servlet,所以有必要了解一下Servlet的相关知识.(Servlet的相关知识摘抄自http://blog.csdn.net/jiuq ...
- 元素NULL判断
元素取值val() val()方法主要用来获取form元素的值像input select textarea.在对select取值的时候当没有option被选定时val()会返回null,至少一个opt ...
- 获取Camera 支持视频的尺寸
<uses-permission android:name="android.permission.CAMERA" > </uses-permission> ...
- toggle的使用心得
点击同一个标签可以实现不同效果 或者几个效果 以前一般都是if 判断的 逻辑还有判断比较繁琐 看啦手册后 发现这个功能可以不用判断的自动循环点击事件 比以前的简单好用 主要用法:$("td& ...
- SELinux Policy Macros
参考:http://selinuxproject.org/page/NB_RefPolicy Directory Macros macro expansion getattr_dir_perms ge ...