输入关键字或相关内容进行搜索
React Native
0 人关注该话题
回复了问题 o 2 人关注 o 1 个回复 o 234 次浏览 o 19 分钟前
发起了问题 o 1 人关注 o 0 个回复 o 42 次浏览 o
发起了问题 o 1 人关注 o 0 个回复 o 59 次浏览 o
发起了问题 o 1 人关注 o 0 个回复 o 55 次浏览 o
发起了问题 o 1 人关注 o 0 个回复 o 95 次浏览 o
发起了问题 o 1 人关注 o 0 个回复 o 55 次浏览 o
回复了问题 o 2 人关注 o 2 个回复 o 145 次浏览 o
回复了问题 o 16 人关注 o 14 个回复 o 13526 次浏览 o
发起了问题 o 1 人关注 o 0 个回复 o 116 次浏览 o
发起了问题 o 1 人关注 o 0 个回复 o 263 次浏览 o
facebook在HTML5上的一举一动都是全世界都在关注。2013年放弃HTML5也是产生非常大的影响力。不过这次，它可不是又把HTML5捡起来了，而是拿出了替代HTML5的新的跨平台方案。
整体而言，facebook的大思路和DCloud是差不多的，两家...
facebook在HTML5上的一举一动都是全世界都在关注。2013年放弃HTML5也是产生非常大的影响力。不过这次，它可不是又把HTML5捡起来了，而是拿出了替代HTML5的新的跨平台方案。
整体而言，facebook的大思路和DCloud是差不多的，两家都是W3C会员，深刻清楚HTML5的弱点在于渲染，尤其是动态交互。认清这点并认真解决是做实事。这比cordova、ionic这些产品的思路要靠谱。cordova等产品仍然认为SPA是王道，耐心等待硬件升级就好了。
但是除了渲染，DCloud认为HTML5比原生还有2个关键环节弱就是能力和开发工具，所以在这2方面也做了react native没有做的强化工作。
以及同样是优化动态交互，DCloud和react native也走了不同的路线。
首先声明一点，DCloud并非做不出来react native这样的产品从而鼓吹5+好，抨击react native不好。
恰恰是我们团队之前在08年-12年也走过react native的那条路，使用v8下的js操作原生控件。但是随着时代的发展，我们淘汰了那个技术。
原因是什么？因为手机硬件在快速发展，HTML5起来了。
现在的HTML5，虽然还有虽然有部分场景表现不佳，但不至于被全面否定。
对于HTML5表现不佳的地方，比如窗体切换、区域滚动、下拉刷新等，采用原生强化的方式进行补充，其余HTML5可用部分，仍使用HTML5就好了。
这也就是HTML5+的思路，面向核心问题、改进核心问题，做强化，而不是全面否定重新来一套。
而经过体验强化的部分，DCloud又推出mui前端框架，做标准兼容，让窗体切换、下拉刷新这些强化代码在普通浏览器下也可以兼容降级运行，虽然没有带着5+引擎时那么流畅，但也能用。
这才是有更有效率的解决方案，开发一次、多端发布。
打个比方，一辆车只是轮子不够好，改进轮子就好了，非要整车重做何必呢。
**而react native的问题，就是过于否定HTML5的价值。**
类似rn的非HTML5的跨平台开发产品之前已经也有不少，比如titanium、Xamarin，但也没有火起来。
接下来我们系统的总结下2个产品的区别：
### 1. 理念的区别：
react native与HTML5无关。
它使用的语言还是javascript，但没有HTML和css。
可以把它称为no HTML5。
也就是使用js语言编程，但不使用浏览器引擎渲染，而是用独立v8引擎解析指定的js语法，然后由js操作绘制界面。
NO HTML5，这对于W3C和浏览器厂商，这是个有点打脸的事情。
这样广大开发者所学的HTML和css知识就用不到了。
而HTML5Plus，看名字就知道是完全不同的路线。
5+是基于HTML5的现状，扩展和完善它的不足。
并且html5plus.org定义的扩展，也都会提交给W3C。
面对HTML5的不足，是打翻重来好，还是增强好？答案肯定是如果有增强的方案且效果一样，何必打翻重来。
### 2. 平台支持
目前react native在ios上仅支持ios7以上，Android仅支持Android4.1以上。以下的平台，会被转换成普通HTML5运行，效果很差。
而5+的平台支持是iOS5+和Android2.3+。
你的老板可能会问你为什么竞品app的次日留存是30%而你的app是20%，然后风投就投给了你的竞品，其实答案就在于你的app兼容的手机不够多。
### 3. 编码的区别
先说明一个概念，reactjs之前是facebook推出的一个前端框架。在前端框架层面定义了一套自己的api，然后用js再解析成dom。
刚刚推出的react native，原生实现了之前reactjs的api的解析，不再转换为dom。
之前reactjs前端框架出来时，业内争议就很大，很多人认为这种写法难以理解、不优雅。
```javascript
React.render(
&h1&Hello, world!&/h1&,
document.getElementById('example')
有点像使用innerHTML来创建dom，然后注意&h1的左边是没有引号包围，也就是说这个参数并不是字符串。真是把js的动态性发挥的淋漓尽致。
另外React Native的理念是Learn Once , Write Anywhere，ios、Android2个平台很多代码都无法统一。
### 4. 引擎的体积
react native是自己的渲染引擎，不是webkit或任何我们熟悉的浏览器。相当于是facebook的定制浏览器。
引擎包的体积不小，hello world就是7M。而功能更多的5+基础基座只有几百K大小。原因是5+只是做强化，基础的HTML5处理是os做的。当然由此开发者也得注意编码时不要依赖太新的css，容易引发应用兼容性问题。
### 5. 性能的区别
其实不管是浏览器，还是react native，还是5+，渲染都是原生语言解析动态语言来渲染，不同的只是谁的原生渲染引擎高效，再往本质说，就是谁的语法简单。越复杂的语法，越灵活，也渲染越慢。
从理论上来讲，reactjs的性能一般，但react native的性能确实好于webkit，但react native与5+的性能谁高谁低？有点复杂，慢慢解释。
5+分HTML5部分和原生扩展部分。
- 使用纯HTML5时，比如用js操作一个动画，那么react native比dom+css3的HTML5方案性能高。
- 但使用5+的原生扩展时，那react native的性能略逊于5+。比如窗体切换，5+提供更为强大的截图切换方案，支持提前对窗体静态截图，移动窗体时不移动webview、只移动静态截图的，此时不会在移动窗体时频繁触发dom和css的重绘，性能是很好的，rn也比不了，rn仍然是要动态渲染绘制的。
在DCloud的mui里，switch等控件是纯HTML5的，所以性能比react native要差。
但为何DCloud明知如此也不给switch做native版本？要知道DCloud给很多UI控件做了native版本。
原因是DCloud的原则是HTML5能做好的事情不动原生。mui的switch理论上比react native性能差，但实际中用户很难感受到动画少几帧的差别，既然已经能满足商用，何必搞原生增加引擎体积？
### 6. 能力的区别
原生能力调用这个就不是react native的擅长了，几乎没什么原生能力调用。需要原生工程师开发原生代码封装接口给js用。
5+ runtime有几十万原生api可以直接调用，能力远多于react native。大多数常见的功能api都封装在htmlplus的标准规范里，更多api可以灵活的使用Native.js操作，也有大量示例，无需原生工程师就能完成app。
所以目前react native常见的应用是hybrid，不太在意app体积的开发商使用rn做热更新。但没有原生工程师时，如果想纯js完成app，那react native是不行的。这对于创业公司就失去了吸引力，既然要用跨平台技术，就是要省成本，还得再雇佣原生工程师何必呢。
### 7. 成熟度的区别
开发者肯定喜欢坑少的产品。react native是2015上半年发布ios，下半年发布Android，案例也不多，在react native的社区下载推荐案例体验，比DCloud的案例比如大众点评外卖、有道词典等并没有什么优势。HTML5+是2014年初发布，基于5+已上线数万App，包括360、大众点评、京东、唯品会、携程等众多知名公司都在使用。坑不能说没有，但比react native少。
莫说FB是大公司所以一定靠谱，很多大公司的小项目并不是最牛的人做的，一个大公司的经理干不过一个创业公司的CEO，这是很常见的事情。
### 8. 开发工具的区别
facebook没有提供配套的ide，开发调试非常麻烦。没有原生开发基础的话甚至可能搭不起来开发环境。
打包也不方便，没有mac电脑无法调试或打包ios应用
### 9. 发展方向的区别
react native，让我想起了腾讯前段时间推出的微信js sdk。
facebook和腾讯都是社交巨头。他们都会利用自己的入口地位强化自己的生态系统。
从技术含量来看，facebook是更甚一筹，微信js sdk没啥技术含量。
但从成功的容易度来讲，反而微信js sdk更容易成功。
目前的开发者只需在公众号的web程序里补充几个js api调用，就ok了。
但是react native，开发者要重新学，重新写。
强化的web的技术曾经有很多，Google的dart，mozilla的asm.js，但是谁都没火起来。
react native会怎么样？
我纯粹作为一个开发者，仍然认为它是一个很短期的产品。
因为随着硬件、OS和HTML5强化技术的成熟，HTML5的性能已经大幅提升，react native的性能会略好一点点，但不会很明显，为了这一点点要重新学习、重新编码，不值得。
而且随着时间的推移，性能优势会越来越小。
花费很大精力学习一个很短期的过渡产品，我想大多数人不会这么选择。
如果你本来就是reactjs的开发者，且准备进入facebook生态圈，那么react native这步顺利成章。
如果你本来不会reactjs，现在想用react native开发跨平台app，那么没什么意义。
如果你想做跨平台开发，除了HTML5，其实还有很多选择，比如titanium、xmarin，他们都不是HTML5但可以编译为跨平台的App。
如果你想用HTML5做跨平台开发，且性能、能力、开发便利性都接近原生，还能兼容普通wap版本，那只有HTML5Plus和mui的组合了。
最后总结下：
HTML5需要强化毋庸置疑，但到底该怎么强化？
一种是打翻重来一套，一种是增强HTML5的不足。如果最终效果差不多，当然是后者的方案靠谱。
一个HTML5移动站，通过5+略加改造就可以变成原生体验的App。但如果是react native，就需要重头学重头写，代价高昂，收益却没有提升多少。
功能：5+远大于react native
性能：两者各有千秋
包体积：5+远小于react native
OS支持范围：5+大于react native
国内开发者支持：5+优于react native
长期演进生命力：react native像过渡产品，随着手机硬件的提升，该项目存在的意义在下降
光说理论也不够，建议大家亲身体验一下react native的案例和DCloud的案例，装在低端手机上看看。
react native的案例：/cases.html。
DCloud的案例：http://dcloud.io/case/ 注大众点评外卖、有道词典等案例需在360手机助手下载。
我相信大家很难感知到性能差别。
发表了文章 o 0 个评论 o 65 次浏览 o
发表了文章 o 0 个评论 o 52 次浏览 o
发表了文章 o 0 个评论 o 51 次浏览 o
发表了文章 o 0 个评论 o 85 次浏览 o
发表了文章 o 0 个评论 o 83 次浏览 o
发表了文章 o 0 个评论 o 61 次浏览 o
发表了文章 o 0 个评论 o 311 次浏览 o
获得 1 次赞同, 0 次感谢
获得 1 次赞同, 0 次感谢
获得 2 次赞同, 0 次感谢如今开发原生APP（Android/IOS），一方面需要还是Android原生开发知识，另一方需要知道iOS相关原生开发只是。这样在公司就需要分别成立Android和iOS开发团队，无疑增加了开发成本以及增加了开发周期。下面我来告诉大家几种开发的方法，哪怕你不会Native也可以进行开发相关APP。
(一).cordova
cordova为一移动开发框架，他让我们可以仅仅专注前端代码，然后通过一个开发框架编译形成一个可安装的APP，因为前端代码的特性，所以这种APP是跨平台的，可以最大程度的提升开发效率，因为只需要前端人员，其成本节约也是不可忽视的！
PS：很多时候一些朋友也会说到phoneGap，其实phoneGap就是指cordova
其实cordova与Hybrid是一致的，只不过Hybrid中的IOS和Andriod Webview容器是我们Native同事开发的，而cordova打包后的Webview容器是公司开发的，这里所谓跨平台，其实是有一个公司做出了这种平台性产品做出了支撑。
这里又会引出另一个问题，哪个好？
孰优孰劣得看应用场景，这个和是否使用外面提供的第三方的前端UI插件是一致的，外面的插件大而全，但是性能方面可能差点，自己做的话，定制化需要或者性能方面可能更好点，就目前情况来说，稍微有点实力的公司都会由自己的Native团队做Hybrid Webview容器壳，一些创业团队或者刚起步的移动团队会使用Cordova试水。
PS：Cordova最适合的场景是前端接外包！！！
整个架构的话依旧跳不出这张图，基础应用使用H5开发，Native提供接口，交互会有一个phone gap bridge层。
(二).IONIC
Ionic是一个基于Cordova的移动开发框架，他的一大优势就是提供了很多UI，这样对于开发者来说就比较省心了，其次Ionic使用的angularJS作为配套框架（强依赖），所以对于前端来说是很不错的一个体验。
当然，Ionic在一些Andriod机上表现不是很好，因为是内嵌资源，作为APP来说加载速度较快还无所谓，但是同一套代码如果要用做H5站点的话，angularJS的尺寸就是很大一个制约。
这里做完了简单介绍，我们还是简单实践一把，体验下他的威力。
我们在目录下新建一个demo文件夹，新增index.html：
&!doctype html&
ng-app="ionicApp"&
&meta charset="UTF-8"&
&title&ionic demo&/title&
&link href="../css/ionic.min.css" rel="stylesheet" type="text/css" /&
&script src="../js/ionic.bundle.min.js" type="text/javascript"&&/script&
&script type="text/javascript"&
angular.module('ionicApp', ['ionic']).controller('MyCtrl', function ($scope) {
&body ng-controller="MyCtrl"&
&ion-header-bar&
&h1&Hello World!&/h1&
&/ion-header-bar&
&ion-content&
&p&我的第一个 ionic 应用。&/p&
&/ion-content&
从这里可以看出Ionic几个特点：
① 强依赖angularJS（前面说过了）
② body部分依赖于IScroll，至于IScroll会有什么优势与劣势，我们在之前讨论过：
/yexiaochai/p/3762338.html
/yexiaochai/p/3764503.html
③ 有自己一套UI体系
第一眼的感觉是：
① 该框架比较完善，开发效率必然很高
② 不能肯定是否适合客户端产品，因为js与css尺寸皆很大
③ 视觉样式比较固定，如果一个公司有自己的规范可能不太适合
④ 因为angular与IScroll固有的特点，做出来的应用可能体验不会太好
上面我们在浏览器简单感受了下Ionic，接下来我们需要将之放到移动设备上运行，这里的第一步是环境安装。
进行这个操作前，得保证电脑具有Node环境，然后执行命令行：
然后我们随便找一个目录，创建我们第一个项目myAPP：
这里需要安装Andriod开发环境，不然的话，下面几个命令会报错，如果有Andriod环境的话，就能成功运行了：
$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android
如果正常的话，技能弹出模拟器：
如果有心做Ionic应用，IOS&Andriod环境都是需要安装的，可能还需要使用eclipse，这里各位看看文档吧，这里不多说。
(三).React Native
React Native 是伟大的互联网公司Facebook与2015年发布的，该可以让我们广大开发者使用JavaScript和React开发我们的应用，该提倡组件化开发，也就是说React Native给我们提供一个个封装好的组件让开发者来进行使用，甚至我们可以相关嵌套形成新的组件。使用React Native我们可以维护多种平台(Web,Android和IOS)的同一份业务逻辑核心代码来创建原生应用。现阶段Web APP的的体验还是无法达到Native APP的体验，所以这边fackbook更加强调的是learn once,write everywhere，应用前端我们使用js和React来开发不同平台的UI，下层核心模块编写复用的业务逻辑代码，提供应用开发效率。
[特别注意]目前react native在ios上仅支持ios7以上,Android仅支持Android4.1以上。
Native专题系列相关文章，大家可以关注江清清的技术专栏:
本React Native讲解专题:主要讲解了React Native开发，由基础环境搭建配置入门，基础，进阶，开源项目相关讲解。
在线用户: 1今日访问: 7,367昨日访问: 3,491累计访问: 3,440,212