在組件的整個(gè)生命周期中，隨著該組件的props或者state發(fā)生改變，其DOM表現(xiàn)也會(huì)有相應(yīng)的變化拭嫁。一個(gè)組件就是一個(gè)狀態(tài)機(jī)，對(duì)于特定地輸入抓于，它總返回一致的輸出做粤。
一個(gè)React組件的生命周期分為三個(gè)部分：實(shí)例化、存在期和銷毀時(shí)捉撮。
實(shí)例化
當(dāng)組件在客戶端被實(shí)例化怕品，第一次被創(chuàng)建時(shí)，以下方法依次被調(diào)用：
1巾遭、getDefaultProps
2肉康、getInitialState
3闯估、componentWillMount
4、render
5吼和、componentDidMount
當(dāng)組件在服務(wù)端被實(shí)例化涨薪，首次被創(chuàng)建時(shí)，以下方法依次被調(diào)用：
1炫乓、getDefaultProps
2刚夺、getInitialState
3、componentWillMount
4末捣、render
componentDidMount 不會(huì)在服務(wù)端被渲染的過程中調(diào)用侠姑。
getDefaultProps
對(duì)于每個(gè)組件實(shí)例來講，這個(gè)方法只會(huì)調(diào)用一次箩做，該組件類的所有后續(xù)應(yīng)用莽红，getDefaultPops 將不會(huì)再被調(diào)用，其返回的對(duì)象可以用于設(shè)置默認(rèn)的 props(properties的縮寫) 值邦邦。
varHello = React.creatClass({getDefaultProps:function(){return{name:'pomy',git:'dwqs'}? ? },render:function(){return(
也可以在掛載組件的時(shí)候設(shè)置 props：
vardata= [{title: 'Hello'}];
或者調(diào)用?setProps?（一般不需要調(diào)用）來設(shè)置其 props：
vardata= [{title: 'Hello'}];varHello=React.render(, document.body);Hello.setProps({data:data});
但只能在子組件或組件樹上調(diào)用 setProps船老。別調(diào)用 this.setProps 或者 直接修改 this.props。將其當(dāng)做只讀數(shù)據(jù)圃酵。
React通過?propTypes?提供了一種驗(yàn)證 props 的方式柳畔，propTypes?是一個(gè)配置對(duì)象，用于定義屬性類型：
varsurvey = React.createClass({? ? propTypes: {? ? ? ? survey: React.PropTypes.shape({? ? ? ? ? ? id: React.PropTypes.number.isRequired}).isRequired,? ? ? ? onClick: React.PropTypes.func,? ? ? ? name: React.PropTypes.string,? ? ? ? score: React.PropTypes.array...? ? },//...})
組件初始化時(shí)郭赐，如果傳遞的屬性和?propTypes?不匹配薪韩，則會(huì)打印一個(gè) console.warn 日志。如果是可選配置捌锭，可以去掉.isRequired俘陷。常用的 PropTypes 如下：
getInitialState
對(duì)于組件的每個(gè)實(shí)例來說，這個(gè)方法的調(diào)用有且只有一次观谦，用來初始化每個(gè)實(shí)例的 state拉盾，在這個(gè)方法里，可以訪問組件的 props豁状。每一個(gè)React組件都有自己的 state捉偏，其與 props 的區(qū)別在于 state只存在組件的內(nèi)部，props 在所有實(shí)例中共享泻红。
getInitialState 和 getDefaultPops 的調(diào)用是有區(qū)別的夭禽，getDefaultPops 是對(duì)于組件類來說只調(diào)用一次，后續(xù)該類的應(yīng)用都不會(huì)被調(diào)用谊路，而 getInitialState 是對(duì)于每個(gè)組件實(shí)例來講都會(huì)調(diào)用讹躯，并且只調(diào)一次。
varLikeButton = React.createClass({getInitialState:function(){return{liked:false};? },handleClick:function(event){this.setState({liked: !this.state.liked});? },render:function(){vartext =this.state.liked ?'like':'haven\'t liked';return(You {text} this. Click to toggle.);? }});ReactDOM.render(,? document.getElementById('example'));
每次修改 state，都會(huì)重新渲染組件潮梯，實(shí)例化后通過 state 更新組件骗灶，會(huì)依次調(diào)用下列方法：
1、shouldComponentUpdate
2秉馏、componentWillUpdate
3矿卑、render
4、componentDidUpdate
但是不要直接修改 this.state沃饶，要通過 this.setState 方法來修改母廷。
componentWillMount
該方法在首次渲染之前調(diào)用，也是再 render 方法調(diào)用之前修改 state 的最后一次機(jī)會(huì)糊肤。
render
該方法會(huì)創(chuàng)建一個(gè)虛擬DOM琴昆，用來表示組件的輸出。對(duì)于一個(gè)組件來講馆揉，render方法是唯一一個(gè)必需的方法业舍。render方法需要滿足下面幾點(diǎn)：
只能通過 this.props 和 this.state 訪問數(shù)據(jù)（不能修改）
可以返回 null,false 或者任何React組件
只能出現(xiàn)一個(gè)頂級(jí)組件，不能返回一組元素
不能改變組件的狀態(tài)
不能修改DOM的輸出
render方法返回的結(jié)果并不是真正的DOM元素升酣，而是一個(gè)虛擬的表現(xiàn)舷暮，類似于一個(gè)DOM tree的結(jié)構(gòu)的對(duì)象。react之所以效率高噩茄，就是這個(gè)原因下面。
componentDidMount
該方法不會(huì)在服務(wù)端被渲染的過程中調(diào)用。該方法被調(diào)用時(shí)绩聘，已經(jīng)渲染出真實(shí)的 DOM沥割，可以再該方法中通過?this.getDOMNode()?訪問到真實(shí)的 DOM(推薦使用?ReactDOM.findDOMNode())。
vardata = [..];varcomp = React.createClass({? ? render:function(){return? ? },? ? componentDidMount:function(){? ? ? ? $(this.getDOMNode()).autoComplete({? ? ? ? ? ? src: data? ? ? ? })? ? }})
由于組件并不是真實(shí)的 DOM 節(jié)點(diǎn)凿菩，而是存在于內(nèi)存之中的一種數(shù)據(jù)結(jié)構(gòu)机杜，叫做虛擬 DOM （virtual DOM）。只有當(dāng)它插入文檔以后衅谷，才會(huì)變成真實(shí)的 DOM 椒拗。有時(shí)需要從組件獲取真實(shí) DOM 的節(jié)點(diǎn)，這時(shí)就要用到?ref?屬性：
varArea = React.createClass({? ? render:function(){this.getDOMNode();//render調(diào)用時(shí)获黔，組件未掛載蚀苛，這里將報(bào)錯(cuò)return? ? },? ? componentDidMount:function(){varcanvas =this.refs.mainCanvas.getDOMNode();//這是有效的，可以訪問到 Canvas 節(jié)點(diǎn)}})
需要注意的是肢执，由于?this.refs.[refName]?屬性獲取的是真實(shí) DOM 枉阵，所以必須等到虛擬 DOM 插入文檔以后译红，才能使用這個(gè)屬性预茄，否則會(huì)報(bào)錯(cuò)。
存在期
此時(shí)組件已經(jīng)渲染好并且用戶可以與它進(jìn)行交互，比如鼠標(biāo)點(diǎn)擊耻陕，手指點(diǎn)按拙徽，或者其它的一些事件，導(dǎo)致應(yīng)用狀態(tài)的改變诗宣，你將會(huì)看到下面的方法依次被調(diào)用
1膘怕、componentWillReceiveProps
2、shouldComponentUpdate
3召庞、componentWillUpdate
4岛心、render
5、componentDidUpdate
componentWillReceiveProps
組件的 props 屬性可以通過父組件來更改篮灼，這時(shí)忘古，componentWillReceiveProps 將來被調(diào)用∽缬眨可以在這個(gè)方法里更新 state,以觸發(fā) render 方法重新渲染組件髓堪。
componentWillReceiveProps:function(nextProps){if(nextProps.checked !==undefined){this.setState({? ? ? ? ? ? checked: nextProps.checked? ? ? ? })? ? }}
shouldComponentUpdate
如果你確定組件的 props 或者 state 的改變不需要重新渲染，可以通過在這個(gè)方法里通過返回?false?來阻止組件的重新渲染娘荡，返回 `false 則不會(huì)執(zhí)行 render 以及后面的 componentWillUpdate干旁，componentDidUpdate 方法。
該方法是非必須的炮沐，并且大多數(shù)情況下沒有在開發(fā)中使用争群。
shouldComponentUpdate:function(nextProps, nextState){returnthis.state.checked === nextState.checked;//return false 則不更新組件}
componentWillUpdate
這個(gè)方法和 componentWillMount 類似，在組件接收到了新的 props 或者 state 即將進(jìn)行重新渲染前大年，componentWillUpdate(object nextProps, object nextState) 會(huì)被調(diào)用祭阀，注意不要在此方面里再去更新 props 或者 state。
componentDidUpdate
這個(gè)方法和 componentDidMount 類似鲜戒，在組件重新被渲染之后专控，componentDidUpdate(object prevProps, object prevState) 會(huì)被調(diào)用《舨停可以在這里訪問并修改 DOM伦腐。
銷毀時(shí)
componentWillUnmount
每當(dāng)React使用完一個(gè)組件，這個(gè)組件必須從 DOM 中卸載后被銷毀失都，此時(shí) componentWillUnmout 會(huì)被執(zhí)行柏蘑，完成所有的清理和銷毀工作，在 componentDidMount 中添加的任務(wù)都需要再該方法中撤銷粹庞，如創(chuàng)建的定時(shí)器或事件監(jiān)聽器咳焚。
當(dāng)再次裝載組件時(shí)，以下方法會(huì)被依次調(diào)用：
1庞溜、getInitialState
2革半、componentWillMount
3碑定、render
4、componentDidMount
反模式
在 getInitialState 方法中又官，嘗試通過 this.props 來創(chuàng)建 state 的做法是一種反模式延刘。
//反模式getDefaultProps:function(){return{data:newDate()? ? }},getInitialState:function(){return{day:this.props.date -newDate()? ? }},render:function(){return
經(jīng)過計(jì)算后的值不應(yīng)該賦給 state，正確的模式應(yīng)該是在渲染時(shí)計(jì)算這些值六敬。這樣保證了計(jì)算后的值永遠(yuǎn)不會(huì)與派生出它的 props 值不同步碘赖。
//正確模式getDefaultProps:function(){return{data:newDate()? ? }},render:function(){varday =this.props.date -newDate();return
如果只是簡(jiǎn)單的初始化 state，那么應(yīng)用反模式是沒有問題的外构。
