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

constructor是ES6對(duì)類(lèi)的默認(rèn)方法，通過(guò) new 命令生成對(duì)象實(shí)例時(shí)自動(dòng)調(diào)用該方法。并且，該方法是類(lèi)中必須有的，如果沒(méi)有顯示定義，則會(huì)默認(rèn)添加空的constructor( )方法。當(dāng)存在constructor的時(shí)候??必須手動(dòng)調(diào)用super方法。
在constructor中如果要訪問(wèn)this.props需要傳入props，示例如下：

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

constructor 常用來(lái)初始化state

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

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

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

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

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

render是一個(gè)React組件必須定義的生命周期，用來(lái)渲染dom。??不要在render里面修改state，會(huì)觸發(fā)死循環(huán)導(dǎo)致棧溢出。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，獲取真實(shí)dom元素。該鉤子內(nèi)也可以發(fā)起異步請(qǐng)求，并在異步請(qǐng)求中可以進(jìn)行setState。

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

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

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

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

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

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

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

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ā)時(shí)間：在組件構(gòu)建之后(虛擬dom之后，實(shí)際dom掛載之前) ，以及每次獲取新的props之后。

每次接收新的props之后都會(huì)返回一個(gè)對(duì)象作為新的state，返回null則說(shuō)明不需要更新state.

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

class Example extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    // 沒(méi)錯(cuò)，這是一個(gè)static
  }
}

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

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

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

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