React組件的生命周期是什么

這篇文章主要講解了“React組件的生命周期是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“React組件的生命周期是什么”吧！

React生命周期

1、初始化階段

• componentDidMount:render之前最后一次修改狀態的機會

• render:只能訪問this.props和this.state,不允許修改狀態和DOM輸出

• componentDidMount:成功render并渲染完成真實DOM之后觸發

2、舊生命周期

加載階段

• componetWillupdate, 更新前記錄 DOM 狀態,可能會做一些處理，與componentDidUpdate相隔時間如果過長， 會導致 狀態不太信

• 取得默認屬性，初始狀態在constructor中完成（運行一次，可讀數據，可同步修改state，異步修改state需要setState,setState在實例產生后才可以使用，可以訪問到props）

• componentWillMount 在ssr中 這個方法將會被多次調用， 所以會重復觸發多遍，同時在這里如果綁定事件，將無法解綁變得不夠安全

• componentWillReceiveProps 外部組件多次頻繁更新傳入多次不同的 props，會導致不必要的異步請求

• props改變 componentWillReceiveProps (組件加載時候不調用，組件接受新的props時調用)

• shouldComponentUpdate 是否需要更新（return true就會更新dom，false阻止更新）

卸載階段

compoenentWillUnmount (即將卸載，可以做一些組件相關的清理工作，如青春計時器、網絡請求等 )常用

組件卸載： unmountComponentAtNode(document.getElementById(‘root’))

所有子組件掛載完成，才標記著父組件掛載完成，父組件更新，子組件更新，子組件更新，子組件不更新

3、新生命周期

（1）getDerivedStateFromProps 第一次的初始化組件以及后續的更新過程中(包括自身狀態更新以及父傳子) ，返回一個對象作為新的state，返回null則說明不需要在這里更新state

//老的生命周期的寫法
componentDidMount() {
if(this.props.value!==undefined){
this.setState({
current:this.props.value
})
}
}
componentWillReceiveProps(nextProps){
if(nextProps.value !==undefined){
this.setState({
current:nextProps.value
})
}
}
// 新的生命周期寫法
static getDerivedStateFromProps(nextProps) {
if(nextProps.value!==undefined){
return {
current:nextProps.value
}
}
return null
}

(2) getSnapshotBeforeUpdate 取代了 componetWillUpdate ,觸發時間為update發生的時候，在render之后dom渲染之前返回一個值，作為componentDidUpdate的第三個參數。

//新的數據不斷插入數據前面， 導致我正在看的數據向下走，如何保持可視區依舊是我之前看的數據呢？
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)

無法訪問this.props,state是更新后的必須返回一個對象，用來更新state或者null 不更新必須要初始state

state的值在任何時候都取決于props時

render

必須return jsx|string|number|null 不會直接于瀏覽器交互：不要操作DOM｜和數據

componentDidMount 掛載完成后執行

更新階段

• getDerivedStateFromProps: 此方法在更新個掛載階段都可能會調用

• shouldComponentUpdate: shouldComponentUpdate(nextProps, nextState)，有兩個參數nextProps和nextState，表示新的屬性和變化之后的state，返回一個布爾值，true表示會觸發重新渲染，false表示不會觸發重新渲染，默認返回true,我們通常利用此生命周期來優化React程序性能

• getSnapshotBeforeUpdate: getSnapshotBeforeUpdate(prevProps, prevState)，這個方法在render之后，componentDidUpdate之前調用，有兩個參數prevProps和prevState，表示之前的屬性和之前的state，這個函數有一個返回值，會作為第三個參數傳給componentDidUpdate

• componentDidUpdate: componentDidUpdate(prevProps, prevState, snapshot)，該方法getSnapshotBeforeUpdate方法之后被調用，有三個參數prevProps，prevState，snapshot，表示之前的props，之前的state，和snapshot。

第三個參數是getSnapshotBeforeUpdate返回的,如果觸發某些回調函數時需要用到 DOM 元素的狀態，則將對比或計算的過程遷移至getSnapshotBeforeUpdate，然后在 componentDidUpdate中統一觸發回調或更新狀態。

卸載階段

componentWillUnmount: 當組件被卸載或者銷毀了就會調用，我們可以在這個函數里去清除一些定時器，取消網絡請求，清理無效的DOM元素等垃圾清理工作。

4、react中性能優化的方案

shouldComponentUpdate

控制組件自身或者子組件是否需要更新，尤其在子組件非常多的情況下， 需要進行優化。

PureComponent

PureComponent會幫你 比較新props 跟 舊的props， 新的state和老的state（值相等,或者

對象含有相同的屬性、且屬性值相等 ），決定shouldcomponentUpdate 返回true 或者false

注意：

如果你的 state 或 props 『永遠都會變』，那 PureComponent 并不會比較快，因為shallowEqual

也需要花時間。

感謝各位的閱讀，以上就是“React組件的生命周期是什么”的內容了，經過本文的學習后，相信大家對React組件的生命周期是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！