Nativejs和reactNative学习笔记

因为前段时间，对dcloud推出的Nativejs和facebook推出的reactNative都做了一点点浅薄的研究。因为研究的很浅薄，所以仅代表我个人观点，谈谈对运用这两个产品的些许感受。

说起dcloud的Nativejs，还是先从他的IDE编辑器开始说起。他们推出的Hbuilder，确实蛮好用，写起代码来确实很快。之前觉得sublime好用，但是当你用了Hbuilder之后，sublime顿时逊色不少。用了一段时间的Hbuilder，感觉其唯一的缺点就是用git库pull下来的文件，不会时时刷新。

说到用Hbuilder开发APP。我们可以下载其官方的案例，开发学习成本是很低的，入手极快，因为它就是运用html5及一些css做得一些开发。再看看他们用js封装的一些原生用法：

安卓：http://www.html5plus.org/doc/zh_cn/android.html#

ios:http://www.html5plus.org/doc/zh_cn/ios.html

囊括了大部分的APP开发接口。

Nativejs打开窗口，用的是openWindow的方式，类似创建一个新的Webview，关闭窗口，就是类似与关闭一个Webview。窗口之间的传值，可以用

extras:{
  .....//自定义扩展参数，可以用来处理页面间传值
},
这种方式。也可以用触发自定义事件的方式。运用openWindow的这种方式，解决了h5中历史返回死循环的问题。

但是，我用下来有些问题，因为很多代码都是用html5写的，当有些功能用html5和它封装的js都能实现的时候，我们会不自觉地运用之前老的html5的方案解决一些问题，最终还是导致我们的APP效率变低。说白了，用Hbuilder开发的APP和我们之前用APPCan和phoneGap开发的移动应用没有什么区别，都是hybrid开发。

但是当facebook推出reactNative之后，迅速火了！我身边不少做安卓开发的同学，开始研究js了，他们开始研究reactNative了，因为reactNative可以跨平台做安卓和IOS开发，而且效率并不低！

为什么这么说呢！因为reactNative逻辑是用js写的，但是UI全部是原生的，他把js渲染成android和ios代码了。

但是呢，reactNative学习成本相对较高。可以看一下他的文档，我们搭建环境，要我们安装nodejs，java运行环境，win7电脑要安装android的SDK等等。它运用的是全新的语法jsx。在学习reactNative之前，最好要先学习一下reactjs，关于reactjs入门，我个人觉得阮一峰写的一篇博客还不错

安装
React 的安装包，可以到官网下载。不过，React Demos 已经自带 React 源码，不用另外安装，只需把这个库拷贝到你的硬盘就行了。

$ git clone git@github.com:ruanyf/react-demos.git
如果你没安装 git， 那就直接下载 zip 压缩包。

下面要讲解的12个例子在各个 Demo 子目录，每个目录都有一个 index.html 文件，在浏览器打开这个文件（大多数情况下双击即可），就能立刻看到效果。
需要说明的是，React 可以在浏览器运行，也可以在服务器运行，但是本教程只涉及浏览器。一方面是为了尽量保持简单，另一方面 React 的语法是一致的，服务器的用法与浏览器差别不大。Demo13 是服务器首屏渲染的例子，有兴趣的朋友可以自己去看源码。
一、HTML 模板
使用 React 的网页源码，结构大致如下。

 
   
   
   
 
 
   

   
 

上面代码有两个地方需要注意。首先，最后一个