您好,登錄后才能下訂單哦!
這篇文章主要講解了“React組件的生命周期是什么”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“React組件的生命周期是什么”吧!
componentDidMount:render之前最后一次修改狀態(tài)的機(jī)會(huì)
render:只能訪問(wèn)this.props和this.state,不允許修改狀態(tài)和DOM輸出
componentDidMount:成功render并渲染完成真實(shí)DOM之后觸發(fā)
加載階段
componetWillupdate
, 更新前記錄 DOM 狀態(tài),可能會(huì)做一些處理,與componentDidUpdate相隔時(shí)間如果過(guò)長(zhǎng), 會(huì)導(dǎo)致 狀態(tài)不太信
取得默認(rèn)屬性,初始狀態(tài)在constructor
中完成(運(yùn)行一次,可讀數(shù)據(jù),可同步修改state,異步修改state需要setState,setState在實(shí)例產(chǎn)生后才可以使用,可以訪問(wèn)到props
)
componentWillMount
在ssr中 這個(gè)方法將會(huì)被多次調(diào)用, 所以會(huì)重復(fù)觸發(fā)多遍,同時(shí)在這里如果綁定事件,將無(wú)法解綁變得不夠安全
componentWillReceiveProps
外部組件多次頻繁更新傳入多次不同的 props,會(huì)導(dǎo)致不必要的異步請(qǐng)求
props改變 componentWillReceiveProps
(組件加載時(shí)候不調(diào)用,組件接受新的props時(shí)調(diào)用)
shouldComponentUpdate
是否需要更新(return true就會(huì)更新dom,false阻止更新)
卸載階段
compoenentWillUnmount (即將卸載,可以做一些組件相關(guān)的清理工作,如青春計(jì)時(shí)器、網(wǎng)絡(luò)請(qǐng)求等 )常用
組件卸載: unmountComponentAtNode(document.getElementById(‘root’))
所有子組件掛載完成,才標(biāo)記著父組件掛載完成,父組件更新,子組件更新,子組件更新,子組件不更新
(1)getDerivedStateFromProps
第一次的初始化組件以及后續(xù)的更新過(guò)程中(包括自身狀態(tài)更新以及父?jìng)髯? ,返回一個(gè)對(duì)象作為新的state,返回null則說(shuō)明不需要在這里更新state
//老的生命周期的寫(xiě)法 componentDidMount() { if(this.props.value!==undefined){ this.setState({ current:this.props.value }) } } componentWillReceiveProps(nextProps){ if(nextProps.value !==undefined){ this.setState({ current:nextProps.value }) } } // 新的生命周期寫(xiě)法 static getDerivedStateFromProps(nextProps) { if(nextProps.value!==undefined){ return { current:nextProps.value } } return null }
(2) getSnapshotBeforeUpdate 取代了 componetWillUpdate ,觸發(fā)時(shí)間為update發(fā)生的時(shí)候,在render之后dom渲染之前返回一個(gè)值,作為componentDidUpdate的第三個(gè)參數(shù)。
//新的數(shù)據(jù)不斷插入數(shù)據(jù)前面, 導(dǎo)致我正在看的數(shù)據(jù)向下走,如何保持可視區(qū)依舊是我之前看的數(shù)據(jù)呢? getSnapshotBeforeUpdate(){ return this.refs.wrapper.scrollHeight } componentDidUpdate(prevProps, prevState,preHeight) { //if(preHeight===200)return ; this.refs.wrapper.scrollTop +=this.refs.wrapper.scrollHeight-preHeight } <div style={{height:"200px",overflow:"auto"}}} ref="wrapper"> <ul> ......... </ul> </div>
加載階段
渲染前 static getDerivedStateFromProps(props,state)
無(wú)法訪問(wèn)this.props,state是更新后的必須返回一個(gè)對(duì)象,用來(lái)更新state或者null 不更新必須要初始state
state的值在任何時(shí)候都取決于props時(shí)
render
必須return jsx|string|number|null 不會(huì)直接于瀏覽器交互:不要操作DOM|和數(shù)據(jù)
componentDidMount 掛載完成后執(zhí)行
更新階段
getDerivedStateFromProps: 此方法在更新個(gè)掛載階段都可能會(huì)調(diào)用
shouldComponentUpdate: shouldComponentUpdate
(nextProps, nextState),有兩個(gè)參數(shù)nextProps和nextState,表示新的屬性和變化之后的state,返回一個(gè)布爾值,true表示會(huì)觸發(fā)重新渲染,false表示不會(huì)觸發(fā)重新渲染,默認(rèn)返回true,我們通常利用此生命周期來(lái)優(yōu)化React程序性能
getSnapshotBeforeUpdate: getSnapshotBeforeUpdate(prevProps, prevState)
,這個(gè)方法在render之后,componentDidUpdate之前調(diào)用,有兩個(gè)參數(shù)prevProps和prevState,表示之前的屬性和之前的state,這個(gè)函數(shù)有一個(gè)返回值,會(huì)作為第三個(gè)參數(shù)傳給componentDidUpdate
componentDidUpdate: componentDidUpdate(prevProps, prevState, snapshot)
,該方法getSnapshotBeforeUpdate方法之后被調(diào)用,有三個(gè)參數(shù)prevProps,prevState,snapshot,表示之前的props,之前的state,和snapshot。
第三個(gè)參數(shù)是getSnapshotBeforeUpdate返回的,如果觸發(fā)某些回調(diào)函數(shù)時(shí)需要用到 DOM 元素的狀態(tài),則將對(duì)比或計(jì)算的過(guò)程遷移至getSnapshotBeforeUpdate,然后在 componentDidUpdate中統(tǒng)一觸發(fā)回調(diào)或更新?tīng)顟B(tài)。
卸載階段
componentWillUnmount: 當(dāng)組件被卸載或者銷(xiāo)毀了就會(huì)調(diào)用,我們可以在這個(gè)函數(shù)里去清除一些定時(shí)器,取消網(wǎng)絡(luò)請(qǐng)求,清理無(wú)效的DOM元素等垃圾清理工作。
shouldComponentUpdate
控制組件自身或者子組件是否需要更新,尤其在子組件非常多的情況下, 需要進(jìn)行優(yōu)化。
PureComponent
PureComponent會(huì)幫你 比較新props 跟 舊的props, 新的state和老的state(值相等,或者
對(duì)象含有相同的屬性、且屬性值相等 ),決定shouldcomponentUpdate
返回true 或者false
注意:
如果你的 state 或 props 『永遠(yuǎn)都會(huì)變』,那 PureComponent 并不會(huì)比較快,因?yàn)閟hallowEqual
也需要花時(shí)間。
感謝各位的閱讀,以上就是“React組件的生命周期是什么”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)React組件的生命周期是什么這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。