React Component的生命週期

生命週期狀態

1. Mounting : 會再元件建立時被執行
2. Update : 正在重新選染HTML時執行
3. Unmounting : 移除元件的時候執行

圖片來源 : React生命週期表

生命週期的method

1. Mounting :

   • construct() : 在Component被建立時初始化物件。
   • componentWillMount() : 緊接在construct後所執行，只會在初始執行一次。
   • render() : 執行setStatec或更新父元件所傳遞的props，都會執行。
   • componentDidMount() : 會在render執行完後調用，這裡是最常用到的生命週期，像是綁定DOM事件、執行AJAX多半都會在這裡使用;注意!!!若在此使用setState會使render執行兩次

2. Update :

   • componentWillReceiveProps() : 當元件接受到新的(更新)props時會被執行，可以在這裡處理props變更時改變state的狀態。
   • componentDidUpdate() : Update階段最後一個執行的方法，在畫面被選染更新後使用。
   • componentWillUpdate() : 在接收到新的props或state但還沒被render時調用。

3. Unmounting :

   • componentWillUnmount() : 當component將要從DOM被移除前會執行。

實例

Step 1 : 建立一個index.js

import React from "react"
import ReactDOM from "react-dom"
import LifeCyle from "./LifeCyle"

ReactDOM.render(<LifeCyle />,document.getElementById("root"));

Step 2 : 建立Component LifeCyle (建立constructort並接受使用者輸入改變state)

import React from "react"
import Content from "./content"

class LifeCyle extends React.Component
{
    constructor()
    {
        super();
        this.state = {
            data : 0
        }
        this.setNewNumber = this.setNewNumber.bind(this);
        console.log('Constructor');
        console.log("在Component被建立時初始化物件");
        console.log("---------------------------");
    }
    setNewNumber()
    {
        this.setState({
            data : this.state.data + 1
        })
    }

    render()
    {
        return(
            <div>
                <button onClick = {this.setNewNumber}>INCREMENT</button> 
                <Content myNumber = {this.state.data}></Content>
            </div>
             
        )
    }
}

export default LifeCyle;

Step 3 : 建立Component Content (console出各項React生命週期函數)

import React from "react"

class Content extends React.Component
{
    componentWillMount() 
    {
        console.log('Component WILL MOUNT!');
        console.log("緊接在constuctor後面執行");
        console.log("---------------------------");
    }
    componentDidMount() 
    {
        console.log('Component DID MOUNT!');
        console.log("render執行完後調用");
        console.log("---------------------------");
    }
    componentWillReceiveProps(newProps) 
    {
        console.log('Component WILL RECEIVE PROPS!');
        console.log("當元件接受到新的(更新)props時會被執行");
        console.log("---------------------------");
    }
    componentWillUpdate(nextProps, nextState) 
    {
        console.log('Component WILL UPDATE!');
        console.log("在接收到新的props或state但還沒被render時調用");
        console.log("---------------------------");
    }
    componentDidUpdate(prevProps, prevState) 
    {
        console.log('Component DID UPDATE!');
        console.log("在畫面被選染更新後使用");
        console.log("---------------------------");
    }

    render()
    {
        return(
            <div>
                <h3>{this.props.myNumber}</h3>
            </div>
        );
    }
}

export default Content;

結果

1. 當畫面一刷新(Component剛被建立時)，會觸發constructor對Component進行初始化，
2. Constructor結束後由於componentWillMount會緊跟在constructor後面執行，所以為第二個被執行的。
   
3. 而當render完成將畫面選染到HTML中後，會調用componentDidMount
   

4. 當按下按鈕發生改變後，由於元件更新的自身狀態，所以會執行componentWillReceiveProps()
   
5. 由於接收到新的state，但還沒使用render將更新後的component渲染到HTML中，所以會先調用componentWillUpdate
   
6. 最後將更新完state的Component透過render渲染到HTML中，在完成選染後會調用componentDidUpdate()
   

參考資料 :
React.Component
React 组件生命周期|菜鳥教程
React Life Cycle 生命週期更新版，父子元件執行順序
iT幫幫忙鐵人賽 React 生命週期(Life Cycle)