參考資料：
React 官網(wǎng)
阮一峰教程
菜鳥(niǎo)教程
React 初識(shí)
===
React 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫(kù)。
主要用于構(gòu)建UI， 是 MVC** (模型(model)－用戶界面(view)－控制器(controller))**中的 V（用戶界面）。
JSX
React 使用JSX語(yǔ)法，它允許HTML與javascript混寫(xiě)。
遇到 HTML 標(biāo)簽（以 < 開(kāi)頭），就用 HTML 規(guī)則解析；
遇到代碼塊（以 { 開(kāi)頭），就用 JavaScript 規(guī)則解析。
<h1> {this.props.title} </h1>
ReactDOM.render()
該方法是React的基本法，它可以將模板（下面的element以及component）轉(zhuǎn)為HTML語(yǔ)言，再插入到指定的DOM中。
Element （元素）
===
描述的是你希望在屏幕中顯示的內(nèi)容
const element=<h1> hello world </h1>;
ReactDom.render(
element,
document.getElementById('root')
)
我們可以將該元素傳遞給DOM節(jié)點(diǎn)，通過(guò)ReactDOM.render()
React element 是不可改變的，在它創(chuàng)建了之后，它的屬性，子元素都不能改變。如果非要改，就只能重新創(chuàng)建一個(gè)新的元素。
function tick(){
const element = (
<div>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
{/*每一次執(zhí)行setInterval都會(huì)創(chuàng)建一個(gè)新的元素*/}
setInterval(tick, 1000);
Components and Props（組件和屬性）
組件可以把UI（用戶界面）分成許多獨(dú)立的小塊來(lái)單獨(dú)考慮。
它可以接收任意形式的輸入和 返回一個(gè)React element
定義一個(gè)組件有兩種方式 （從React 角度來(lái)看這兩種方法是相同的）
function Welcome(props){
return <h1>Hello, {props.name}</h1>;
} {/*js的函數(shù)形式*/}
class Welcome extends React.Component{
render(){
return <h1>Hello, {this.props.name}</h1>;
}
} {/*ES6中的類來(lái)定義*/}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
注意：
組件的名字只能用大寫(xiě)字母開(kāi)頭，否則會(huì)報(bào)錯(cuò)
組件類只能包含一個(gè)頂層標(biāo)簽，否則也會(huì)報(bào)錯(cuò)。
比如定義多個(gè)組件
function App () {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />
document.getElementById('root')
);
組件必須返回一個(gè)單一的根元素，所以我們用一個(gè)<div>元素來(lái)包含所有的 <Welcome /> element ，否則會(huì)報(bào)錯(cuò)。
在返回的根元素中（比如上面的<div >）,我們可以盡可能將有聯(lián)系的部分合成一個(gè)組件。
注意：
定義一個(gè)function內(nèi)的函數(shù)不能改變它的輸入，比如下面第一種可以第二種不行。
function sum(a, b) {
return a + b;
}
function withdraw(account, amount) {
account.total -= amount;
}
State and Lifecycle（狀態(tài)和生命周期）
在一開(kāi)始時(shí)說(shuō)“React element在一旦創(chuàng)建了之后，它的屬性，子元素都不能改變。如果非要改，就只能重新創(chuàng)建一個(gè)新的元素。”所以每一次時(shí)間改變都要重新把element傳遞給DOM。但實(shí)際上，大多數(shù)React只執(zhí)行一次 ReactDOM.render() ，所以引入State 。
React把組件看做是狀態(tài)機(jī)，一開(kāi)始有一個(gè)初始的State。通過(guò)與用戶的交互導(dǎo)致State改變后，自動(dòng)調(diào)用組件內(nèi)的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>我。點(diǎn)我切換狀態(tài)。
</p>
);
}
});
ReactDOM.rennder(
<LikeButton />,
document.getElementById('root')
);
注意：
設(shè)置State的只能使用setState({comment: 'Hello'}); 方法
實(shí)現(xiàn)組件的生命周期
組件的周期分為三個(gè)狀態(tài)
* Mounting 已插入真實(shí)DOM
* Updating 正在被重新渲染
* Unmounting 已移出真實(shí)DOM
React為每個(gè)狀態(tài)都提供了兩種處理函數(shù)，will函數(shù)在進(jìn)入狀態(tài)前調(diào)用，did函數(shù)在進(jìn)入狀態(tài)之后調(diào)用。共計(jì)五種：
* componentWillMount ()
* componentDidMount ()
* componentWillUpdate(object nextProps, object nextState)
* componentDidUpdate(object prevProps, object prevState)
* componentWillUnmount()
比如，我們當(dāng)一個(gè)組件在一開(kāi)始提交到DOM時(shí)可以設(shè)置一個(gè)不斷更新State的計(jì)時(shí)器（timer）
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
當(dāng)該組件從DOM中移除時(shí)可以清除這一個(gè)定時(shí)器
componentWillUnmount() {
clearInterval(this.timerID);
}