react生命周期有幾個階段

這篇文章主要介紹react生命周期有幾個階段，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

React的生命周期一共分為初始化階段，更新以及銷毀階段。初始化表示組件在DOM樹進行第一次渲染，更新表示組件重新渲染的過程；銷毀表示組件從DOM中刪除的過程

React是一個用于構建用戶界面的JavaScript庫，它主要用于構建UI，它具有較高的性能而且代碼邏輯非常簡單。今天將要介紹的是React的生命周期，具有一定的參考作用，希望對大家有所幫助。

react生命周期分為三個階段分別是：初始化階段，更新階段，銷毀階段。接下來在文章中將為大家詳細介紹

初始化階段：

即把組件第一次在DOM樹中進行渲染

import React, { Component } from 'react';

class Test extends Component {
  constructor(props) {
    super(props);
  }
}

初始化階段也就是上述代碼中類的構造方法一樣，Test類繼承了react Component基類，也就等同于繼承了react的基類，這樣才有了render()，即生命周期等方法才可以使用。

代碼中super(props)主要是用來調用基類的構造方法constructor()的，同時也將父組件的props注入給子組件，讓子組件讀取。在這里需要注意的是組件中props只讀不可變，而state是可變的。

構造函數constructor()是用來做一些組件的初始化工作，如定義this.state中的初始內容

更新階段：

表示組件被重新渲染的過程

當props或者是state被修改時，就會觸發組件的更新過程

componentWillReceiveProps（nextProps）

當父組件的render函數被調用時，在render函數里被渲染的子組件，都會經歷更新的過程，無論父組件傳給子組件的props有沒有改變，都會觸發componentWillReciveProps

注意this.setState觸發的更新，不會調用上述的方法。如果this.setState的調用觸發了上述的方法，則會導致死循環。只有當nextProps和this.props兩者有變化的時候，才會調用this.setState來更新組件內部的state

shouldComponentUpdate（nextProps，nextState）

該方法決定了一個組件什么時候不需要渲染 ，如果使用的恰當則會提高性能

當返回true時則調用componentWillUpdate，render，componentDidUpdate，否則不會有后續的方法調用。

實際上，React做服務器端渲染的時候，基本上不會經歷更新過程，因為服務端渲染，只需要產出HTML的字符串就好了，而初始化階段就可以實現，所以一般情況下，服務器端是不會調用compentDidUpdate方法，如果調用了說明程序出錯了，需要改進

銷毀階段：

表示組件從DOM中刪除的過程

在銷毀階段只有一個生命周期方法：

componentWillUnmount

這個方法在組件被銷毀前調用，主要執行一些清理工作，比如清除組件中使用的定時器，componentDidMount中手動創建的DOM元素等，以避免引起內存泄漏。

以上是“react生命周期有幾個階段”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！