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

詳解 React 生命周期

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

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

getDefaultProps()

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

getInitalState()

組件創(chuàng)建的一開(kāi)始會(huì)調(diào)用這個(gè)方法初始化組件的 state

componentWillMount()

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

render()

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

componentDidMount()

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

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

componentWillReceiveProps()

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

shouldComponentUpdate()

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

componentWillUpdate()

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

componentDidUpdate()

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

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

componentWillUnmount()

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

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

首次渲染，即 Initial Render

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

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

如果父組件觸發(fā)了 render, 子組件當(dāng)然也會(huì)相應(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")
);