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

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

1.掛載卸載過程

(1).constructor():

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

(2).componentWillMount():

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

(3).componentDidMount():

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

(4).componentWillUnmount():

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

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的第二個參數（回調）可以打         印出新的state
  })
}

(2).shouldComponentUpdate(nextProps,nextState):

這個方法主要用于在性能部分的優化，還可以通過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 這個函數會插入 jsx 生成的 dom 結構中，從而生成一份虛擬 dom 樹，而且在每一次組件更新時，還會通過其 diff 的算法比較更新前后的 DOM 樹，找到最小的而且還有差異的 DOM 節點重新渲染。

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