在前端react框架中生命周期有那幾個階段？

當我們在學習前端語言框架的時候，我們除了知道它是干什么的還要知道這個框架的生命周期；那么今天我們就來講講“在前端react框架中生命周期有那幾個階段”吧！

在react框架的生命周期中廣義上分為：掛載、渲染、卸載這三個階段。所以我們可以把React框架的生命周期分為掛載卸載過程和更新過程，生命周期圖如下：

(1).constructor():

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

(2).componentWillMount():

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

(3).componentDidMount():

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

(4).componentWillUnmount():

這個方法是用來進行組件的一個卸載和數(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
}

(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):

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

(4).componentDidUpdate(prevProps,prevState):

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

(5).render():

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

這就是有關于“在前端react框架中生命周期有那幾個階段”的個人分析，當然隨著不斷地更新還會有更多的知識加入，如果小伙伴們有更好的一些想法也可以和大家一起分享，一起成長進步。更多的想過知識可以在W3cschool中進行學習和了解。