参考资料：
React 官网
阮一峰教程
菜鸟教程
React 初识
===
React 是一个用于构建用户界面的 JAVASCRIPT 库。
主要用于构建UI， 是 MVC** (模型(model)－用户界面(view)－控制器(controller))**中的 V（用户界面）。
JSX
React 使用JSX语法，它允许HTML与javascript混写。
遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；
遇到代码块（以 { 开头），就用 JavaScript 规则解析。
<h1> {this.props.title} </h1>
ReactDOM.render()
该方法是React的基本法，它可以将模板（下面的element以及component）转为HTML语言，再插入到指定的DOM中。
Element （元素）
===
描述的是你希望在屏幕中显示的内容
const element=<h1> hello world </h1>;
ReactDom.render(
element,
document.getElementById('root')
)
我们可以将该元素传递给DOM节点，通过ReactDOM.render()
React element 是不可改变的，在它创建了之后，它的属性，子元素都不能改变。如果非要改，就只能重新创建一个新的元素。
function tick(){
const element = (
<div>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
{/*每一次执行setInterval都会创建一个新的元素*/}
setInterval(tick, 1000);
Components and Props（组件和属性）
组件可以把UI（用户界面）分成许多独立的小块来单独考虑。
它可以接收任意形式的输入和 返回一个React element
定义一个组件有两种方式 （从React 角度来看这两种方法是相同的）
function Welcome(props){
return <h1>Hello, {props.name}</h1>;
} {/*js的函数形式*/}
class Welcome extends React.Component{
render(){
return <h1>Hello, {this.props.name}</h1>;
}
} {/*ES6中的类来定义*/}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
注意：
组件的名字只能用大写字母开头，否则会报错
组件类只能包含一个顶层标签，否则也会报错。
比如定义多个组件
function App () {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />
document.getElementById('root')
);
组件必须返回一个单一的根元素，所以我们用一个<div>元素来包含所有的 <Welcome /> element ，否则会报错。
在返回的根元素中（比如上面的<div >）,我们可以尽可能将有联系的部分合成一个组件。
注意：
定义一个function内的函数不能改变它的输入，比如下面第一种可以第二种不行。
function sum(a, b) {
return a + b;
}
function withdraw(account, amount) {
account.total -= amount;
}
State and Lifecycle（状态和生命周期）
在一开始时说“React element在一旦创建了之后，它的属性，子元素都不能改变。如果非要改，就只能重新创建一个新的元素。”所以每一次时间改变都要重新把element传递给DOM。但实际上，大多数React只执行一次 ReactDOM.render() ，所以引入State 。
React把组件看做是状态机，一开始有一个初始的State。通过与用户的交互导致State改变后，自动调用组件内的this.render 方法，再次渲染组件。
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" : "unliked";
retuen (
<p onClick={this.handleClick}>
你<b>{text}</b>我。点我切换状态。
</p>
);
}
});
ReactDOM.rennder(
<LikeButton />,
document.getElementById('root')
);
注意：
设置State的只能使用setState({comment: 'Hello'}); 方法
实现组件的生命周期
组件的周期分为三个状态
* Mounting 已插入真实DOM
* Updating 正在被重新渲染
* Unmounting 已移出真实DOM
React为每个状态都提供了两种处理函数，will函数在进入状态前调用，did函数在进入状态之后调用。共计五种：
* componentWillMount ()
* componentDidMount ()
* componentWillUpdate(object nextProps, object nextState)
* componentDidUpdate(object prevProps, object prevState)
* componentWillUnmount()
比如，我们当一个组件在一开始提交到DOM时可以设置一个不断更新State的计时器（timer）
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
当该组件从DOM中移除时可以清除这一个定时器
componentWillUnmount() {
clearInterval(this.timerID);
}