環(huán)境配置：
首先根據(jù)官網(wǎng)的教程，建立一個(gè)簡(jiǎn)單的工程需要引入三個(gè)文件：react.js胧砰、react-dom.js苇瓣、babel.min.js。其中bable.min.js可以是教程中的鏈接哲嘲，也可以是自己下載的文件直接拷貝進(jìn)去媳禁，然后直接使用即可，這里需要申明js的類型為text/babel囱怕。
簡(jiǎn)單使用
可以看到丧枪，我們使用一個(gè)組件首先繼承React.Componet拧烦，聲明方法render(){}钝计，render方法顧名思義是用來渲染組件，render直接返回一個(gè)html標(biāo)簽债沮，標(biāo)簽里面就是我們要展現(xiàn)的頁(yè)面內(nèi)容本鸣，這里使用的JSX的語(yǔ)法，如果編輯器不支持JSX語(yǔ)法闷煤，需要在設(shè)置->Languages->JavaScript中切換涮瞻。
另外有一點(diǎn)是，這里的組件可以分裝嵌套使用近顷，就像java/Android中的組件繼承、嵌套是一個(gè)概念窒升，非常接近java的語(yǔ)法了，這就是組件化域醇，最大的好處是實(shí)現(xiàn)組件的重用冤寿。
最后需要把組件繪制到頁(yè)面中，ReactDOM.render(),把需要渲染的組件和需要渲染的位置傳入其中殴瘦，最后在頁(yè)面中展示出來号杠。
這里的DOM是react的虛擬DOM姨蟋，里面的節(jié)點(diǎn)既可以包含標(biāo)簽，又可以包含自定義的組件眼溶，區(qū)別在于html標(biāo)簽小寫開頭，自定義的大寫開頭灌旧，可以實(shí)現(xiàn)快平臺(tái)绰筛。
state--狀態(tài)
一般來說，你需要在constructor中初始化state
React 把組件看成是一個(gè)狀態(tài)機(jī)（State Machines）衡蚂。通過與用戶的交互骏庸，實(shí)現(xiàn)不同狀態(tài)敞恋，然后渲染 UI，讓用戶界面和數(shù)據(jù)保持一致硬猫。
React 里改执，只需更新組件的 state辈挂，然后根據(jù)新的 state 重新渲染用戶界面（不要操作 DOM）裹粤。
不需要直接操作DOM，而是通過修改state拇泣，自動(dòng)更新界面
示例：
lass Text extends React.Component {
//設(shè)置初始狀態(tài)的值
getInitialState() {
return {isLike:false}
}
//響應(yīng)點(diǎn)擊事件
handleClick() {
//改變狀態(tài)
this.setState({isLike:!this.state.isLike});
}
render() {
var text = this.state.isLike?"確定":"取消"
return <p onClick={this.handleClick}>
這是{text}按鈕
</p>
}
}
ReactDOM.render(<Text/>,document.getElementById("mydiv"));
/*Uncaught TypeError: Cannot read property 'isLike' of null*/
這里代碼說明：
- 在React中的屬性命名遵循小駝峰命名法矮锈，不然無(wú)法識(shí)別苞笨，如果上面的onClick
- 通過響應(yīng)點(diǎn)擊事件，調(diào)用this.setState()方法給組件的state屬性賦值瀑凝，改變state的值，從而react自動(dòng)重新調(diào)用的render方法重新渲染
- 給state賦值之前需要在組件的生命周期getInitialState()方法給state進(jìn)行初始化工作谚中，getInitialState在組件創(chuàng)建的時(shí)候回調(diào)用寥枝。
然而這樣運(yùn)行會(huì)報(bào)錯(cuò)(這里需要安裝react的官方chorme的插件)：
Uncaught TypeError: Cannot read property 'isLike' of null
這里說isLike為空脉顿？說明getInitialState方法沒有被調(diào)用点寥，其實(shí)這里還涉及到另外一個(gè)知識(shí)：
react創(chuàng)建組件有兩種方式，第一種就像上述代碼直接繼承蔽莱，第二種是調(diào)用React.creatClass()方法戚长，第二種方式才能走生命周期的方法，將代碼改為：
var Text = React.createClass( {
//設(shè)置初始狀態(tài)的值
getInitialState:function() {
return {isLike:false}
},
//響應(yīng)點(diǎn)擊事件
handleClick:function() {
//改變狀態(tài)
this.setState({isLike:!this.state.isLike});
},
render:function() {
var text = this.state.isLike?"確定":"取消"
return <p onClick={this.handleClick}>
這是{text}按鈕
</p>
}
})
如果需要用繼承的方式個(gè)state賦值仪糖，需要在構(gòu)造函數(shù)里面，如果是原生的js代碼需要操作DOM：$('#id').innerText = "";這樣子就不能跨平臺(tái)了攒驰。
props -- 屬性
props是在父組件中指定故爵，而且一經(jīng)指定诬垂，在被指定的組件的生命周期中則不再改變。 對(duì)于需要改變的數(shù)據(jù)结窘，我們需要使用state
state 和 props 主要的區(qū)別在于 props 是不可變的晦鞋，而 state 可以根據(jù)與用戶交互來改變。這就是為什么有些容器組件需要定義 state 來更新和修改數(shù)據(jù)悠垛。 而子組件只能通過 props 來傳遞數(shù)據(jù)确买。
首先看下案例：
var Text = React.createClass({
render : function () {
return <p>{this.props.name}</p>
}
})
ReactDOM.render(<Text name="I Love You"/>,document.getElementById("mydiv"));
通過在引用的時(shí)候在組件的標(biāo)簽內(nèi)命名key:value值，這樣傳入的值就是賦值給這個(gè)組件的默認(rèn)屬性芭商，通過this.props.key來使用搀缠，這個(gè)屬性和java的構(gòu)造穿參類似。
那怎么理解子組件只能通過props來傳遞數(shù)據(jù)呢簸州？試想這樣一個(gè)場(chǎng)景：父組件包裹子組件歧譬，當(dāng)父組件內(nèi)容改變的時(shí)候子組件跟著要改變，這就需要通過props給子組件串值矢洲。
案例：
//子組件
class TextComponet extends React.Component {
render() {
return <div>hello {this.props.text}</div>
}
}
//父組件
var WrapperComponent = React.createClass({
getInitialState:function () {
return {text:""}
},
//e是Event對(duì)象缩焦，target是目標(biāo)對(duì)象责静，value是值泰演。
handleChange: function (e) {
// alert(e.target.value);
this.setState({text:e.target.value});
},
render:function () {
return <div>
<TextComponet text={this.state.text}/>
<input type="text" onChange={this.handleChange}/>
</div>
}
})
ReactDOM.render(<WrapperComponent name="I Love You"/>,document.getElementById("mydiv"));
上面案例經(jīng)歷了的步驟：
1葱轩、給父組件狀態(tài)賦初始值
2靴拱、輸入框變化——>修改父組件的state
3、state變化重新渲染調(diào)用render()袜炕，子組件也會(huì)重新渲染偎窘，把父組件的state值作為子組件的props值傳遞給子組件。
4陌知、子組件的內(nèi)容改變仆葡。
這個(gè)方法可以當(dāng)做一個(gè)模板套路來是用。
那么子組件發(fā)生變化怎么通知父組件呢沿盅？
來個(gè)表單提交的例子：
var ChildGenderSelect = React.createClass({
render:function () {
return <select onChange={this.props.handleSelectChange}>
<option value="1">男</option>
<option value="0">女</option>
</select>
}
})
var ParentForm = React.createClass({
getInitialState:function () {
return {gender:0}
},
handleChange: function (e) {
this.setState({gender:e.target.value})
//ajax發(fā)起請(qǐng)求
},
handlSubmit:function (e) {
//屏蔽表單的默認(rèn)行為
e.preventDefault()
var request = new XMLHttpRequest();
request.open("GET","text.json?gender=" + this.state.gender);
request.onreadystatechange = handler;
request.setRequestHeader("Accept","application/json");
request.responseType="json";
request.send();
function handler() {
if (this.status === 200) {
console.log("ok");
}
}
},
render: function () {
return <form onSubmit={this.handlSubmit}>
<ChildGenderSelect handleSelectChange={this.handleChange}/>
<button type="submit">提交</button>
</form>
}
})
ReactDOM.render(<ParentForm/>,document.getElementById("mydiv"));
解析:父組件傳遞給子組件的props一個(gè)父組件的方法handleChange(),當(dāng)子組件的選擇器發(fā)生改變的時(shí)候通過調(diào)用this.props.handleSelectChange()韧掩，最終調(diào)用父組件的handleChage(),和java的觀察者模式思想有點(diǎn)像窖铡。
小結(jié)：父組件通知子組件變化通過改變父組件的狀態(tài)，把父組件的狀態(tài)值當(dāng)做子組件的props傳遞進(jìn)去万伤，當(dāng)父組件的state發(fā)生改變的時(shí)候重新調(diào)用render方法敌买，從而達(dá)到傳值的目的阶界，而子組件通知父組件聋庵，通過傳遞父組件方法給子組件的props芙粱，當(dāng)子組件發(fā)生改變的時(shí)候回調(diào)這個(gè)方法春畔，和java的觀察者很像。
React的生命周期
1.getDefaultProps
作用于組件類律姨，只調(diào)用一次，返回對(duì)象用于設(shè)置默認(rèn)的props扣孟，對(duì)于引用值荣赶，會(huì)在實(shí)例中共享拔创。
2.getInitialState
作用于組件的實(shí)例，在實(shí)例創(chuàng)建時(shí)調(diào)用一次伏蚊，用于初始化每個(gè)實(shí)例的state躏吊，此時(shí)可以訪問this.props。
3.componentWillMount
在完成首次渲染之前調(diào)用比伏，此時(shí)仍可以修改組件的state赁项。
4.render
必選的方法，創(chuàng)建虛擬DOM悠菜，該方法具有特殊的規(guī)則：
- 只能通過this.props和this.state訪問數(shù)據(jù)
- 可以返回null悔醋、false或任何React組件
- 只能出現(xiàn)一個(gè)頂級(jí)組件（不能返回?cái)?shù)組）
- 不能改變組件的狀態(tài)
- 不能修改DOM的輸出
5.componentDidMount
真實(shí)的DOM被渲染出來后調(diào)用鹦聪，在該方法中可通過this.getDOMNode()訪問到真實(shí)的DOM元素蒂秘。此時(shí)已可以使用其他類庫(kù)來操作這個(gè)DOM姻僧。
在服務(wù)端中，該方法不會(huì)被調(diào)用段化。
6.componentWillReceiveProps
組件接收到新的props時(shí)調(diào)用显熏，并將其作為參數(shù)nextProps使用，此時(shí)可以更改組件props及state缓升。
componentWillReceiveProps: function(nextProps) {
if (nextProps.bool) {
this.setState({
bool: true
});
}
}
7.shouldComponentUpdate
組件是否應(yīng)當(dāng)渲染新的props或state蕴轨，返回false表示跳過后續(xù)的生命周期方法，通常不需要使用以避免出現(xiàn)bug歧寺。在出現(xiàn)應(yīng)用的瓶頸時(shí)棘脐，可通過該方法進(jìn)行適當(dāng)?shù)膬?yōu)化。
在首次渲染期間或者調(diào)用了forceUpdate方法后顷链，該方法不會(huì)被調(diào)用
8.componentWillUpdate
接收到新的props或者state后屈梁，進(jìn)行渲染之前調(diào)用，此時(shí)不允許更新props或state煞抬。
9.componentDidUpdate
完成渲染新的props或者state后調(diào)用构哺，此時(shí)可以訪問到新的DOM元素。
10.componentWillUnmount
組件被移除之前被調(diào)用蝗碎，可以用于做一些清理工作旗扑，在componentDidMount方法中添加的所有任務(wù)都需要在該方法中撤銷臀防，比如創(chuàng)建的定時(shí)器或添加的事件監(jiān)聽器。
