一：react了解
<script ?src="../build/react.js">? </script> ? ? //是react的核心庫
<script? src="../build/react-dom.js"> <script>? ? ? ? //是提供了與dom相關(guān)的功能
<script? src="../build/browser.min.js"> </script> ? ? //是將jsx語法轉(zhuǎn)為javascript語法JSX的基本語法：遇到html標(biāo)簽（以<開頭)莽鸭，就用html規(guī)則解析熙宇，? 遇到代碼塊（以{開頭）嘱腥，就用javascript規(guī)則解析

二：ReactDOM.render() //將模板轉(zhuǎn)為HTML語言，并插入指定的DOM節(jié)點(diǎn)褐健。
例：

ReactDOM.render(
? ?<div>hello</div>,
? ?document.getElementById('demo')?
?)

三：React.createClass()? //生成一個(gè)組件類
例：

var HelloName = React.createClass({
? ? ? render:function(){
? ? ? ? ? ? ? ? return ? <h1> hello {this.props.name} </h1>
? ? ?}
})

ReactDOM.render(
? ? ? ? ? <HelloName name="nana" /> ,
? ? ? ? ? document.getElementById('demo')
)

解析：1.HelloName就是一個(gè)組件類，模板插入.會(huì)自動(dòng)生成一個(gè)實(shí)例触菜；所有的組件類都必須要有自己的render方法扮授，用于輸出組件；?
?2.helloName組件加入了一個(gè)name屬性莱坎，組件的屬性可以在組件類的this.props對象上獲纫率健；
注意：1.組件類的第一個(gè)字母必須要大寫檐什，?
?2.只能包含一個(gè)頂層標(biāo)簽碴卧；

四：this.props.children? //屬性,表示組件的所有子節(jié)點(diǎn)
它的值可能有三類，沒有子節(jié)點(diǎn)的時(shí)候underfined,一個(gè)子節(jié)點(diǎn)的時(shí)候是object,多個(gè)Arrray;React提供了一個(gè)工具方法React.Children來處理this.props.children,利用React.Children.map來遍歷子節(jié)點(diǎn)this.props.children;
例：

var NoteList = React.createClass({
? ? ? ? render:function(){
? ? ? ? ? ? ? ? ? return? <ol>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? React.Children.map(this.props.children,function(child){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return <li>{child}</li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? </ol>
? ? ?}
)}

ReactDOM.render(
? ? <NoteList>
? ? ? ? ? ? ? <span>nana</span>
? ? ? ? ? ? ? <span>xiaona</span>
? ?</NoteList>,
? ? document.getElementById('demo')
)

五：組件類的PropTypes屬性乃正，用來驗(yàn)證組件實(shí)例的屬性是否符合要求;
例：

var MyTitle = React.createClass({
? ? ? PropTypes:{
? ? ? ? ? ? ? ? ? title:React.PropTypes.string.isRequired,
? ? ? },
? ? ?render:function(){
? ? ? ? ? ? return? <h1>{this.props.title}</h1>
? ? ?}
})

ReactDOM.render(
? ? ? ? <MyTitle? title="nana"/>? ,
? ? ? ? document.getElementById('dom')
)

React.PropTypes告訴React這個(gè)title屬性是必須的住册，而且必須是字符串；

六：getDefaultProps() //設(shè)置組件屬性的默認(rèn)值
?例：

var MyName = React.createClass({
? ? ? ? ? ?getDefaultProps:function(){
? ? ? ? ? ? ? ? ? return {name:'xiaona'}
? ? ? ? ? ?},
? ? ? ? ? render:function(){
? ? ? ? ? ? ? return? <h1>{this.props.name}</h1>
? ? ? ? ? }
})

ReactDOM.render(
? ? ? ? <MyName />,
? ? ? ? ?document.getElementById('dom')
)

七：getInitialState() // 設(shè)置組件的初始狀態(tài)
?例：

var ButtonLink = React.createClass({
? ? ? ? ? getInitialState:function(){
? ? ? ? ? ? ? ? ? ? return {link:false}
? ? ? ? ? },
? ? ? ? ? handleChangeState:function({
? ? ? ? ? ? ? ? this.setState({
? ? ? ? ? ? ? ? ? ? ? ? link:!this.state.link
? ? ? ? ? ? ? ? })
? ? ? ? },
? ? ? ? render:function(){
? ? ? ? ? ? ? ? var text = this.state.link ? '選擇' : '不選';
? ? ? ? ? ? ? ? return? <p onClick={this.handleChangeState}> {text} </p>
? ? ? }
});
ReactDOM.render(
? ? <ButtonLink ?/> ? ,? ?
? ? document.getElementById('demo6')?
)

詳解：1.getInitilaState(); 設(shè)置組件初始狀態(tài)瓮具；
? ? ? ? ? ?2.this.setState({}) ; 修改組件初始狀態(tài)荧飞；?
? ? ? ? ? ?3.this.state; 獲取組件初始狀態(tài)的某一值凡人；

八：獲取真實(shí)dom節(jié)點(diǎn)
組件并不是真實(shí)的dom,而是虛擬dom,存在于內(nèi)存之中，插入文檔之后叹阔，才會(huì)變成真實(shí)dom; 需要獲取到真實(shí)的dom節(jié)點(diǎn)挠轴，用到ref屬性；例：

var? InputText = React.createClass({
? ? ? ? ? handleGetValue:function(){
? ? ? ? ? ? ? ? ? ? this.refs.textValue.focus();
? ? ? ? ? ?},
? ? ? ? ? render :function(){
? ? ? ? ? ? ? return (
? ? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <input type="text" ?ref="textValue">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <input type="button" ?value="點(diǎn)擊獲取焦點(diǎn)" onClick={this.handleGetValue}>
? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? )
? ? ? ? ?}
});
ReactDOM.render(
? ? ? ? ?<InputText /> ,
? ? ? ? ?document.getElementById('demo')
)

詳解：1.虛擬dom是拿不到用戶輸入的內(nèi)容耳幢；文本輸入框必須要有一個(gè)ref屬性岸晦，然后this.refs.[refName]就會(huì)返回真實(shí)的dom節(jié)點(diǎn)；?
?2.this.refs.[refName]屬性獲取的是真實(shí)的dom,所以必須等到虛擬dom插入文檔以后睛藻；所以通過為組件指定click事件的回調(diào)函數(shù)启上，確保只有等到真實(shí)dom發(fā)生click事件之后，才會(huì)讀取this.refs.[refName]屬性店印；

九：表單獲取input的值 event.target.valuevar?

var GetVlaue = React.createClass({? ?
? ? ? getInitialState:function(){?
? ? ? ? ? return { text:'請輸入默認(rèn)值', }
? ? ? },
? ? ? handelGetText:function(event){
? ? ? ? ? ?this.setState({text:event.target.value})
? ? ? },
? ? render:function(){
? ? ? ? ? return (
? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <input? placehloder={this.state.text}? onClick={this.handelGetText}/>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span>{this.state.text}</span>
? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ?)
? ? }
});

ReactDOM.render(
? ? <Get Value />,
? ? document.getElementById('demo8')
）

十：組件的生命周期分為3個(gè)狀態(tài) ：?

Mounting插入真實(shí)的dom? ?
updating正在被重新渲染?
Unmounting移除出真實(shí)dom

3種狀態(tài)共計(jì)5種處理函數(shù)

compontentWillMount() 插入真實(shí)dom之前冈在；
compontentDidMount() 插入真實(shí)dom之后；
剩下的集中待理解之后按摘；

十一：Ajax