react框架的生命周期有哪些階段

這篇文章主要講解了“react框架的生命周期有哪些階段”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“react框架的生命周期有哪些階段”吧！

1.掛載卸載過程

(1).constructor():

這個方法是用來完成 React 數(shù)據(jù)的一個初始化，還接受props和context這兩參數(shù)，如果我們想在函數(shù)內(nèi)部使用這兩參數(shù)時，就必須要使用super()進(jìn)行傳入?yún)?shù)；否則會導(dǎo)致this指向錯誤。

(2).componentWillMount():

這個方法的話一般比較少用，比較多的是在服務(wù)端的時候使用。

(3).componentDidMount():

當(dāng)組件第一次渲染完成的時候dom節(jié)點生成，就可以在這里調(diào)用ajax的請求，等到返回setstate數(shù)據(jù)之后組件會重新的渲染。

(4).componentWillUnmount():

這個方法是用來進(jìn)行組件的一個卸載和數(shù)據(jù)的銷毀的。有時候我們在執(zhí)行的時候會碰到下面這個警告，是因為我們的組件中的Ajax請求返回的setstate在我們執(zhí)行銷毀的時候還沒有請求完成所報的警告！

Can only update a mounted or mounting component. This usually      means you called setState() on an unmounted component. This is a   no-op. Please check the code for the undefined component.

解決方法如下代碼：

componentDidMount() {
    this.isMount === true
    axios.post().then((res) => {
    this.isMount && this.setState({   // 增加條件ismount為true時
      aaa:res
    })
})
}
componentWillUnmount() {
    this.isMount === false
}

2.更新過程

(1).componentWillReceiveProps (nextProps):

這個方法用的比較多的是在接受父組改變之后的props需要重新渲染組件的時候。下面是通過nextProps和this.props對比，從而重新渲染的代碼和注釋。

  componentWillReceiveProps (nextProps) {
    nextProps.openNotice !== this.props.openNotice&&this.setState({
        openNotice:nextProps.openNotice
    }，() => {
      console.log(this.state.openNotice:nextProps)
      //將state更新為nextProps,在setState的第二個參數(shù)（回調(diào)）可以打         印出新的state
  })
}

(2).shouldComponentUpdate(nextProps,nextState):

這個方法主要用于在性能部分的優(yōu)化，還可以通過return false阻止組件的更新。

(3).componentWillUpdate (nextProps,nextState):

在這個方法中，當(dāng)shouldComponentUpdate返回為true以后呢，組件就會進(jìn)入重新渲染的流程，進(jìn)入到這個方法時,我們這個方法里同樣可以拿到nextProps和nextState。

(4).componentDidUpdate(prevProps,prevState):

這個方法的作用是當(dāng)組件更新完成之后，react 只有在第一次初始化完成之后會進(jìn)入componentDidmount；后面的每次重新渲染后都會進(jìn)入componentDidUpdate(prevProps,prevState)這個生命周期，而且在這個周期中可以拿到prevProps和prevState，就是在更新前的props和state。

(5).render():

render 這個函數(shù)會插入 jsx 生成的 dom 結(jié)構(gòu)中，從而生成一份虛擬 dom 樹，而且在每一次組件更新時，還會通過其 diff 的算法比較更新前后的 DOM 樹，找到最小的而且還有差異的 DOM 節(jié)點重新渲染。

感謝各位的閱讀，以上就是“react框架的生命周期有哪些階段”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對react框架的生命周期有哪些階段這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！