前言

參考了很多文章，結合實例寫下我自己的理解

react中component生命周期主要分為三個階段：加載、更新和卸載

1、加載（Mounting） 主要包含4個方法

constructor()，componentWillMount()，render()和componentDidMount()

2、更新（Updating） 主要包含5個方法

componentWillReceiveProps()，shouldComponentUpdate()，componentWillUpdate()，render()和componentDidUpdate()

3、卸載（Unmounting） 主要包含1個方法

componentWillUnmount()

實例代碼

import React from ‘react‘;

class LifeCycleTracking extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            content: ‘This is lifecycle tracking content‘
        }

        console.log("Contructor...");
    }
    componentWillMount() {
        console.log("Will Mount...");
    }
    componentDidMount() {
        console.log("Did Mount...");
    }
    componentWillReceiveProps() {
        console.log("Will Receive Props...");
    }
    shouldComponentUpdate() {
        console.log("Update true");
        return true;
    }
    componentWillUpdate() {
        console.log("Will Update...");
    }
    componentDidUpdate() {
        console.log("Did Update...");
    }
    componentWillUnmount() {
        console.log("Will Unmount...");
    }
    render() {
        console.log("Render...");
        return (
            
 
<div>
                <h2>{this.props.title}</h2>
                <p>{this.state.content}</p>
            </div>
            );
    }
}

export default LifeCycleTracking;

進入頁面時

當change state時

可以看到，當進入頁面時，會先執行constructor()函數

constructor(props)：該方法在組件加載前調用。當組件作為React.Component

作用：用來初始化狀態，如果既不初始化狀態也不綁定方法，那就沒必要實現該方法了。（註：事實上，如果組件沒有構造器方法的話，組件會默認調用一個構造器，實現屬性的傳遞）。

只要組件存在constructor,就必要要寫super,否則this指向會錯誤

執行完constructor()函數之後，會依次執行componentWillMount()，render()和componentDidMount()函數

componentWillMount()：組件剛經歷constructor(),初始完數據，組件還未進入render，組件還未渲染完成，dom還未渲染，一般不用。

render()：該方法必須要有，主要提供渲染頁面的數據，調用該方法時，會檢查其中的props和state，以此來渲染頁面。

componentDidMount()：說明第一次渲染已完成，此時dom節點已經生成，可以在這裏調用ajax請求，返回數據setState後組件會重新渲染，也可以在此處設置定時器等。

　　　　　　　　　　　　註：在此處設置狀態等會導致頁面重新渲染

到此為止，頁面的第一次渲染結束，此時，如果更新了state，頁面會進行第二次渲染，會依次執行componentWillReceiveProps()，shouldComponentUpdate()，componentWillUpdate()，render()和componentDidUpdate()函數。

componentWillReceiveProps()：該方法會在加載好的組件在收到新的狀態後調用。它接受一個參數nextProps,通過對比nextProps和this.props，將nextProps setState為當前組件的state，從而重新渲染組件。

shouldComponentUpdate()：簡單理解為這個component需不需要更新，在react中，父組件更新之後，所有的子組件都會相應更新，但這時我們不需要子組件更新，可以在此方法中return false，即可阻止更新。

componentWillUpdate()：shouldComponentUpdate返回true以後，組件進入重新渲染的流程，進入componentWillUpdate,這裏同樣可以拿到nextProps和nextState。

componentDidUpdate()：可用來在組件更新後操作DOM，這裏可以拿到更新前的props和state，通過比較當前屬性和之前屬性來決定是否發送網絡請求（如，狀態未改變不需要做網絡請求）。

當點擊unMount時，會執行componentWillUnmount()方法。

componentWillUnmount()：該方法會在組件被銷毀前立即調用。
作用：可以在方法內實現一些清理工作，如清除定時器，取消網絡請求或者是清理其他在componentDidMount()方法內創建的DOM元素。

這就是react component生命周期的簡單學習經驗啦，任重而道遠，努力終會成功。

react中component生命周期