React 生命周期

Cc_2011 發(fā)布于2019-08-23 13:50 / 1674人閱讀

摘要：生命周期生命周期圖解初始階段設(shè)置默認(rèn)屬性設(shè)置屬性類型初始化狀態(tài)生命周期函數(shù)，在組件即將渲染前觸發(fā)，可以做初始化數(shù)據(jù)顯示。可以使用此方法替換運(yùn)行時(shí)當(dāng)發(fā)生變化的時(shí)候，也就是說父組件改變的時(shí)候會(huì)調(diào)用這個(gè)方法。

React 生命周期

生命周期圖解

初始階段

設(shè)置默認(rèn)屬性 (defaultProps), 設(shè)置屬性類型 (propTypes)

初始化狀態(tài) (state = {})

componentWillMount() -> 生命周期函數(shù)，在組件即將渲染前觸發(fā)，可以做初始化數(shù)據(jù)顯示。(注意：這個(gè)方法已經(jīng)被標(biāo)為不安全方法，官方不推薦使用)

render() -> 觸發(fā)了組件渲染

componentDidMount() -> 此時(shí)的組件已經(jīng)生成了DOM結(jié)構(gòu)，可以進(jìn)行有關(guān)操作。可以使用此方法替換componentWillMount

運(yùn)行時(shí)

componentWillReceiveProps() -> 當(dāng) props 發(fā)生變化的時(shí)候，也就是說父組件改變的時(shí)候會(huì)調(diào)用這個(gè)方法。但是注意的是，這個(gè)方法在初始化render的時(shí)候不會(huì)執(zhí)行的

shouldComponentUpdate() -> 組件接收到新屬性時(shí)，或者組件狀態(tài)改變時(shí)候出發(fā)組件更新，在組件初始化渲染的時(shí)候不會(huì)觸發(fā)，這個(gè)函數(shù)可以做為優(yōu)化組件性能的選擇。在react 項(xiàng)目中更新一個(gè)組件可能需要其父組件更新，但是一個(gè)父組件下可能還會(huì)有別的子組件，一旦父組件更新了狀態(tài)，那么所有子組件都要執(zhí)行 render 方法，這樣就太耗費(fèi)性能了。所以可以使用 shouldComponentUpdate() 方法判斷是否應(yīng)該更新。其實(shí)你還可以通過繼承 PureComponent 類，如果繼承了這個(gè)類，那么在組件更新時(shí)候就會(huì)先去和之前的屬性判斷，從而判斷是否應(yīng)該更新

componentWillUpdate() -> 組件即將被觸發(fā)更新

componentDidUpdate() -> 組件更新完成后生成新DOM

銷毀階段

componentWillUnmount() -> 這是在組件被銷毀時(shí)執(zhí)行的方法。

GPU云服務(wù)器云服務(wù)器生命周期軟件生命周期生命周期理論頁面生命周期

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99638.html

相關(guān)文章

React專題：生命周期

摘要：而生命周期鉤子，就是從生到死過程中的關(guān)鍵節(jié)點(diǎn)。異步渲染下的生命周期花了兩年時(shí)間祭出渲染機(jī)制。目前為這幾個(gè)生命周期鉤子提供了別名，分別是將只提供別名，徹底廢棄這三個(gè)大活寶。生命周期鉤子的最佳實(shí)踐是在這里初始化。本文是『horseshoe·React專題』系列文章之一，后續(xù)會(huì)有更多專題推出來我的 GitHub repo 閱讀完整的專題文章來我的個(gè)人博客獲得無與倫比的閱讀體驗(yàn) 生命周期...

Hanks10100 2019-08-23 11:25 評(píng)論0 收藏0
捋一捋React的生命周期

摘要：卸載階段組件卸載和銷毀老版生命周期之前的生命周期初始化階段涉及個(gè)鉤子函數(shù)這些方法會(huì)在組件初始化的時(shí)候被調(diào)用，只跟實(shí)例的創(chuàng)建有關(guān)。前言：React 的版本從 v15 到 v16.3 ，再到v16.4，現(xiàn)在最新的版本是 v16.8了。其中最大的變化可能是React Hooks的加入，而最令人困惑的卻是它的生命周期，新舊生命周期函數(shù)混雜在一起，難免會(huì)讓許多新來者有很多困惑。所以這一篇我們來...

MobService 2019-08-23 15:20 評(píng)論0 收藏0
ReactV16.3，即將更改的生命周期

摘要：我們目前的計(jì)劃是為不安全生命周期引入別名，和。從現(xiàn)在開始，只有新的生命周期名稱將起作用。從版本開始，更新以響應(yīng)更改的推薦方法是使用新的靜態(tài)生命周期。注釋：本文是根據(jù)React的官方博客翻譯而成（文章地址：https://reactjs.org/blog/2018...）。主要講述了React之后的更新方向，以及對(duì)之前生命周期所出現(xiàn)的問題的總結(jié)，之后的React將逐步棄用一些生命周期和...

wendux 2019-08-22 16:28 評(píng)論0 收藏0
React組件生命周期詳解

摘要：組件生命周期構(gòu)造方法是對(duì)類的默認(rèn)方法，通過命令生成對(duì)象實(shí)例時(shí)自動(dòng)調(diào)用該方法。該生命周期可以發(fā)起異步請(qǐng)求，并。后廢棄該生命周期，可以在中完成設(shè)置渲染組件是一個(gè)組件必須定義的生命周期，用來渲染。該生命周期內(nèi)可以進(jìn)行。 React組件生命周期 constructor( ) 構(gòu)造方法 constructor是ES6對(duì)類的默認(rèn)方法，通過 new 命令生成對(duì)象實(shí)例時(shí)自動(dòng)調(diào)用該方法。并且，該方法是...

learn_shifeng 2019-08-22 17:31 評(píng)論0 收藏0
React.js 小書 Lesson20 - 更新階段的組件生命周期

摘要：所以對(duì)于組件更新階段的組件生命周期，我們簡(jiǎn)單提及并且提供一些資料給大家。這里為了知識(shí)的完整，補(bǔ)充關(guān)于更新階段的組件生命周期你可以通過這個(gè)方法控制組件是否重新渲染。大家對(duì)這更新階段的生命周期比較感興趣的話可以查看官網(wǎng)文檔。 React.js 小書 Lesson20 - 更新階段的組件生命周期本文作者：胡子大哈本文原文：http://huziketang.com/books/react...

Yumenokanata 2019-08-21 17:34 評(píng)論0 收藏0
React組件生命周期

摘要：組件生命周期此文章適合之前的版本，，添加了一些新的生命周期函數(shù)，同時(shí)準(zhǔn)備廢棄一些會(huì)造成困擾的生命周期函數(shù)。每個(gè)生命周期階段調(diào)用的鉤子函數(shù)會(huì)略有不同。 React組件生命周期此文章適合 React@17 之前的版本，[email protected]，添加了一些新的生命周期函數(shù)，同時(shí)準(zhǔn)備廢棄一些會(huì)造成困擾的生命周期函數(shù)。所有如果在React@17 發(fā)布之前，這篇文章還是適用的。新的生命周期請(qǐng)看官...

mgckid 2019-08-20 10:42 評(píng)論0 收藏0