React 元件生命周期

在本章節中我們将讨論 React 元件的生命周期。 

元件的生命周期可分成三個狀态：

Mounting：已插入真實 DOM

Updating：正在被重新渲染

Unmounting：已移出真實 DOM

生命周期的方法有：

componentWillMount 在渲染前調用,在用戶端也在服務端。

componentDidMount : 在第一次渲染後調用，隻在用戶端。之後元件已經生成了對應的DOM結構，可以通過this.getDOMNode()來進行通路。 如果你想和其他JavaScript架構一起使用，可以在這個方法中調用setTimeout, setInterval或者發送AJAX請求等操作(防止異步操作阻塞UI)。

componentWillReceiveProps 在元件接收到一個新的 prop (更新後)時被調用。這個方法在初始化render時不會被調用。

shouldComponentUpdate 傳回一個布爾值。在元件接收到新的props或者state時被調用。在初始化時或者使用forceUpdate時不被調用。 

可以在你确認不需要更新元件時使用。

componentWillUpdate在元件接收到新的props或者state但還沒有render時被調用。在初始化時不會被調用。

componentDidUpdate 在元件完成更新後立即調用。在初始化時不會被調用。

componentWillUnmount在元件從 DOM 中移除的時候立刻被調用。

這些方法的詳細說明，可以參考官方文檔。

以下執行個體在 Hello 元件加載以後，通過 componentDidMount 方法設定一個定時器，每隔100毫秒重新設定元件的透明度，并重新渲染：

​​嘗試一下 »​​

以下執行個體初始化 state ， setNewnumber 用于更新 state。所有生命周期在 Content 元件中。