摘要：這個階段只有一個方法，該方法在整個生命周期內(nèi)調(diào)用且僅調(diào)用一次。在這里進(jìn)行一些相關(guān)的銷毀操作，比如撤銷定時器，事件監(jiān)聽等等。

詳解 React 生命周期

整個 React 生命周期有3個階段：創(chuàng)建、更新、卸載，每個階段有對應(yīng)的工作和方法，我們可以看下面這個經(jīng)典的圖研究一下：

這是虛擬 DOM 創(chuàng)建的階段，會依次執(zhí)行 5 個方法，這 5 個方法中除了 render 方法，其余四個方法在整個生命周期中只調(diào)用 1 次，而且一定會調(diào)用 1 次：

getDefaultProps()

這個方法在組件實例創(chuàng)建前，也就是構(gòu)造函數(shù)執(zhí)行前執(zhí)行，獲取父組件傳來的參數(shù)，你可以在這里編輯參數(shù)并返回新的參數(shù)作為 props

getInitalState()

組件創(chuàng)建的一開始會調(diào)用這個方法初始化組件的 state

componentWillMount()

在組件 render 之前執(zhí)行該方法，可用來修改 state。React 先調(diào)用父組件的這個函數(shù)，再調(diào)用子組件的這個函數(shù)

render()

開始組件渲染函數(shù)，返回一個只有一個根節(jié)點的虛擬 DOM。該函數(shù)中不能同步的修改組件的狀態(tài)(state)。

componentDidMount()

在 render 渲染之后，通知組件已經(jīng)加載完成。React 先調(diào)用子組件的這個函數(shù)，再調(diào)用父組件的這個函數(shù)。從這個函數(shù)開始，該組件就可以和其他框架交互了。比如設(shè)置計時器或者發(fā)起網(wǎng)絡(luò)請求。

此時該組件已經(jīng)進(jìn)入了穩(wěn)定運行階段，這個階段組件可以處理用戶交互，或者接收事件更新界面。以下方法在整個生命周期中可以執(zhí)行很多次，也可以一次也不執(zhí)行。

componentWillReceiveProps()

當(dāng)父容器中對應(yīng)的參數(shù)改變將會調(diào)用子組件的該函數(shù)。新的 props 將會作為參數(shù)傳遞進(jìn)來，老的 props 可以根據(jù) this.props 來獲取。我們可以在該函數(shù)中對state作一些處理。并且在該函數(shù)中更新 state 不會發(fā)生二次渲染

shouldComponentUpdate()

該函數(shù)傳遞過來兩個參數(shù)，新的 state 和新的 props。state 和 props 的改變都會調(diào)到該函數(shù)。該函數(shù)主要對傳遞過來的 nextProps 和 nextState 作判斷。如果返回 true 則重新渲染(默認(rèn)都是返回 true)，如果返回 false 則不重新渲染。在某些特定條件下，我們可以根據(jù)傳遞過來的 props 和 state 來選擇更新或者不更新，從而提高效率。

componentWillUpdate()

與 componentWillMount 方法類似，在 render 渲染之前被調(diào)用。組件上會接收到新的 props 或者 state。這個函數(shù)調(diào)用之后，就會把 nextProps 和 nextState 分別設(shè)置到 this.props 和 this.state 中。

componentDidUpdate()

與 componentDidMount 方法類似，在 render 渲染之后被調(diào)用，真實 DOM 生成之后調(diào)用該函數(shù)。傳遞過來的參數(shù)是之前的 props 和 state。

這就是消亡的階段，主要進(jìn)行內(nèi)存的清理和釋放的工作。這個階段只有一個方法，該方法在整個生命周期內(nèi)調(diào)用且僅調(diào)用一次。

componentWillUnmount()

當(dāng)組件要被從界面上移除的時候，就會調(diào)用 componentWillUnmount。在這里進(jìn)行一些相關(guān)的銷毀操作，比如撤銷定時器，事件監(jiān)聽等等。

這里我們僅考慮 shouldComponentUpdate 沒有被修改，始終返回的是 true

首次渲染，即 Initial Render

調(diào)用this.setState (不是每次調(diào)用 setState 都會觸發(fā)，react 會優(yōu)化，比如 antd 的 input 組件)

父組件發(fā)生更新，通常是修改的子組件的 props

如果父組件觸發(fā)了 render, 子組件當(dāng)然也會相應(yīng)觸發(fā) render

調(diào)用 this.forceUpdate()

import React from "react";
import ReactDOM from "react-dom";
import style from "./font.css";
import "./index.less";

class Parent extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      willRender: true,
      prop: 1
    };
  }

  render(){
    return (
      

        {this.setState({prop: 10})}}>changePropsFromParent
        {
          this.state.willRender &&
          
        }
        {this.setState({willRender: false})}}>UnmountChild
      
    );
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      curr: 0
    };
  }

 getDefaultProps(){
   console.log("getDefaultProps");
 }

  getInitalState(){
    console.log("getInitalState");
  }

  componentWillMount(){
    console.log("componentWillMount");
  }

  componentDidMount(){
    console.log("componentDidMount");
  }

  componentWillReceiveProps(){
    console.log("componentWillReceiveProps");
  }

  shouldComponentUpdate(){
    console.log("shouldComponentUpdate");
    return true;
  }

  componentWillUpdate(){
    console.log("componentWillUpdate");
  }

  componentDidUpdate(){
    console.log("componentDidUpdate");
  }

  componentWillUnmount(){
    console.log("componentWillUnmount");
  }

  render() {
    console.log("render")

    return (
      

        this.setState({curr:2})}>setState
        {this.forceUpdate();}}>forceUpdate
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById("root")
);