Hybrid App 和 React Native 开发那点事

简介：Hybrid App（混合模式移动应用）开发是指介于Web-app、Native-App这两者之间的一种开发模式，兼具「Native App 良好用户交互体验的优势」和「Web App 跨平台开发的优势」。很多人都知道，React Native 是 Facebook 开源的框架，可以直接用 Javascript 开发原生的APP，本文则会围绕开发中的具体实践问题进行讨论。

此前，我们在多篇文章中提到过 React Native，本次移动精英开发俱乐部又专门围绕 Hybrid App 和 React Native 进行更加深入的讨论，希望能够给我们的开发者同学，提供一些建议。文章系朱雅丽整理， IT 运维管理平台 OneAPM 负责审校。以下为讨论内容：

主持人－东辉：大家好，今天我们的主题是 Hybrid App 和 React Native，欢迎大家踊跃进行发言。

陈伟鹏－雅特iOS：我想知道用了 React Native 的同学，对这种技术的态度和评价？

郭镫鸿：貌似携程、平安科技还有天猫都在使用 React Native，说明还是有市场的。

主持人－东辉：React Native 在 Android 上的表现貌似不太好，坑比较多吧？

龙虾：React Native 的首次加载很慢，有缓存就好一些，其他的还可以，落地的难度就是不知道该客户端开发做，还是前端做。

郭镫鸿：React Native 有效解决了H5的性功能障碍问题，这点很不错。就像 React Native 的理念：leaReact Native once, write anywhere .

James：个人理解，React Native 的推出应该是为了统一移动端的开发模式。

罗飞：大家可以分享一下自己公司用 Hybrid 或 React Native 的现状，都是怎么用的？

利炳根：现状就是：大部分都可以用 React Native 做完，只有少部分需要原生支持。当然，也和我们的项目有关。因为我们现在做得功能都比较简单，我们主要工作都在处理一个问题：一个平台上显示好好的东西，同样的代码，在另一个平台上，就不行了。然后还有就是对不同的屏幕的适配，目前还没遇到特别难的东西，今天看看有没有人用来做大型成熟项目？学习一下经验。

Rory He：React Native 需要技术的学习成本其实更高一些。

frankphper：前端是不是因为 React Native 才变成「钱」端？

Kiss小锦：前几天看到阿里做了开源，效果参考淘宝、聚划算品牌团。https://github.com/alibaba/LuaViewSDK 。

其实，移动 APP 开发领域，要极致体验发布就不灵活（Native），要灵活发布就没有极致体验（H5）。有没有一种技术方案可以兼顾极致的体验和灵活的发布？ LuaView 可以完美解决上述两个问题，不过需要学习 lua 语言。

主持人－东辉：大家也可以说实践、使用场景以及收益等问题。

Kiss小锦：使用场景一般是电商做大促活动需要灵活上线。

利炳根：http://reactnative.cn/docs/0.21/getting-started.html 大家可以看看这里的文档，再买本入门书，一般的项目开发就差不多了。

杜鹏飞千锋安卓：直接用 WebView 和普通网页不更简单么？

郭镫鸿：如果那样的话，性能和功能都有问题。

Shawn：我认为目前 Hybrid 开发形式有三种：

1.原生开发一部分+H5开发一部分，通过 WebView 桥接；

1. 纯 H5 开发，需要本地功能时通过第三方打包工具实现 如 HBuilder+ ；
2. 用 H5 或 JS 开发，但最终编译成 Native 应用，如 ReactNative、APICloud、Cocos2d-js、Unity3D-js 等。还有种形式是 Webview+Runtime ，一般用在H5游戏加速，像腾讯 X5 浏览器、UC 等都内置了 Runtime；

jia_dongxu：可以用 cordova+ionic angular。v2 优化不少移动端，angular 也要出2了，据说优化移动，不知道 ionic2 和 angular2 正式版性能会不会提高很多？

真哥：不过，ionic 在安卓手机上性能不好。

郭镫鸿：ionic 有点卡，iOS 相对好些。

Shawn：移动端性能是个问题，传统的PC 端方案还是不要用在手机上了。

柴明昆：貌似Angular 2.0对Native Apps 的支持和渲染是基于 React Native 的，我们也是某个模块改动需求频繁，最近正在研究评估使用 React-Native。

James：ionic2 nightly 已经有了，ionic2 完全采用angularjs2 ，用的 typescript es6，在性能会很大改善 。angularjs2 对移动端也进行了优化，React Native 目前应该都是大厂或者小范围在使用。

真哥：对dom的操作太频繁，特别是双向数据绑定，不太现实。如果你需要快速迭代，可以考虑React Native，如果特别注重体验和性能，建议用原生。

利炳根：前段时间，有外包公司专门推 React Native，号称基本的东西都已经封装了一遍，如果真的能做到他们宣称的那个程度，开发一般的 APP 超级快。很多一般的 APP，核心的竞争力是业务上的，对 APP 本身倒是不在乎，怎么快怎么来。当然，大家未必乐意做这类开发。

之前有公司，做了一年快速迭代，找到了真的有用户愿意用的业务，才开始优化的，一开始优化，优化完发现没人用，就是个悲剧。

窦静轩：关键是需要自定义，还是需要 Native 开发，所以不会出现谁替代谁。想跑起来一个React Native 的项目没那么容易，还需要基本的 Node 知识 。

我麻不拿到温网冠军就不改名字：这样会不会导致大部分公司愿意用 React Native，从而减少开发成本？

利炳根：当然，这是公司的悲剧，开发人员倒是无所谓的，公司倒了可以去下一家，反正自己技术练到了。我们两天前来的新同事，已经负责 React Native 的动画开发了，总得来说，上手还是很容易的。

Shawn：也就是说大公司追求用户体验，如果不计成本和开发效率的话，还是会用原生来做。

真哥：React Native 也属于一种开发模式了，其实优缺点很明显，React Native 只能调用原生接口，但是不能对原生做扩展，要做扩展只能写 Native，React Native 比 ionic1 好一点，不过现在学习 ionic2 或者 angular2 需要去看看 typescript。

jia_dongxu：React Native 的缺点，Android 体验太差了，非常卡。

利炳根：卡的问题，需要把开发模式关了，会好非常多，然后，页面还是可以适当优化一下的。

窦静轩：如果说有一批人，把市面上流行的组件的都封装了， 并且开源了，那样推广的速度也会很快。

我麻不拿到温网冠军就不改名字：就是说如果需要自定义控件的时候，React Native 做不到？

真哥：是的，React Native 不能做接口开发。

窦静轩：React Native 提供自定义组件的方法，需要 Native 自己开发。

利炳根：把原生封一层给 React Native 用，安卓不是很了解，iOS 这块是非常简单的。当然也可能是因为我做的功能比较简单。

柴明昆：React Native 在使用 View 的时候，这些 View 是要经过本地定制的，并且将相关方法暴露给 JS ，这样 JS 端才能正常使用。

张春明：React Native 是否采用？我一般这么想：能否达到快速迭代，可以适应产品的各种变态修改(控件修改)，有问题容易追踪定位，现阶段更倾向于混合开发，然后各取所需。

Shawn：所以说目前还没有一套完美的方案，也就是说需要原生来做的，我们就用原生好了，H5 优势的地方就用 H5，这才叫混合开发嘛！

郭镫鸿：React Native 在性能和功能上是没有问题的，主要学习曲线比较陡峭，会用的人少。

窦静轩：Hybrid 受限于 WebView 啊，WebView 如果有 Bug 你没辙啊。

龙志辉：天猫的部分业务不是已经用 React Native 改造了吗？

郭镫鸿：天猫对 React Native 进行了封装。

柴明昆：如果没记错的话，QQ 空间的发现模块，就是用的 React Native。

真哥：用什么技术既不影响性能，又达到了功能和提高用户体验？

窦静轩：我觉得用啥在于开发者决策，如果你为了一个广告活动页，去弄 React Native 和Hybrid ，真心不如一个 WebView H5 原生去搞。我是15年趟了一年 Hybrid 的坑，16开始趟React Native 的坑了。

龙志辉：本地加毛玻璃吧！其实编程的思路是一样的，React Native 或者 Hybrid 主要目的很多时候是为了突破客户端审核限制和达到代码复用的目的，避免一个相同的业务写三份代码（Android，iOS，Web）。

郭镫鸿：我发现12306用的动态库也绕开了苹果的审核。

真哥：其实我觉得 React Native 更像一种思想 ，并不只是代表一个框架，学习框架主要是学习作者的思想， 就比如 angular 。

窦静轩：对，是思想，组件式开发。

我麻不拿到温网冠军就不改名字：我觉得 React Native 做某些模块还行，但是如果说完全来代替原生，我觉得是不是太快夸张了？

真哥：其实都是 MVVM，替代不了，只是说能够在相对短的时间没做出接近同等效果对性能影响又不大，「分久必合，合久必分」，现在完全被推翻了，如果统一的话，也许就不会有这么多新的想法了。

龙志辉－iOS：每年 iOS 和 Android 系统更新都会开放一大票新的API，用第三方的始终会慢半拍，性能和用户体验在客户端是放在首位的。

Shawn：你看 Cocos2d 支持 JS 吧，Unity3d 官方推荐用 JS 吧，虽说目前 JS 面向对象不太彻底，你看 ECMAScript6 也发不了，JS 用起来就更爽了，关键是 React Native 默认支持 ES6。

汤涛：我觉得 React Native 或者 Hybrid 方案，适用于强运营类的产品，比如电商类，工具类这种暂时没必要，大家选择技术方案时可以参考。

龙志辉－iOS：不知道微信的应用号会使用什么技术？React Native？

James：微信的应用号用 JS，而且微信有 WebView。

龙志辉－iOS：那还是 Hybrid 啊，如果微信也把 JS 框架开源了，就是第二个 React Native 了。

Shawn：腾讯不会弃标准于不顾的，微信应用号绝对是 H5 崛起的时候。

龙志辉－iOS：其实我觉得 React Native 有点像 Cocos2d-x，把各个平台的组件封装一套，用C++一次编写，就可以移植到各个平台了。

罗飞：非常感谢大家的讨论，由于时间的原因，今天的讨论到此为止。后续我们还可以再进行更多的交流，再次感谢大家。

国内 ITOM 管理平台OneAPM 致力于帮助企业用户提供全栈式的性能管理以及 IT 运维管理服务，通过一个探针就能够完成日志分析、安全防护、APM 基础组件监控、集成报警以及大数据分析等功能。想阅读更多优秀文章，请访问 OneAPM 官方技术博客

本文转自 OneAPM 官方博客