component是通過自定義的幾個函數(shù)來控制組件在生命周期中的各個階段動作（本處所寫的state同意指當(dāng)前組件內(nèi)部定義的state）
- constructor(props, context)
構(gòu)造函數(shù)皿渗，在創(chuàng)建組件的時候調(diào)用一次斩芭，props為父組件傳到子組件中的所有屬性集合
- componentWillMount()
在組件加載前執(zhí)行一次，如果在該處更新state乐疆，組件渲染時是讀取到的是最新的state划乖。
- componentDidMount()
在組件加載后執(zhí)行一次，此時組件已渲染過一次挤土，可調(diào)用this.refs獲取DOM節(jié)點
- componentWillReceiveProps(nextProps)
nextProps是父組件傳遞給子組件的最新props琴庵。子組件已加載，父組件發(fā)生render的時候子組件就會
調(diào)用componentWillReceiveProps（不管props有沒有更新，也不管父子組件之間有沒有數(shù)據(jù)交換）
- shouldComponentUpdate(nextProps, nextState)
返回boolean值迷殿，默認(rèn)返回true儿礼。nextProps是父組件傳遞給子組件的最新props，nextState為子組件最新的state庆寺。
通過返回true/false來控制子組件是否需要重新渲染蚊夫。有一些數(shù)據(jù)的改變并不需要重新渲染，在該處就可以攔截止邮，做優(yōu)化處理这橙。
- componentWillUpdate(nextProps, nextState)
shouldComponentUpdate返回true或者調(diào)用forceUpdate之后，componentWillUpdate會被調(diào)用
- componentDidUpdate(preProps, preState)
除了首次render之后調(diào)用componentDidMount导披，其它render結(jié)束之后都是調(diào)用componentDidUpdate屈扎。
componentWillMount、componentDidMount和componentWillUpdate撩匕、componentDidUpdate可以對應(yīng)起來鹰晨。區(qū)別在于，前者只有在掛載的時候會被調(diào)用止毕；而后者在以后的每次更新渲染之后都會被調(diào)用模蜡。
- componentWillUnmount()
組件被卸載的時候調(diào)用。一般在componentDidMount里面注冊的事件需要在這里刪除扁凛。
觸發(fā)render方法
在react中忍疾，觸發(fā)render的有4條路徑。
以下假設(shè)shouldComponentUpdate都是按照默認(rèn)返回true的方式谨朝。
首次渲染Initial Render
調(diào)用this.setState （并不是一次setState會觸發(fā)一次render卤妒，React可能會合并操作，再一次性進(jìn)行render）
父組件發(fā)生更新（一般就是props發(fā)生改變字币，但是就算props沒有改變或者父子組件之間沒有數(shù)據(jù)交換也會觸發(fā)render）
調(diào)用this.forceUpdate
常用語法
- class 屬性需要寫成 className 则披，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字洗出。
- style={{}} 最外層{}告訴jsx這是js語法士复，而里面的{}表示樣式包裹成對象
- this.props 獲取當(dāng)前組件的props屬性對象。
- this.state 獲取當(dāng)前組件的state狀態(tài)值對象
- this.setState 更新當(dāng)前組件state狀態(tài)值對象(使用redux后不建議在組件內(nèi)使用自身的state)
- this.props.children 獲取組件的所有子節(jié)點翩活，使用React.Children.map來遍歷阱洪，從而忽略掉this.props.children返回值的類型
- this.refs.[refName] 獲取真實DOM節(jié)點，故必須在組件render后調(diào)用
<input type="text" ref="myTextInput" />
獲取該節(jié)點：this.refs.myTextInput;
- PropTypes 用來驗證組件的props入?yún)⑹欠穹弦?/li>
Index.propTypes = {
value: PropTypes.string.isRequired,
onIncreaseClick: PropTypes.func.isRequired,
onReduceClick: PropTypes.func.isRequired
}
- key 循環(huán)輸出元素時菠镇，用來唯一標(biāo)識同父同層級的兄弟元素澄峰，當(dāng)React作diff時，只要子元素有key屬性辟犀，便會去原v-dom樹中相應(yīng)位置（當(dāng)前橫向比較的層級）尋找是否有同key元素，比較它們是否完全相同，若是則復(fù)用該元素堂竟，免去不必要的操作魂毁。故不推薦用數(shù)組index來作為key，可用數(shù)據(jù)對象的某個唯一屬性出嘹，或是對數(shù)據(jù)進(jìn)行hash來生成key席楚。
- 求值表達(dá)式 使用{}包起來，在{}中不能直接使用if/for語句税稼，但可以返回值表達(dá)式
- 條件判斷 使用三元表達(dá)式來期待if-else烦秩，善用比較運算符“ || ”
- 函數(shù)表達(dá)式 使用(function(){})()來強制執(zhí)行函數(shù)，返回值
- 注釋 {/* 一般注釋, 用 {} 包圍 */}
React框架把component看作一個狀態(tài)機(jī)郎仆，通過改變狀態(tài)值來控制頁面view的輸出只祠，其實你可以看成React框架注重數(shù)據(jù)與DOM的分離，用數(shù)據(jù)變化來控制DOM的變化扰肌，不同于jQuery直接對DOM對象的操作抛寝。
- 向react中插入HTML字符串
<div className="place_list" dangerouslySetInnerHTML={{__html: mapPlace()}} onClick={this.handleChooseCity.bind(this)}>
</div>
- 在react的組件中實現(xiàn)路由跳轉(zhuǎn) this.props.history.push(url)
