元件會隨著元件的props和state改變而發生變化，它的dom也會有相應的變化。
乙個元件就是乙個狀態機：對於特定的輸入，它總會返回一致的輸出。
react元件提供了生命週期的鉤子函式去響應元件不同時刻的狀態，元件的生命週期如下：
例項化
存在期
銷毀期例項化
首次呼叫元件時，有以下方法會被呼叫（注意順序，從上到下先後執行）：
getdefaultprops
這個方法是用來設定元件預設的props，元件生命週期只會呼叫一次。但是只適合react.createclass直接建立的元件，使用es6/es7建立的這個方法不可使用，es6/es7可以使用下面方式：
//es7
class
component
}//或者也可以在外面定義es6
class
component
extends
react.component
}}
class
component
extends
react.component
}
存在期
例項化後，當props或者state發生變化時，下面方法依次被呼叫：
沒當我們通過父元件更新子元件props時（這個也是唯一途徑），這個方法就會被呼叫。
componentwillreceiveprops
(nextprops){}
shouldcomponentupdate
(nextprops,nextstate){}
跟例項化時的render一樣，不多說
這個方法在更新真實的dom成功後呼叫，當我們需要訪問真實的dom時，這個方法就也經常用到。
銷毀期
銷毀階段，只有乙個函式被呼叫：
沒當元件使用完成，這個元件就必須從dom中銷毀，此時該方法就會被呼叫。當我們在元件中使用了setinterval，那我們就需要在這個方法中呼叫cleartimeout。
下面是一段測試**
/** 最上層component
*/class
components
extends
react.component
} componentwillmount()
componentdidmount()
componentwillreceiveprops()
shouldcomponentupdate(nextprops,nextstate)
componentwillupdate()
componentdidupdate()
render() else
return (
請檢視下面的console
div>)}}
components.defaultprops =
class
extends
react.component
} refresh())
}} render()/>
this.refresh()}>
更新component
div>)}}
//這個元件是沒有呼叫的，但是，getdeafultprops直接執行了
var test = react.createclass(
},render(),
})/*
*/
React 生命週期 生命週期方法
生命週期 掛載 更新 解除安裝 元件被建立 執行初始化 並被掛載到dom中，完成元件的第一次渲染 constructor props getderivedstatefromprops props,state render componentdidmount 元件被建立時會首先呼叫元件的構造方法，接受...
react 生命週期
首次例項化 例項化完成後的更新 元件已存在時的狀態改變 生命週期共提供了10個不同的api。1.getdefaultprops 作用於元件類，只呼叫一次，返回物件用於設定預設的props，對於引用值，會在例項中共享。2.getinitialstate 作用於元件的例項，在例項建立時呼叫一次，用於初始...
react生命週期
盜圖一張 第一次進入頁面列印結果 1 parent constructor 2 parent conponentwillmount 3 parent render 4 initial render constructor 5 componentwillmount 6 render 7 compone...