内容字号：
段落设置：
字体设置：
精准搜索请尝试：
解放程序员！这项技术带来App开发革命
来源：作者：给产品经理讲技术责编：刀马
做为一名产品经理，你是否遇到过这样的窘境，“帮我把字体调成16号呗，颜色变成#FFFF00FF，老大说这里最好改一下”，作为一名app的开发只能无奈但心里窃喜的告诉你，“只能等下个版本了，必须要重新发布才能改”，如果你问为什么不能改了就生效啊，那说明你对技术的理解要么真的很差，要么你就是知道这项React-Native新技术所爆发出来的力量。React Native是Facebook推出的一个用JavaScript语言就能同时编写，，以及后台的一项技术，今年9月发布了android版本，又在程序员里面掀起了一波小高潮，不断有喜欢尝鲜的程序员投入到这个领域。用大白话说，就是从此一名程序员自己就可以创业了，他只用这一门技术，就可以同时写出androidapp，ios app，以及后台应用程序，并且，请注意这里，它可以做到实时热更新（就像网页一样，改了一个字体，随时可上线），app也能做到随时都能更新了，第一段讲的那个需求可以分分钟秒杀解决，不用新发版本，只需在服务器改动一下代码即可，是不是很牛逼，是不是很牛逼，是不是很牛逼，真的很牛逼。到这里，你只需要理解一句话，就是Facebook提供了一套解决方案，它利用JavaScript作为开发语言，可以同时来编写前端，移动终端，后台应用程序。我们再来讲讲，为什么React Native受到了如此大的关注，以及它的优越性到底在什么地方。目前，一个成熟的互联网产品基本囊括了：移动终端和网页两种主要形态。在移动终端app和网页的开发历程中，涉及了很多技术角色：前端开发（俗名叫做网站的），移动终端开发（android和ios开发，现在满大街都是），后台开发（他们的程序大多没有界面，主要是为网页和app提供数据和保障服务的稳定性），每个角色各司其职，分别需要不同的技能，比如前端开发需要精通html，css，javascript这些基本的web语言知识。Android开发用Java（这个词读“扎瓦”，别读成了“加瓦”，读成这样很Low B的）语言编写，ios开发用Objective-c（把他想象成当年过计算机二级的那个C语言就可以了）编写。后台开发，有的公司用Java，有的公司用C++，用啥的都有，能满足性能需要就可以了。已经看崩溃了吧，对于一个非计算机专业的人，根本不会理解他妈的为什么要存在这么多语言，为什么这里要用C语言，那里要用C++，有的地方要用Python，而又有很大的一个人群对你高呼：“PHP才是世界最好的语言”。其实他们每种语言都有不同的使用场景，有的语言效率高，有的语言语法更简洁漂亮，有的是专为后台而生，有的是特定场景下的唯一选择。如果你还听不懂，我们就用大白话做个比喻，为什么避孕套有的是螺纹的，有的是颗粒的，有的是延时的，有的是超薄的，还有一个品牌号称一只手就可以打开的，它们也都是依据个人身体状态，以及不同场景分别发挥各自的强项。你随便类比，任何一个领域，都有很多不同的工具来满足不同的场景，是需求决定了当前状态。现在好了，React整套解决方案完成了江湖统一，FaceBook也号称这们技术是“Learn Once，Write AnyWhere”，学习成本只有一次，却完成了所有开发角色的统一。这意味着：app将来都是可像网页一样热更新，随时发布。对于一名开发人员，将再也没有前端，终端，后台的区分，他所关注的就是做一整套应用程序，人力将得到最大幅度的整合与释放。代码复用将会是主旋律，因为是一种语言，大家重复造轮子的成本会越来越节省。目前，React Native也还是有一些缺点的，比如他的sdk组件包size还比较大，crash还比较多，在ios上支持的内容已经相当不错，android还属于初级阶段，但是目前最新的版本也才是0.16，相信再过一年，一定会牛逼闪闪。
大家都在买
软媒旗下软件：||||||||
IT之家，软媒旗下科技门户网站 - 爱科技，爱这里。
Copyright (C) , All Rights Reserved.
版权所有 鲁ICP备号114网址导航作者: 乾秋
在初识 React Native 时，非常令人困惑的一个地方就是 JS 和 Native 两个端之间是如何相互通信的。本篇文章对 iOS 端 React Native 启动时的调用流程做下简要总结，以此窥探其背后的通信机制。
JS 启动过程React Native 的 iOS 端代码是直接从 Xcode IDE 里启动的。在启动时，首先要对代码进行编译，不出意外，在编译后会弹出一个命令行窗口，这个窗口就是通过 Node.js 启动的 development server。
问题是这个命令行是怎么启动起来的呢？实际上，Xcode 在 Build Phase 的最后一个阶段对此做了配置：
因此，代码编译后，就会执行 packager/react-native-xcode.sh 这个脚本。查看这个脚本中的内容，发现它主要是读取 XCode 带过来的环境变量，同时加载 nvm 包使得 Node.js 环境可用，最后执行 react-native-cli 的命令：
123456react-native bundle \
--entry-file index.ios.js \
--platform ios \
--dev $DEV \
--bundle-output "$DEST/main.jsbundle" \
--assets-dest "$DEST"
react-native 命令是全局安装的，在我本机上它的地址是 /usr/local/bin/react-native。查看该文件，它调用了
react-native 包里的local-cli/cli.js 中的 run 方法，最终进入了 private-cli/src/bundle/buildBundle.js。它的调用过程为：
ReactPackager.createClientFor
client.buildBundle
processBundle
saveBundleAndMap
上面四步完成的是 buildBundle 的功能，细节很多很复杂。总体来说，buildBundle 的功能类似于 browerify 或 webpack ：
从入口文件开始分析模块之间的依赖关系；
对 JS 文件转化，比如 JSX 语法的转化等；
把转化后的各个模块一起合并为一个 bundle.js。
之所以 React Native 单独去实现这个打包的过程，而不是直接使用 webpack ，是因为它对模块的分析和编译做了不少优化，大大提升了打包的速度，这样能够保证在 liveReload 时用户及时得到响应。
Tips: 通过访问
可以看到内存中缓存的所有编译后的文件名及文件内容，如：
Native 启动过程Native 端就是一个 iOS 程序，程序入口是 main 函数，像通常一样，它负责对应用程序做初始化。
除了 main 函数之外，AppDelegate 也是一个比较重要的类，它主要用于做一些全局的控制。在应用程序启动之后，其中的 didFinishLaunchingWithOptions 方法会被调用，在这个方法中，主要做了几件事：
定义了 JS 代码所在的位置，它在 dev 环境下是一个 URL，通过 development server 访问；在生产环境下则从磁盘读取，当然前提是已经手动生成过了 bundle 文件；
创建了一个 RCTRootView 对象，该类继承于 UIView，处于程序所有 View 的最外层；
调用 RCTRootView 的 initWithBundleURL 方法。在该方法中，创建了 bridge 对象。顾名思义，bridge 起着两个端之间的桥接作用，其中真正工作的是类就是大名鼎鼎的 RCTBatchedBridge。
RCTBatchedBridge 是初始化时通信的核心，我们重点关注的是 start 方法。在 start 方法中，会创建一个 GCD 线程，该线程通过串行队列调度了以下几个关键的任务。
loadSource该任务负责加载 JS 代码到内存中。和前面一致，如果 JS 地址是 URL 的形式，就通过网络去读取，如果是文件的形式，则通过读本地磁盘文件的方式读取。
initModules该任务会扫描所有的 Native 模块，提取出要暴露给 JS 的那些模块，然后保存到一个字典对象中。一个 Native 模块如果想要暴露给 JS，需要在声明时显示地调用 RCT_EXPORT_MODULE。它的定义如下：
1234#define RCT_EXPORT_MODULE(js_name) \RCT_EXTERN void RCTRegisterModule(Class); \+ (NSString *)moduleName { return @#js_ } \+ (void)load { RCTRegisterModule(self); }
可以看到，这就是一个宏，定义了 load 方法，该方法会自动被调用，在方法中对当前类进行注册。模块如果要暴露出指定的方法，需要通过 RCT_EXPORT_METHOD 宏进行声明，原理类似。
setupExecutor这里设置的是 JS 引擎，同样分为调试环境和生产环境：在调试环境下，对应的 Executor 为 RCTWebSocketExecutor，它通过 WebSocket 连接到 Chrome 中，在 Chrome 里运行 JS;在生产环境下，对应的 Executor 为 RCTContextExecutor，这应该就是传说中的 javascriptcore。
moduleConfig根据保存的模块信息，组装成一个 JSON ，对应的字段为 remoteModuleConfig。
injectJSONConfiguration该任务将上一个任务组装的 JSON 注入到 Executor 中。下面是一个 JSON 示例，由于实际的对象太大，这里只截取了前面的部分：JSON 里面就是所有暴露出来的模块信息。
executeSourceCode该任务中会执行加载过来的 JS 代码，执行时传入之前注入的 JSON。在调试模式下，会通过 WebSocket 给 Chrome 发送一条 message，内容大致为：
123456{
id = 10305
inject = {remoteJSONConfig...}
method = executeApplicationScript
url = "http://localhost:8081/index.ios.bundle?platform=ios&dev=true"}
JS 接收消息后，执行打包后的代码。如果是非调试模式，则直接通过 javascriptcore 的虚拟环境去执行相关代码，效果类似。
JS 调用 Native前面我们看到， Native 调用 JS
是通过发送消息到 Chrome 触发执行、或者直接通过 javascriptcore 执行 JS 代码的。而对于 JS 调用 Native 的情况，又是什么样的呢？
在 JS 端调用 Native 一般都是直接通过引用模块名，然后就使用了，比如：1var RCTAlertManager = require('NativeModules').AlertManager
可见，NativeModules 是所有本地模块的操作接口，找到它的定义为：1var NativeModules = require('BatchedBridge').RemoteM
而BatchedBridge中是一个MessageQueue的对象：1234let BatchedBridge = new MessageQueue(
__fbBatchedBridgeConfig.remoteModuleConfig,
__fbBatchedBridgeConfig.localModulesConfig,);
在 MessageQueue 实例中，都有一个 RemoteModules 字段。在 MessageQueue 的构造函数中可以看出，RemoteModules 就是 __fbBatchedBridgeConfig.remoteModuleConfig 稍微加工后的结果。12345678class MessageQueue {
constructor(remoteModules, localModules, customRequire) {
this.RemoteModules = {};
this._genModules(remoteModules);
}}
所以问题就变为:
__fbBatchedBridgeConfig.remoteModuleConfig 是在哪里赋值的？
实际上，这个值就是 从 Native 端传过来的JSON 。如前所述，Executor 会把模块配置组装的 JSON 保存到内部：123[_javaScriptExecutor injectJSONText:configJSON
asGlobalObjectNamed:@"__fbBatchedBridgeConfig"
callback:onComplete];
configJSON 实际保存的字段为：_injectedObjects['__fbBatchedBridgeConfig']。
在 Native 第一次调用 JS 时，_injectedObjects 会作为传递消息的 inject 字段。JS 端收到这个消息，经过下面这个重要的处理过程：
1234567'executeApplicationScript': function(message, sendReply) {
for (var key in message.inject) {
self[key] = JSON.parse(message.inject[key]);
importScripts(message.url);
sendReply();
看到没，这里读取了 inject 字段并进行了赋值。self 是一个全局的命名空间，在浏览器里 self===window。
因此，上面代码执行过后，window.__fbBatchedBridgeConfig 就被赋值为了传过来的 JSON 反序列化后的值。
总之：NativeModules = __fbBatchedBridgeConfig.remoteModuleConfig = JSON.parse(message.inject[‘__fbBatchedBridgeConfig’]) = 模块暴露出的所有信息
好，有了上述的前提之后，接下来以一个实际调用例子说明下 JS 调用 Native 的过程。首先我们通过 JS 调用一个 Native 的方法：12345.measureLayoutRelativeToParent(
.findNodeHandle(),
._setScrollVisibleLength);
所有 Native 方法调用时都会先进入到下面的方法中：1234567891011fn = function(...args) {
let lastArg = args.length & 0 ? args[args.length - 1] :
let secondLastArg = args.length & 1 ? args[args.length - 2] :
let hasSuccCB = typeof lastArg === 'function';
let hasErrorCB = typeof secondLastArg === 'function';
let numCBs = hasSuccCB + hasErrorCB;
let onSucc = hasSuccCB ? lastArg :
let onFail = hasErrorCB ? secondLastArg :
args = args.slice(0, args.length - numCBs);
return self.__nativeCall(module, method, args, onFail, onSucc);};
也就是倒数后两个参数是错误和正确的回调，剩下的是方法调用本身的参数。在 __nativeCall 方法中，会将两个回调压到 callback 数组中，同时把
(模块、方法、参数) 也单独保存到内部的队列数组中：1234567onFail && params.push(this._callbackID);this._callbacks[this._callbackID++] = onFonSucc && params.push(this._callbackID);this._callbacks[this._callbackID++] = onSthis._queue[0].push(module);this._queue[1].push(method);this._queue[2].push(params);
到这一步，JS 端告一段落。接下来是 Native 端，在调用 JS 时，经过如下的流程：
总之，就是在调用 JS 时，顺便把之前保存的 queue 作为返回值 一并返回，然后会对该返回值进行解析。在 _handleRequestNumber 方法中，终于完成了 Native 方法的调用：12345678910111213141516171819- (BOOL)_handleRequestNumber:(NSUInteger)i
moduleID:(NSUInteger)moduleID
methodID:(NSUInteger)methodID
params:(NSArray *)params{
RCTModuleData *moduleData = _moduleDataByID[moduleID];
id&RCTBridgeMethod& method = moduleData.methods[methodID];
@try {
[method invokeWithBridge:self module:moduleData.instance arguments:params];
@catch (NSException *exception) {
NSMutableDictionary *args = [method.profileArgs mutableCopy];
[args setValue:method.JSMethodName forKey:@"method"];
[args setValue:RCTJSONStringify(RCTNullIfNil(params), NULL) forKey:@"args"];}
与此同时，执行后还会通过 invokeCallbackAndReturnFlushedQueue 触发 JS 端的回调。具体细节在 RCTModuleMethod 的 processMethodSignature 方法中。
再小结一下，JS 调用 Native 的过程为 ：
JS 把(调用模块、调用方法、调用参数) 保存到队列中；
Native 调用 JS 时，顺便把队列返回过来；
Native 处理队列中的参数，同样解析出(模块、方法、参数)，并通过 NSInvocation 动态调用；
Native方法调用完毕后，再次主动调用 JS。JS 端通过 callbackID，找到对应JS端的 callback，进行一次调用
整个过程大概就是这样，剩下的一个问题就是，为什么要等待 Native 调用 JS 时才会触发，中间会不会有很长延时？事实上，只要有事件触发，Native 就会调用 JS。比如，用户只要对屏幕进行触摸，就会触发在 RCTRootView 中注册的 Handler，并发送给JS：12[_bridge enqueueJSCall:@"RCTEventEmitter.receiveTouches"
args:@[eventName, reactTouches, changedIndexes]]
除了触摸事件，还有 Timer 事件，系统事件等，只要事件触发了，JS 调用时就会把队列返回。这块理解可以参看
一文中的“事件响应”一节。
总结俗话说一图胜千言，整个启动过程用一张图概括起来就是：
本文简要介绍了 iOS 端启动时 JS 和 Native 的交互过程，可以看出 BatchedBridge 在两端通信过程中扮演了重要的角色。Native 调用 JS 是通过 WebSocket 或直接在 javascriptcore 引擎上执行；JS 调用 Native 则只把调用的模块、方法和参数先缓存起来，等到事件触发后通过返回值传到 Native 端，另外两端都保存了所有暴露的 Native 模块信息表作为通信的基础。由于对 iOS 端开发并不熟悉，文中如有错误的地方还请指出。React 入门实例教程 - 阮一峰的网络日志
React 入门实例教程
现在最热门的前端框架，毫无疑问是
上周，基于 React 的
发布，结果一天之内，就获得了 5000 颗星，受瞩目程度可见一斑。
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 ，都不满意，就决定自己写一套，用来架设
的网站。做出来以后，发现这套东西很好用，就在2013年5月了。
由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。
这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机（参见）。
既然 React 这么热门，看上去充满希望，当然应该好好学一下。从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目。但是，好的 React 教程却不容易找到，这一方面因为这项技术太新，刚刚开始走红，大家都没有经验，还在摸索之中；另一方面因为 React 本身还在不断变动，API 一直在调整，至今没发布1.0版。
我学习 React 时，就很苦恼。有的教程讨论一些细节问题，对入门没帮助；有的教程写得不错，但比较短，无助于看清全貌。我断断续续学了几个月，看过二十几篇教程，在这个过程中，将对自己有帮助的 Demo 都收集下来，做成了一个库
下面，我就根据，写一篇全面又易懂的 React 入门教程。你只需要跟着每一个 Demo 做一遍，就能初步掌握 React 。当然，前提是你必须拥有基本 JavaScript 和 DOM 知识，但是你读完就会发现，React 所要求的预备知识真的很少。
React 的安装包，可以到下载。不过， 已经自带 React 源码，不用另外安装，只需把这个库拷贝到你的硬盘就行了。
$ git clone :ruanyf/react-demos.git
如果你没安装 git， 那就直接下载 。
下面要讲解的12个例子在各个 Demo 子目录，每个目录都有一个 index.html 文件，在浏览器打开这个文件（大多数情况下双击即可），就能立刻看到效果。
需要说明的是，React 可以在浏览器运行，也可以在服务器运行，但是本教程只涉及浏览器。一方面是为了尽量保持简单，另一方面 React 的语法是一致的，服务器的用法与浏览器差别不大。
是服务器首屏渲染的例子，有兴趣的朋友可以自己去看源码。
一、HTML 模板
使用 React 的网页源码，结构大致如下。
&!DOCTYPE html&
&script src="../build/react.js"&&/script&
&script src="../build/react-dom.js"&&/script&
&script src="../build/browser.min.js"&&/script&
&div id="example"&&/div&
&script type="text/babel"&
// ** Our code goes here! **
上面代码有两个地方需要注意。首先，最后一个 &script& 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
$ babel src --out-dir build
上面命令可以将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录。
二、ReactDOM.render()
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
ReactDOM.render(
&h1>Hello, world!&/h1>,
document.getElementById('example')
上面代码将一个 h1 标题，插入 example 节点（查看 ），运行结果如下。
三、JSX 语法
上一节的代码， HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 ，它允许 HTML 与 JavaScript 的混写（查看
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
names.map(function (name) {
return &div>Hello, {name}!&/div>
document.getElementById('example')
上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 & 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。上面代码的运行结果如下。
JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员（查看
var arr = [
&h1>Hello world!&/h1>,
&h2>React is awesome&/h2>,
ReactDOM.render(
&div>{arr}&/div>,
document.getElementById('example')
上面代码的arr变量是一个数组，结果 JSX 会把它的所有成员，添加到模板，运行结果如下。
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类（查看 ）。
var HelloMessage = React.createClass({
render: function() {
return &h1>Hello {this.props.name}&/h1>;
ReactDOM.render(
&HelloMessage name="John" />,
document.getElementById('example')
上面代码中，变量 HelloMessage 就是一个组件类。模板插入 &HelloMessage /& 时，会自动生成 HelloMessage 的一个实例（下文的"组件"都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。
注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。
var HelloMessage = React.createClass({
render: function() {
return &h1>
Hello {this.props.name}
上面代码会报错，因为HelloMessage组件包含了两个顶层标签：h1和p。
组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 &HelloMessage
name="John"& ，就是 HelloMessage 组件加入一个 name 属性，值为 John。组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。上面代码的运行结果如下。
添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
五、this.props.children
this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点（查看 ）。
var NotesList = React.createClass({
render: function() {
React.Children.map(this.props.children, function (child) {
return &li>{child}&/li>;
ReactDOM.render(
&NotesList>
&span>hello&/span>
&span>world&/span>
&/NotesList>,
document.body
上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取，运行结果如下。
这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。
React 提供一个工具方法
来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法，请参考。
六、PropTypes
组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。
组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求（查看 ）。
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
render: function() {
return &h1> {this.props.title} &/h1&;
上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。
var data = 123;
ReactDOM.render(
&MyTitle title={data} /&,
document.body
这样一来，title属性就通不过验证了。控制台会显示一行错误信息。
Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.
更多的PropTypes设置，可以查看。
此外，getDefaultProps 方法可以用来设置组件属性的默认值。
var MyTitle = React.createClass({
getDefaultProps : function () {
title : 'Hello World'
render: function() {
return &h1& {this.props.title} &/h1&;
ReactDOM.render(
&MyTitle /&,
document.body
上面代码会输出"Hello World"。
七、获取真实的DOM节点
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做
，它可以极大提高网页的性能表现。
但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性（查看
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
render: function() {
&input type="text" ref="myTextInput" />
&input type="button" value="Focus the text input" onClick={this.handleClick} />
ReactDOM.render(
&MyComponent />,
document.getElementById('example')
上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。
React 组件支持很多事件，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等，完整的事件清单请查看。
八、this.state
组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI （查看
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
handleClick: function(event) {
this.setState({liked: !this.state.liked});
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
&p onClick={this.handleClick}>
You {text} this. Click to toggle.
ReactDOM.render(
&LikeButton />,
document.getElementById('example')
上面代码是一个 LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取（查看
var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
handleChange: function(event) {
this.setState({value: event.target.value});
render: function () {
var value = this.state.
&input type="text" value={value} onChange={this.handleChange} />
&p>{value}&/p>
ReactDOM.render(&Input/>, document.body);
上面代码中，文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况，更多介绍请参考。
十、组件的生命周期
组件的分成三个状态：
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)：组件判断是否重新渲染时调用
这些方法的详细说明，可以参考。下面是一个例子（查看
var Hello = React.createClass({
getInitialState: function () {
opacity: 1.0
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.
opacity -= .05;
if (opacity & 0.1) {
opacity = 1.0;
this.setState({
opacity: opacity
}.bind(this), 100);
render: function () {
&div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
ReactDOM.render(
&Hello name="world"/>,
document.body
上面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。
另外，组件的style属性的设置方式也值得注意，不能写成
style="opacity:{this.state.opacity};"
style={{opacity: this.state.opacity}}
这是因为 是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。
十一、Ajax
组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI （查看
var UserGist = React.createClass({
getInitialState: function() {
username: '',
lastGistUrl: ''
componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
if (this.isMounted()) {
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
}.bind(this));
render: function() {
{this.state.username}'s last gist is
&a href={this.state.lastGistUrl}>here&/a>.
ReactDOM.render(
&UserGist source="/users/octocat/gists" />,
document.body
上面代码使用 jQuery 完成 Ajax 请求，这是为了便于说明。React 本身没有任何依赖，完全可以不用jQuery，而使用其他库。
我们甚至可以把一个Promise对象传入组件，请看。
ReactDOM.render(
promise={$.getJSON('/search/repositories?q=javascript&sort=stars')}
document.body
上面代码从Github的API抓取数据，然后将Promise对象作为属性，传给RepoList组件。
如果Promise对象正在抓取数据（pending状态），组件显示"正在加载"；如果Promise对象报错（rejected状态），组件显示报错信息；如果Promise对象抓取数据成功（fulfilled状态），组件显示获取的数据。
var RepoList = React.createClass({
getInitialState: function() {
return { loading: true, error: null, data: null};
componentDidMount() {
this.props.promise.then(
value => this.setState({loading: false, data: value}),
error => this.setState({loading: false, error: error}));
render: function() {
if (this.state.loading) {
return &span>Loading...&/span>;
else if (this.state.error !== null) {
return &span>Error: {this.state.error.message}&/span>;
var repos = this.state.data.
var repoList = repos.map(function (repo) {
&a href={repo.html_url}>{repo.name}&/a> ({repo.stargazers_count} stars) &br/> {repo.description}
&h1>Most Popular JavaScript Projects in Github&/h1>
&ol>{repoList}&/ol>
十二、参考链接
, by Sebastian Markb?ge
, by Jack Callister
, by Ken Wheeler
, by Ryan Clark
, by Justin Deal
, by Binary Muse
, by zigomir
真正学会 React 是一个漫长的过程。
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
浏览器安全的基石是"同源政策"（same-origin policy）。很多开发者都知道这一点，但了解得不全面。
前面的文章介绍了 Systemd 的操作命令和基本用法，今天给出一个实例，如何使用 Systemd 启动一个 Node 应用。