簡單談談我理解的React組件生命週期

原文首發在個人我的博客：歡迎點此訪問個人我的博客

學了一段時間的react了，如今對本身學習的react的生命週期作一個簡單總結（若有錯誤請留言指正，謝謝）

react一共有以下幾個生命週期函數

1. constructor( props, context){}
2. componentWillMount (){}
3. componentDidMount (){}
4. componentWillReceiveProps( nextProps ){}
5. shouldComponentUpdate( nextProps, nextState){}
6. componentWillUpdate (nextProps,nextState){}
7. render()
8. componentDidUpdate(prevProps,prevState){}
9. componentWillUnmount (){}

下面咱們分別看看這幾個函數的用法

1. constructor( props, context){}

constructor可接收兩個參數，獲取到父組件傳下來的的props,context

只要組件存在constructor,就必要要寫super,不然this指向會錯誤

constructor(props,context) {
  super(props,context)
}

2.componentWillMount (){}組件將要掛載

此時組件還未渲染完成，dom還未渲染

3.componentDidMount (){}

組件渲染完成，此時dom節點已經生成，能夠在這裏調用ajax請求

4.componentWillReceiveProps (nextProps){}

在接受父組件改變後的props須要從新渲染組件時須要用到這個函數

5.shouldComponentUpdate(nextProps,nextState)｛｝

setState之後，state發生變化，組件會進入從新渲染的流程，return false能夠阻止組件的更新

6.componentWillUpdate (nextProps,nextState)｛｝

當組件進入從新渲染的流程纔會進入componentWillUpdate函數

7.render函數

render是一個React組件所必不可少的核心函數，render函數會插入jsx生成的dom結構，react會生成一份虛擬dom樹，在每一次組件更新時，在此react會經過其diff算法比較更新先後的新舊DOM樹，比較之後，找到最小的有差別的DOM節點，並從新渲染

用法：

render () {
  return (
    <div>something</div> 
  )
｝

8.componentDidUpdate(prevProps,prevState){}

組件更新完畢後，react只會在第一次初始化成功會進入componentDidmount,以後每次從新渲染後都會進入這個生命週期，這裏能夠拿到prevProps和prevState，即更新前的props和state。

9.componentWillUnmount ()

用處：

1.clear你在組建中全部的setTimeout,setInterval
2.移除全部組建中的監聽 removeEventListener

react生命週期父子組件渲染順序

父組件代碼：

import React,{Component} from "react"
import ChildComponent from './component/ChildComponent'//引入子組件

class App extends Component{
    constructor(props,context) {
        super(props,context)
        console.log("parent-constructor")
    }
    componentWillMount () {
        console.log("parent-componentWillMount")
    }
    componentDidMount () {
        console.log("parent-componentDidMount")
    }
    componentWillReceiveProps (nextProps) {
        console.log("parent-componentWillReceiveProps")
    }
    shouldComponentUpdate (nextProps,nextState) {
        console.log("parent-shouldComponentUpdate")
    }
    componentWillUpdate (nextProps,nextState) {
        console.log("parent-componentWillUpdate")
    }
    componentDidUpdate (prevProps,prevState) {
        console.log("parent-componentDidUpdate")
    }
    render() {
        return ""
    }
    componentWillUnmount () {
        console.log("parent-componentWillUnmount")
    }
}
export default App

子組件代碼：

import React,{Component} from "react"

class ChildComponent extends Component{
    constructor(props,context) {
        super(props,context)
        console.log("child-constructor")
    }
    componentWillMount () {
        console.log("child-componentWillMount")
    }
    componentDidMount () {
        console.log("child-componentDidMount")
    }
    componentWillReceiveProps (nextProps) {
        console.log("child-componentWillReceiveProps")
    }
    shouldComponentUpdate (nextProps,nextState) {
        console.log("child-shouldComponentUpdate")
    }
    componentWillUpdate (nextProps,nextState) {
        console.log("child-componentWillUpdate")
    }
    componentDidUpdate (prevProps,prevState) {
        console.log("child-componentDidUpdate")
    }
    render(){
        return ""
    }
    componentWillUnmount () {
        console.log("child-componentWillUnmount")
    }
}
export default ChildComponent

瀏覽器中的執行結果以下圖：

結論：

因此在react的組件掛載及render過程當中，最底層的子組件是最早完成掛載及更新的。

constructor()構造函數、componentWillMount執行順序：

頂層父組件--子組件--子組件--...--底層子組件

render、componentDidMount順序：

底層子組件--子組件--子組件--...--頂層父組件

（若有錯誤，麻煩留言指正，謝謝~~）