OSC 第 80 期高手问答精粹 —— React Native

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 能开发原生应用吗？

@vczero：所有原生应用功能都是可以通过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