OSCHINA 第 80 期高手问答(6月29日- 7月5日)我们请来了 @vczero (王利华)为大家解答关于 使用 React Native 开发原生 App 方面的问题。
原文地址:http://www.oschina.net/question/865233_241314
王利华,@vczero ,携程框架研发部,无线框架高级研发工程师,主要负责携程 HTML5 框架 UI 组件开发及其性能优化、React-Native 的研究和探索、Canvas-UI 的相关研究、Node.js 相关系统研发;擅长 Node.js、JavaScript 以及前后端分离实践。2013-2015 年,在高德地图研发中心工作,负责 JavaScript API 研发和布道以及 Web App 的 Node.js 服务端研发。热爱生活,热爱开源。
React Native一 经推出,就获得众多开发者的关注。React Native 使得 JavaScript 能够开发真正的 APP,它不仅有着与原生应用相媲美的体验,同时拥有着 web 应用的优势和开发效率。React Native 鲜明的特点就是组件化,一个应用都是多个组件构成;同时为了更高的效率,React Native 采用了内存 Dom tree Diff 计算,优化了 view 的渲染效率和体验。使用 JavaScript 开发跨终端的应用是未来的趋势。
7 月 18 日杭州源创会的第五个主题就是由@vczero 带来《使用 React Native 开发原生 App》主题演讲,杭州的朋友可以点击这里报名参加活动。
问答汇总
@Gogo58:React-Native请问是基于什么设计模式开发的?
@vczero:设计模式硬套倒也想不出,基本3个层面:(1)语言层面:js & jsx,这个对前端人员比较熟悉。(2)核心层面:使用javascript内核引擎 + oc原生组件 (3)使用组件开发app,就像搭积木一样。
@Gogo58:React-Native一般使用什么软件工具开发??
@vczero:这个xcode 即可了。
@铂金小狼:这个需要什么基础?还有就是以后的发展您是怎么看的?会代替原生还是和原生相辅相成?
@vczero:(1)基础:前端基础,例如:js、jsx、flexBox以及熟悉ios的组件即可。 (2)前景:现在最大的优势就是热更新;对于需要及时更新的部分,可以采用react-native (3)目前:相辅相成;未来的话,我希望更多是大部分替代原生
@vczero:目 前 React-Native 的第三方库还不是很丰富,需要 oc 的支持和暴露,当然这只是目前。组件的方法不是很多,但是很好的处理了一个UI组件的渲染生命周期,足以控制组件;组件可以自定义和扩展,所以属性是可以 灵活使用。具体的可以关注3个比较重要的属性:props、state、ref.
@郑州楚天科技:哦,目前国内还没有系统和教程,等有了系统的教程我也学习一下,可以先试用试用,毕竟是新出来的。
@vczero:这里有个入门教程可以看一下:https://github.com/vczero/react-native-lession
@暮夜:目前react-native对于android的支持还没有,预计是十月份。我也大概看了下ios的demo效果:js服务端修改,客户端(app)立 马显示效果。我想知道的是我们现有app都是用的原生组件来编写,如果后续要进行业务重构的话,react-native可以重构哪类业务,有什么弊端和 优点?
@vczero:(1)可以将已经封装的原生组件暴露出来给React-Native使用; (2)因为Recat-Native还是有些坑的,哪一门技术和语言没坑呢,踩完就好,可以像天猫一样,重构营销页面开始(更新方便)。这样呢,既能熟悉踩坑熟悉api,又能渐渐重构。
@jeffsui:对于跨平台应用来说,react 是否可以替代目前的开发框架,要实现真正意义上的统一,还有哪些关键点需要解决?
@vczero:这个统一谈不上了,至少react-native还不支持android,因为倒不是android的支持是件多么难的事儿,主要是因为android平 台的不统一,定制成分较高,引擎的性能参差不齐。跨平台而言,更多强调的是js能够编写跨平台应用,体验也能够和原生相媲美。关键React- Native的发展还需要facebook团队在android上的发力,同时也需要更多的同仁将oc的接口和功能暴露处理,以弥补一些不足。
@jeffsui:phonegap 能开发原生应用吗?
@Tom_Lin:想知道,这个与 phonegap 的比较,包括开发效率,学习曲线,用户体验,工具的完善程度等
@vczero:phonegap 和 react-native 还是不同。react-native 内部 在 iOS7 版本以上采用的是 js core engine 解析的,在版本上是降级使用 webview。React-Native 针对前端开发者上手难度应该不是很大,主要熟悉 flexBox 布局、 jsx 语法、react-native api。
@海诺者 :我所知道的是 react 现在的学习资料百度谷歌能够搜到的都是 iOS 的,有许多资料顺便提了下 Android 没有像 iOS 那么仔细
@vczero:React-Native 目前主推的是 iOS,后面我们一同期待 android 吧
@玛雅牛:您好。我想问一下,目前使用 React-Native 有那些局限,React-Native 更适合开发那些应用?
@vczero :React-Native 还是有些坑需要踩的,现在 github 上也能看到 Recat-Native 源码库都有不少 开发者在提bug,更新的也很快。目前 React-Native 做一些内部 app 还是可以的;目前对动画的支持不是很高,这个可以在一些 app 中做一些优雅降级;更适合开发那些动画效果要求不是忒高、组件功能要求相对较少(如果团队中有 oc 的开发者可以忽略)的 app。很多坑,我们团队现在都在踩。
@玛雅牛:React-Native 实现的应用能否实现增量更新?如果能,苹果商店会限制此类应用吗?
@vczero :可以实现增量更新;大家都知道天猫已经上了一个活动页,至少目前来看,apple 是不会限制的。相信大公司应该有大公司的胸怀。
@玛雅牛:React-Native 是在 React 的基础上设计的(也许描述的不对),对于前端来说,纯业务组建(不涉及 ui,仅仅是逻辑)能否在 ios,android,web 上共享?
@vczero:你说的很对,react-native 是 react 基础上设计的,这是当时 facebook 两个团队做的事情,reactjs 先出来的。如果是语法层面,不设计 UI,是可以共享的。android 的话,我们一起期待吧。、
@玛雅牛:从官方的视频看到,React Native 提倡的是 Learn once,write anywhere,这不是是预示着多个平台还得每个写一遍,不知道共享度能有多少
@vczero:目前我们框架团队正在努力做这件事。希望打通 react-native和react.
@云卷江南:React-Native 和 react 的代码可以复用吗
@vczero:目前我们团队也在做这件事,想要完全的复用还是很难的。需要做就是将一个方向大通,比如 react 转native。那么就会遇到如需要将 div、img 等封装成 react-native 的 View、Image 组件;同时 css 样式的改变和 css-layout 的打通也是比较耗时的工作。后期,我会在大会上分享我们团队正在做的这件事。
@撕裂噩梦:最近由于工作原因也开始关注类似的终端开发,最开始了解的是sencha touch,能不能做一下两者的对比?
@vczero:这个可比性不大呀。sencha touch 就像 jquery mobile 一样的框架支持 h5,可以配合 phonegap 一起使用;react-native 可以是开发原生的 app,是在 native 层面。
@weihongsheng:请问 React-Native 的目前推广和应用局限性有哪些?谢谢~
@vczero:React-Native技术的推广可以从公司内存app试水;边踩坑边开发,React-Native的局限性除了平台因素,就是对开发者要求较高。当然开发效率来说,应该是很快的。如果团队中有object-c成员,相对而言,上手就会轻松很多
@码农不会耕田:Dom tree Diff 是什么鬼? 具体是怎么运算的呢? 尤其是提高效率上
@vczero:举个栗子:以前我们需要给一个评论点赞,需要更新该评论下的赞,赞的用户昵称信息,我们暂且叫做视图重渲染吧,比如使用jquery,$('#container').empty().....render()。那么react做了一件什么事呢?react构建的是虚拟的dom,通过内 部属性的改变通知虚拟dom进行内存计算(与旧属性的虚拟dom进行一次比较,即diff),将计算后的结果直接更新在界面上,不要我们手动管理视图。内 存换效率。
具体的可以看下这篇文章 https://facebook.github.io/react/docs/glossary.html
@Injection:React-Native开发出来的app和原生的app的性能有区别吗?
@vczero:react-native开发效率高于native; react-native效率和体验高于hybird;react-native整体性能跟native差距不大
@never__more:我想问下,react native 应该是支持热跟新吧,就是通过服务端来控制界面,这样就不要老提交苹果审核了,但是我不确定支持吗?还有就是他和原生开发有什么区别?原生能做的它都可以吗?
@vczero:远程的热更新是ok的,因为执行的是jsbundle,jsbundle是打包完成的js文件;原生做的它都可以么?--至少可以通过各种途径去实现,React-Native iOS版本目前也是公测中。
@yuanshengweioo5:React Native我们公司也一直再跟进,刚开源就搞起了,现在在产品中使用了,因为怕被拒,所以没有使用动态发布。目前来看只适合做UI,复杂的业务逻辑都得 需要Native的配合,使用过程中发现Native中业务的变化无法主动告知JS端,变通做法是JS端不断轮询,不知道大神有何高见?
@vczero:React-Native做业务逻辑还是很ok的,你可以尝试下。我们这边开发的内部应用也在使用React-Native,看了下代码,基本的逻辑完全是可以的
使用sendDeviceEventWithName应该可以解决问题,具体的可以看 这:https://github.com/facebook/react-native/search?utf8=%E2%9C%93&q=sendDeviceEventWithName&type=Code
想了解更多 React Native?赶紧报名杭州源创会吧:http://www.oschina.net/question/1765084_240713