簡述 React 組件生命周期

qpal 發布于2019-08-23 11:52 / 2984人閱讀

摘要：這個階段只有一個方法，該方法在整個生命周期內調用且僅調用一次。在這里進行一些相關的銷毀操作，比如撤銷定時器，事件監聽等等。

詳解 React 生命周期

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

第一階段

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

getDefaultProps()

這個方法在組件實例創建前，也就是構造函數執行前執行，獲取父組件傳來的參數，你可以在這里編輯參數并返回新的參數作為 props

getInitalState()

組件創建的一開始會調用這個方法初始化組件的 state

componentWillMount()

在組件 render 之前執行該方法，可用來修改 state。React 先調用父組件的這個函數，再調用子組件的這個函數

render()

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

componentDidMount()

在 render 渲染之后，通知組件已經加載完成。React 先調用子組件的這個函數，再調用父組件的這個函數。從這個函數開始，該組件就可以和其他框架交互了。比如設置計時器或者發起網絡請求。

第二階段

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

componentWillReceiveProps()

當父容器中對應的參數改變將會調用子組件的該函數。新的 props 將會作為參數傳遞進來，老的 props 可以根據 this.props 來獲取。我們可以在該函數中對state作一些處理。并且在該函數中更新 state 不會發生二次渲染

shouldComponentUpdate()

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

componentWillUpdate()

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

componentDidUpdate()

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

第三階段

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

componentWillUnmount()

當組件要被從界面上移除的時候，就會調用 componentWillUnmount。在這里進行一些相關的銷毀操作，比如撤銷定時器，事件監聽等等。

觸發 render 的幾種情況

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

首次渲染，即 Initial Render

調用this.setState (不是每次調用 setState 都會觸發，react 會優化，比如 antd 的 input 組件)

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

如果父組件觸發了 render, 子組件當然也會相應觸發 render

調用 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.state.willRender &&
          
        }
        
      
    );
  }
}

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 (
      
        
        
      
    );
  }
}

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

云服務器 GPU云服務器生命周期軟件生命周期生命周期理論頁面生命周期

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97603.html

前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

pumpkin9 2019-08-23 17:12 評論0 收藏0
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

Carson 2019-07-31 10:21 評論0 收藏0
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

muzhuyu 2019-07-01 12:43 評論0 收藏0
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

li21 2019-08-23 17:11 評論0 收藏0