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

重慶崽兒Brand發表於2018-02-04
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順序：

底層子元件–子元件–子元件–…–頂層父元件

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

相關文章