生命周期是react中的重要部分，理解它有助於我們更合理的書寫邏輯。

組件的生命周期可分成三個狀態：

• Mounting：已插入真實 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真實 DOM

生命周期的方法有：

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

componentDidMount : 在第一次渲染後調用，只在客戶端。之後組件已經生成了對應的DOM結構。

可以在這個方法中調用setTimeout, setInterval或者發送AJAX請求等操作(防止異步操作阻塞UI)。

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

shouldComponentUpdate : 返回一個布爾值。在組件接收到新的props或者state時被調用。

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

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

componentWillUnmount : 在組件從 DOM 中移除之前立刻被調用。

舉例如下：

class Ani extends React.Component {
    state={
        data:0
    }
    setNewNumber=()=> {
        this.setState({data: this.state.data + 1})
    }
    render() {
        return (
            <div>
                <button onClick = {this.setNewNumber}>INCREMENT</button>
                <Content myNumber = {this.state.data}></Content>
            </div>
        );
    }
}

class Content extends React.Component {
    componentWillMount() {
        console.log(‘Component WILL MOUNT!‘)
    }
    componentDidMount() {
        console.log(‘Component DID MOUNT!‘)
    }
    componentWillReceiveProps(newProps) {
        console.log(‘Component WILL RECEIVE PROPS! newProps：‘,newProps)
    }
    shouldComponentUpdate(newProps, newState) {
        return true;
    }
    componentWillUpdate(nextProps, nextState) {
        console.log(‘Component WILL UPDATE!‘);
    }
    componentDidUpdate(prevProps, prevState) {
        console.log(‘Component DID UPDATE!‘)
    }
    componentWillUnmount() {
        console.log(‘Component WILL UNMOUNT!‘)
    }
    render() {
        return (
            <div>
                <h3>{this.props.myNumber}</h3>
            </div>
        );
    }
}
ReactDOM.render(<Ani/>,document.getElementById("app"))
 

結果：

初始化：

更新狀態：

參考文檔：https://react.docschina.org/docs/state-and-lifecycle.html

React基礎篇 （3）-- 生命周期