react生命周期的階段有哪些

蝸牛 互聯網技術資訊 2022-05-05 73 0

今天小編給大家分享一下react生命周期的階段有哪些的相關知識點,內容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。

react生命周期分為3個階段;分別是:1、創建階段,也被稱為初始化階段,表示組件第一次在DOM樹中進行渲染的過程;2、更新階段,也叫存在階段,表示組件被重新渲染的過程;3、卸載階段,也叫銷毀階段,表示組件從DOM中刪除的過程。

本教程操作環境:Windows10系統、react17.0.1版、Dell G3電腦。

react生命周期分為幾個階段

生命周期(Life Cycle)的概念應用很廣泛,特別是在經濟、環境、技術、社會等諸多領域經常出現,其基本涵義可以通俗地理解為“從搖籃到墳墓”(Cradle-to-Grave)的整個過程

跟Vue一樣,React整個組件生命周期包括從創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程

流程

這里主要講述react16.4之后的生命周期,可以分成三個階段:

  • 創建階段

  • 更新階段

  • 卸載階段

創建階段

創建階段主要分成了以下幾個生命周期方法:

  • 構造函數(不要問我為什么用中文,因為英文會被吞掉,太難了)

  • getDerivedStateFromProps

  • render

  • componentDidMount

構造函數

實例過程中自動調用的方法,在方法內部通過super關鍵字獲取來自父組件的props

在該方法中,通常的操作為初始化state狀態或者在this上掛載方法

getDerivedStateFromProps

該方法是新增的生命周期方法,是一個靜態的方法,因此不能訪問到組件的實例

執行時機:組件創建和更新階段,不論是props變化還是state變化,也會調用

在每次render方法前調用,第一個參數為即將更新的props,第二個參數為上一個狀態的state,可以比較props 和 state來加一些限制條件,防止無用的state更新

該方法需要返回一個新的對象作為新的state或者返回null表示state狀態不需要更新

render

類組件必須實現的方法,用于渲染DOM結構,可以訪問組件state與prop屬性

注意:不要在 render 里面 setState, 否則會觸發死循環導致內存崩潰

componentDidMount

組件掛載到真實DOM節點后執行,其在render方法之后執行

此方法多用于執行一些數據獲取,事件監聽等操作

更新階段

該階段的函數主要為如下方法:

  • getDerivedStateFromProps

  • shouldComponentUpdate

  • render

  • getSnapshotBeforeUpdate

  • componentDidUpdate

getDerivedStateFromProps

該方法介紹同上

shouldComponentUpdate

用于告知組件本身基于當前的props和state是否需要重新渲染組件,默認情況返回true

執行時機:到新的props或者state時都會調用,通過返回true或者false告知組件更新與否

一般情況,不建議在該周期方法中進行深層比較,會影響效率

同時也不能調用setState,否則會導致無限循環調用更新

render

介紹如上

getSnapshotBeforeUpdate

該周期函數在render后執行,執行之時DOM元素還沒有被更新

該方法返回的一個Snapshot值,作為componentDidUpdate第三個參數傳入

getSnapshotBeforeUpdate(prevProps,?prevState)?{
????console.log('#enter?getSnapshotBeforeUpdate');
????return?'foo';
}
componentDidUpdate(prevProps,?prevState,?snapshot)?{
????console.log('#enter?componentDidUpdate?snapshot?=?',?snapshot);
}

此方法的目的在于獲取組件更新前的一些信息,比如組件的滾動位置之類的,在組件更新后可以根據這些信息恢復一些UI視覺上的狀態

componentDidUpdate

執行時機:組件更新結束后觸發

在該方法中,可以根據前后的props和state的變化做相應的操作,如獲取數據,修改DOM樣式等

卸載階段

componentWillUnmount

此方法用于組件卸載前,清理一些注冊監聽事件,或者取消訂閱的網絡請求等

一旦一個組件實例被卸載,其不會被再次掛載,而只可能是被重新創建

以上就是“react生命周期的階段有哪些”這篇文章的所有內容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注蝸牛博客行業資訊頻道。

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看