标签：
安装入门可以参考：React Native官方文档（http://reactnative.cn/docs/0.31/tutorial.html#content）。
NodeJS知识储备：参考《NodeJS入门》（https://leanpub.com/nodebeginner-chinese）。（尊重知识，请购买原版）。
书籍：《React Native入门与实战》
代码示例：30天学习React Native教程（https://github.com/fangwei716/30-days-of-react-native）
看到这里，对React Native的使用就有了一些认识了。
2 React and React Native and NodeJS
React 是由Facebook开发出来的用于开发用户交互界面的JS库。其源码由Facebook和社区优秀的程序员维护。React带来了很多新的东西，例如组 件化、JSX、虚拟DOM等。其提供的虚拟DOM使得我们渲染组件呈现非常之快，让我们从频繁操作DOM的繁重工作之中解脱。它做的工作更多偏重于MVC 中的V层，结合其它如Flux等一起，你可以非常容易构建强大的应用。
React 的世界里，一切都是组件。你可以构建任何直接的HTML没有的组件，例如下拉菜单、导航菜单等。同时，组件里也可以包含其它组件。每一个组件都有一个 render方法，用于呈现该组件。同时，每一个组件都有属于自己的scope，从而与其它的组件界定开来，用于构建属于该组件的方法，以方便复用（app开发ty300.com）。 JSX是基于JS的扩展，它允许你在JS里直接写HTML的代码，而不用像我们过去一样要想在JS里写HTML不得不拼接一大堆的字符串。React不直 接操作DOM，频繁的操作DOM会非常影响性能和体验。React将DOM结构储存在内存中，与render方法的返回值进行比较，通过其自由的diff 算法计算出不同的地方，然后反应到真实的DOM当中。也就是说，大多数情况我们渲染组件、更改组件状态等都是操作的虚拟DOM，只有在有所改变的情况下， 才会反应到真实的DOM当中。React Native基于ReacJS，把 React 编程模式的能力带到移动开发,用来开发iOS和Android原生应用.
NodeJs 是基于JavaScript的,可以做为后台开发的语言. 提供了很多系统级的API，如文件操作、网络编程等. 用事件驱动, 异步编程,主要是为后台网络服务设计.React Native 借助 Node.js，即 JavaScript 运行时来创建 JavaScript 代码。
总结来说，React Native使用NodeJS来做系统处理，使用React来渲染。
3 构建原理
在AppDelegate.m里，找到
application:didFinishLaunchingWithOptions：
在这个方法中，主要做了几件事：
定义了 JS 代码所在的位置，它在 dev 环境下是一个 URL，通过 development server 访问；在生产环境下则从磁盘读取，当然前提是已经手动生成过了 bundle 文件；
创建了一个 RCTRootView 对象，该类继承于 UIView，处理程序所有 View 的最外层；
调 用 RCTRootView 的 initWithBundleURL 方法（入门教程qkxue.net）。在该方法中，创建了 bridge 对象。顾名思义，bridge 起着两个端之间的桥接作用，其中真正工作的是类就是大名鼎鼎的 RCTBatchedBridge。RCTBatchedBridge 是初始化时通信的核心，我们重点关注的是 start 方法。在 start 方法中，会创建一个 GCD 线程，该线程通过串行队列调度了以下几个关键的任务。
RCTRootView 用于加载 JavaScript 应用以及渲染最后的视图的。当应用开始运行的时候，RCTRootView将会从以下的URL中加载应用：
http://localhost:8081/index.ios.bundle
重 新调用了你运行这个App时打开的终端窗口，它开启了一个 packager 和 server 来处理上面的请求。在 Safari 中打开那个 URL；你将会看到这个 App 的 JavaScript 代码。你也可以在 React Native 框架中找到你的代码。当你的App开始运行了以后，这段代码将会被加载进来，然后 JavaScriptCore 框架将会执行它。在程序里，它将会加载 功能 组件，然后构建出原生的 UIKit 视图。JavaScript应用运行在模拟器上，使用的是原生UI，没有任何内嵌的浏览器。应用程序会使用 React.createElement 来构建应用 UI ,React会将其转换到原生环境中。
当 UI 渲染出来后,render 方法会返回一颗视图渲染树,并与当前的 UIKit 视图进行比较。这个称之为 reconciliation 的过程的输出是一个简单的更新列表, React 会将这个列表应用到当前视图。只有实际改变了的部分才会重新绘制。即ReactJS独特的——virtual-DOM(文档对象模型,一个web文档的视 图树)和 reconciliation概念。
4 组件的生命周期
组件的生命周期分成三个状态：
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
这些方法的详细说明，可以参考官方文档。
另外一个需要关注的点是，组件的style属性的设置方式不能写成
style="opacity:{this.state.opacity};"
而要写成
style={{opacity: this.state.opacity}}
这是因为 React 组件样式是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。
稿源：勤快学QKxue.nET
标签：
原文地址：http://www.cnblogs.com/qkxue/p/5877420.html
