本篇提取信息自阮一峰老师的博客：http://www.ruanyifeng.com/blog/2015/03/react.html
一，React是什么
A JavaScript library for building user interfaces。
React一个基于JS的MVC框架，由于我们在手机浏览器上运行的Web App的性能不如在应用商店下载的Native APP，其原因主要由于DOM（DOM是Document Object Model的英文缩写，是一种树式文件结构，提供给JS用来动态修改文档状态）会拖慢JS，所以我们希望用写Web APP的方式写Native APP，这样就会只需要写一组UI就可以同时适用于服务器，浏览器和手机了。
二，React的基本使用
2.1 HTML模板
1. 代码一般用到三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
2. React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要在<script> 标签的 type 属性设为 text/babel，即加上 type="text/babel" 。
2.2 ReactDOM.render
ReactDOM.render是React最基本的方法，用于将模板转化为HTML语言，并插入指定的DOM节点。
2.3 JSX 的基本语法规则：
1. 遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。
2. JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="../build/react.development.js"></script>
<script src="../build/react-dom.development.js"></script>
<script src="../build/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>三，React重要组成
3.1 组件
React允许将代码封装成组件（相当于类），然后像插入普通HTML标签一样，在网页中插入组件。
3.2 this.props.children
JSX由于可以直接插入JS，所以要声明一个快捷表示组件全部子节点的方式。
this.props对象的属性与组件属性一一对应
this.props.children表示组件的所有子节点
3.3 ProTypes
组件的属性可以接受任意值，所有我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求
比如我们可以设定Mytitles组件的title必须为字符串
ProTypes:{ title: React, PropTypes.String.isRequired}
四，React优势
4.1 获取真正的DOM节点
组件并不是真正的DOM，组件只有插入文档之后，才会变为真实的DOM。组件->虚拟DOM->真实DOM，查看真实DOM需要ref属性，用于事件动作控制，可以极大提升网页反应速度。
4.2 this.state
React把组件看成一个状态机，在与用户互动下状态变化。this.props表示一旦定义就不再改变的属性，this.state是可以互动变化的属性
4.3 表单
用户在表单填入的内容，属于用户跟组件的互动，所以不能用this.props读取，而要定义一个OnChange的回调函数来做
4.4 组件的生命周期
Mounting:已插入真实的DOM；Updating:正在被重新渲染 Unmounting:已移出真实DOM
4.5 Ajax
异步JS加XML，用来动态刷新页面。组件的数据来源通常通过Ajax请求从Server中获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI。