在組件的整個生命週期中,隨着該組件的props或者state發生改變,其DOM表現也會有相應的變化。一個組件就是一個狀態機,對於特定地輸入,它總返回一致的輸出。react
一個React組件的生命週期分爲三個部分:實例化、存在期和銷燬時。es6
當組件在客戶端被實例化,第一次被建立時,如下方法依次被調用:segmentfault
當組件在服務端被實例化,首次被建立時,如下方法依次被調用:函數
一、getDefaultProps
二、getInitialState
三、componentWillMount
四、renderthis
componentDidMount 不會在服務端被渲染的過程當中調用。code
對於每一個組件實例來說,這個方法只會調用一次,該組件類的全部後續應用,getDefaultPops 將不會再被調用,其返回的對象能夠用於設置默認的 props(properties的縮寫) 值。component
對於組件的每一個實例來講,這個方法的調用有且只有一次,用來初始化每一個實例的 state,在這個方法裏,能夠訪問組件的 props。每個React組件都有本身的 state,其與 props 的區別在於 state只存在組件的內部,props 在全部實例中共享。對象
getInitialState 和 getDefaultPops 的調用是有區別的,getDefaultPops 是對於組件類來講只調用一次,後續該類的應用都不會被調用,而 getInitialState 是對於每一個組件實例來說都會調用,而且只調一次。教程
每次修改 state,都會從新渲染組件,實例化後經過 state 更新組件,會依次調用下列方法:
一、shouldComponentUpdate
二、componentWillUpdate
三、render
四、componentDidUpdate生命週期
可是不要直接修改 this.state,要經過 this.setState 方法來修改。
該方法在首次渲染以前調用,也是再 render 方法調用以前修改 state 的最後一次機會。
render
該方法會建立一個虛擬DOM,用來表示組件的輸出。對於一個組件來說,render方法是惟一一個必需的方法。render方法須要知足下面幾點:
render方法返回的結果並非真正的DOM元素,而是一個虛擬的表現,相似於一個DOM tree的結構的對象。react之因此效率高,就是這個緣由。
該方法不會在服務端被渲染的過程當中調用。該方法被調用時,已經渲染出真實的 DOM,能夠在該方法中經過 this.refs 訪問到真實的 DOM。
class App extends Component { static defaultProps = { name:"默認值" } constructor(props) { super(props); this.state = { num : 0 }; this.addNum = this.addNum.bind(this); } addNum(e) { e.preventDefault(); var num = ++this.state.num; this.setState({ num:num }) } componentWillMount() { this.setState({ num:10 }) } render() { return ( <div className="App"> <div className="App-header" ref="header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Welcome to React{this.props.name}</h2> </div> <p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. </p> <button onClick={this.addNum}>{this.state.num}</button> </div> ); } componentDidMount() { console.log(this.refs.header) } }
須要注意的是,因爲 this.refs.[refName] 屬性獲取的是真實 DOM ,因此必須等到虛擬 DOM 插入文檔之後,才能使用這個屬性,不然會報錯。
此時組件已經渲染好而且用戶能夠與它進行交互,好比鼠標點擊,手指點按,或者其它的一些事件,致使應用狀態的改變,你將會看到下面的方法依次被調用
每當React使用完一個組件,這個組件必須從 DOM 中卸載後被銷燬,此時 componentWillUnmout 會被執行,完成全部的清理和銷燬工做,在 componentDidMount 中添加的任務都須要再該方法中撤銷,如建立的定時器或事件監聽器。
當再次裝載組件時,如下方法會被依次調用:
一、getInitialState
二、componentWillMount
三、render
四、componentDidMount
ES6 class
static propTypes
static defaultProps
constructor (this.state)對應createClass
propTypes
getDefaultProps
getInitialState
static propTypes props值的類型檢查 static defaultProps 設置屬性的默認值
constructor ( this.state ) 初始化每一個實例的statecomponentWillMount 該方法在首次渲染以前調用,也是再 render 方法調用以前修改 state 的最後一次機會。
componentDidMount 該方法被調用時,已經渲染出真實的 DOM,能夠在該方法中經過 this.refs 訪問到真實的
DOM。componentWillUnmount 每當React使用完一個組件,這個組件必須從 DOM 中卸載後被銷燬,此時會被執行
componentWillReceiveProps props在父組件改變時執行 shouldComponentUpdate
若是你肯定組件的 props 或者 state 的改變不須要從新渲染,能夠經過在這個方法裏經過返回 false 來阻止組件的從新渲染,返回
`false 則不會執行 render 以及後面的 componentWillUpdate,componentDidUpdate 方法componentWillUpdate 這個方法和 componentWillMount 相似,在組件接收到了新的 props 或者
state 即將進行從新渲染前, componentDidUpdate 這個方法和
<kdb>componentDidMount</kdb> 相似,在組件從新被渲染以後,會被調用。能夠在這裏訪問並修改 DOM。 render
渲染組件