React componentWillMount、componentDidMount、componentWillUpdate和componentDidUpdate生命周期函數的詳解

来源:https://www.cnblogs.com/greatdesert/archive/2020/05/09/12851567.html
-Advertisement-
Play Games

React應用在初始化和更新的過程中,會經過一系列的邏輯,React在不同的邏輯時期會執行不同的生命周期函數,用來給我們做一些處理。 對於初次掛載來說,也就是整個React應用初始化時會執行componentWillMount和componentDidMount生命周期函數 對於更新應用時,比如父組 ...


React應用在初始化和更新的過程中,會經過一系列的邏輯,React在不同的邏輯時期會執行不同的生命周期函數,用來給我們做一些處理。

  • 對於初次掛載來說,也就是整個React應用初始化時會執行componentWillMount和componentDidMount生命周期函數
  • 對於更新應用時,比如父組件修改了子組件的props、組件執行了setState()更改了state, 還有組件所在的context環境發生變化時,都會執行更新操作,對於更新來說,會執行componentWillUpdate和componentDidUpdate生命周期函數

這幾個生命周期函數的用法如下:

  • componentWillMount()                ;組件將要掛載時觸發的函數
  • componentDidMount()                 ;組件掛載完成時觸發的函數
  • componentWillUpdate(newProps,newState,newContext)    ;組件將要更新數據時觸發的函數,參數如下
    • newProps  ;新的props
    • newState     ;新的State
    • newContext   ;新的context
  • componentDidUpdate(newProps,newState,Snapshot)   ;組件數據更新完成時觸發的函數,參數如下:
    • newProps  ;新的props
    • newState     ;新的State
    • Snapshot       ;由componentWillReceiveProps生命周期返回的快照

對於componentWillMount和componentDidMount來說它們是沒有參數的,而且一個組件掛載時只會執行一次。

舉個慄子,需求:定義了兩個組件:App組件和Person組件,App組件引用了Person組件並且傳入了一個名為no的props,另外在App組件和Person組件內都定義了一個button按鈕,分別用於修改Person組件的props和state變化,另外我們在Person組件內分別定義了上面講解到的4個生命周期函數,代碼如下:

<div id="root"></div>
<script type="text/babel">
class Person extends React.Component{         //定義一個子組件Person
  constructor(props){
    super(props);
    this.state = {no:props.no+100}
  }
  componentWillMount(){
    console.log('trigger:componentWillMounted');
  }
  componentDidMount(){
   console.log('trigger:componentDidMount'); 
  }

  componentWillUpdate(newProps,newState){        
    console.log('trigger:componentDidMount newprops=',newProps,' newState=',newState)
  }
  componentDidUpdate(newPros,newState){
    console.log('trigger:componentDidUpdate'); 
  }
  render (){
    return <div>
              <button onClick={e=>this.setState({no:this.state.no+1})}>子組件按鈕(用於修改state)</button>
              <p>props.no:{this.props.no}</p>
              <p>state.no:{this.state.no}</p>
           </div>
  }
}

class App extends React.Component{      //定義一個父組件App,它會引用子組件,並且修改子組件的props
  constructor(props){
    super(props)
  }
  state = {no:1}
  render(){
    return  <div>
              <button onClick={e=>this.setState({no:this.state.no+1})}>父組件按鈕(用於修改props)</button>
              <Person no={this.state.no} />
            </div>
  }
}
ReactDOM.render(<App/>,root)
</script>

最終頁面渲染如下:

初始化時控制台列印如下:

 表示在Person組件載入過程中分別觸發了componentWillMount和componentDidMount生命周期函數,因為我們在Person組件就列印了這兩個信息,然後我們點擊第一個按鈕,看看輸出信息:

 writer by:大沙漠 QQ:22969969

父組件的按鈕對應的事件是每次點擊時傳遞的no遞增1,我們可在Person組件內的componentWillUpdate內列印了newProps,可以看到no發生了變化,每點擊一次,componentWillUpdate觸發一次,並且Person組件的props.no遞增了1。

同理,我們點擊一下第二個按鈕,會觸發Person組件的事件,會修改Person組件的state,並觸發重新渲染,如下:

同樣的,點擊後也觸發了Person組件內的componentWillUpdate生命周期函數,將新的props和state列印了出來,我們可以看到state發生了變化。

ComponentWillUpdate的第三個參數是context發生變化時新的context的值,有興趣的自己寫個demo測試一下就好了,我就不貼了。

對於這四個生命周期函數來說,我們只能在事件觸發收做一些與主線無關的操作,什麼是主線無關呢,比如componentWillUpdate是React將要更新的時候觸發的,我可不可以返回false,這樣React就不會繼續更新,而是停止下來了呢,React也提供了這樣的生命周期函數,叫做shouldComponentUpdate生命周期函數,當然React還有其它的一些生命周期函數,我們一個個講解。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 父級元素包含幾個行內元素 <div id="box"> <p> <span>按鈕</span> <span>測試文字文字文字測試文字文字文字</span> <span>看這裡</span> </p> </div> #box p{ width: 800px; font-size: 30px; } #b ...
  • Angular, one of the most popular software development instruments and it is a part of the Javascript ecosystem. It was introduced by Google in the yea ...
  • # jQuery選擇元素 - 1.get() 從jQuery對象中獲取某個指定的元素,返回原生的dom對象,所以不能再次鏈式調用jQuery對象的方法,但是可以使用原生的方法,或者再次封裝為jQuery對象 ```js $('demo').get(0). $($('demo').get(0))//再 ...
  • 後臺介面層面+JS使用XMLHttpRequest結合download.js兩種方式實現瀏覽器直接下載文件 ...
  • ItemGroupBy(arr, key) { let newArr = [], types = {}, newItem, i, j, cur; for (i = 0, j = arr.length; i < j; i++) { cur = arr[i]; if (!(cur[key] in typ ...
  • <script src="https://gallerybox.echartsjs.com/dep/echarts/latest/echarts.min.js"></script> <div id="main" ref="main" style="height:600px;"></div> var ...
  • 從git上 clone下來的項目運行 1、克隆項目:gitclone XXXXX.git(可以在終端運用git命令行下載,也可以直接在webStorm中下載) 2、安裝node.js(電腦上已經安裝成功,此步驟可省略) 3、安裝依賴:進入到項目文件夾內,npm install(由於git上只會存在p ...
  • Layer UI表格列日期格式化方法較為強大 也比較簡單 針對需要格式化的表格列 添加以下代碼即可 ,templet : "<div>{{layui.util.toDateString(d.DEMURRAGE_FREE_DAYS_STOP_DATE, 'yyyy/MM/dd')}}</div>" 樣 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...