摘要：組件生命周期構造方法是對類的默認方法，通過命令生成對象實例時自動調(diào)用該方法。該生命周期可以發(fā)起異步請求，并。后廢棄該生命周期，可以在中完成設置渲染組件是一個組件必須定義的生命周期，用來渲染。該生命周期內(nèi)可以進行。

constructor是ES6對類的默認方法，通過 new 命令生成對象實例時自動調(diào)用該方法。并且，該方法是類中必須有的，如果沒有顯示定義，則會默認添加空的constructor( )方法。當存在constructor的時候??必須手動調(diào)用super方法。
在constructor中如果要訪問this.props需要傳入props，示例如下：

class MyClass extends React.component{
    constructor(props){
        super(props); // 聲明constructor時必須調(diào)用super方法
        console.log(this.props); // 可以正常訪問this.props
    }
}

constructor 常用來初始化state

class MyClass extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            list: this.props.List
        };
    }
}

Class靜態(tài)方法實例屬性 初始化state

class ReactCounter extends React.Component {
    state = {
      list: []
    };
}

具體文章可見Class-的靜態(tài)方法

在組件掛載之前調(diào)用且全局只調(diào)用一次。如果在這個鉤子里可以setState，render后可以看到更新后的state，不會觸發(fā)重復渲染。該生命周期可以發(fā)起異步請求，并setState。（React v16.3后廢棄該生命周期，可以在constructor中完成設置state）

render是一個React組件必須定義的生命周期，用來渲染dom。??不要在render里面修改state，會觸發(fā)死循環(huán)導致棧溢出。render必須返回reactDom

render() {
    const {nodeResultData: {res} = {}} = this.props;
    if (isEmpty(res)) return noDataInfo;
    const nodeResult = this.getNodeResult(res);
    return (
        

            {nodeResult}
        
    );

在組件掛載完成后調(diào)用，且全局只調(diào)用一次。可以在這里使用refs，獲取真實dom元素。該鉤子內(nèi)也可以發(fā)起異步請求，并在異步請求中可以進行setState。

componentDidMount() {
    axios.get("/auth/getTemplate").then(res => {
        const {TemplateList = []} = res;
        this.setState({TemplateList});
    });
}

props發(fā)生變化以及父組件重新渲染時都會觸發(fā)該生命周期，在該鉤子內(nèi)可以通過參數(shù)nextProps獲取變化后的props參數(shù)，通過this.props訪問之前的props。該生命周期內(nèi)可以進行setState。(React v16.3后廢棄該生命周期，可以用新的周期 static getDerivedStateFromProps 代替)

組件掛載之后，每次調(diào)用setState后都會調(diào)用shouldComponentUpdate判斷是否需要重新渲染組件。默認返回true，需要重新render。返回false則不觸發(fā)渲染。在比較復雜的應用里，有一些數(shù)據(jù)的改變并不影響界面展示，可以在這里做判斷，優(yōu)化渲染效率。

shouldComponentUpdate返回true或者調(diào)用forceUpdate之后，componentWillUpdate會被調(diào)用。不能在該鉤子中setState，會觸發(fā)重復循環(huán)。(React v16.3后廢棄該生命周期，可以用新的周期 getSnapshotBeforeUpdate )

除了首次render之后調(diào)用componentDidMount，其它render結束之后都是調(diào)用componentDidUpdate。該鉤子內(nèi)setState有可能會觸發(fā)重復渲染，需要自行判斷，否則會進入死循環(huán)。

componentDidUpdate() {
    if(condition) {
        this.setState({..}) // 設置state
    } else {
        // 不再設置state
    }
}

組件被卸載的時候調(diào)用。一般在componentDidMount里面注冊的事件需要在這里刪除。

class LifeCycle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {str: "hello"};
    }

    componentWillMount() {
        alert("componentWillMount");
    }

    componentDidMount() {
        alert("componentDidMount");
    }

    componentWillReceiveProps(nextProps) {
        alert("componentWillReceiveProps");
    }

    shouldComponentUpdate() {
        alert("shouldComponentUpdate");
        return true;        // 記得要返回true
    }

    componentWillUpdate() {
        alert("componentWillUpdate");
    }

    componentDidUpdate() {
        alert("componentDidUpdate");
    }

    componentWillUnmount() {
        alert("componentWillUnmount");
    }
    render() {
        alert("render");
        return(
            

                
{parseInt(this.props.num)}
                

                
{this.state.str}
            
        );
    }
}

componentWillMount

componentWillReceiveProps

componentWillUpdate

static getDerivedStateFromProps

getSnapshotBeforeUpdate

觸發(fā)時間：在組件構建之后(虛擬dom之后，實際dom掛載之前) ，以及每次獲取新的props之后。

每次接收新的props之后都會返回一個對象作為新的state，返回null則說明不需要更新state.

配合componentDidUpdate，可以覆蓋componentWillReceiveProps的所有用法

class Example extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    // 沒錯，這是一個static
  }
}

觸發(fā)時間: update發(fā)生的時候，在render之后，在組件dom渲染之前。

返回一個值，作為componentDidUpdate的第三個參數(shù)。

配合componentDidUpdate, 可以覆蓋componentWillUpdate的所有用法。

class Example extends React.Component {
    getSnapshotBeforeUpdate(prevProps, prevState) {
    // ...
    }
}