React中生命週期鉤子函數實例演示

生命週期鉤子函數速查表 

# React生命週期鉤子函數
## 頁面渲染期
* constructor                       構造函數 在所有函數執行之前它先執行(數據接收 實現繼承super(props))
* UNSAFE_componentWillMount         組件將要掛載(數據掛載之前 可以操作數據 不可以操作dom)
* render                            頁面渲染(渲染組件 和 html 標籤)
* componentDidMount                 組件掛載完成(數據掛載之後 可以操作數據和dom)

## 頁面更新期
* UNSAFE_componentWillReceiveProps   父組件上狀態變化時 會自動觸發鉤子函數 子組件可以由此決定是否接收數據(接收組件傳入輸入數據)

* shouldComponentUpdate              組件是否要更新數據，需要返回布爾值 true 跟新數據 false 不更新數據(檢測組件內的變化 可以用作頁面性能的優化(默認值爲true))
* UNSAFE_componentWillUpdate         組件更新數據(組件更新之前調用)
* render                             頁面從新渲染(組件更新之後渲染組件)
* componentDidUpdate                 組件數據更新完成(組件更新之後調用)

## 頁面銷燬期
* componentWillUnmount               頁面銷燬(組件銷燬時調用 可以做一些內存的優化 [全局變量,閉包,計時器,事件])

只有類組件纔有生命週期，函數組件沒有生命週期

生命週期

父組件

// 父組件
import React,{ Component } from 'react'
import Child from './child'

// 鉤子函數執行順序和編寫順序無關

export default class Parent extends Component{
    // 頁面渲染期
    constructor(){
        super()
        this.state = {
            msg:'',
            showChild:true
        }
        console.log('構造函數執行了-constructor...')
    }
    // 嚴格模式下 不建議使用
    UNSAFE_componentWillMount(){
        console.log('組件將要掛載-componentWillMount...');
        
    }
    render(){
        console.log('頁面渲染了-render...');
        let el = this.state.showChild ? <Child  msg={ this.state.msg }/> : null
        return(
            <div>
                <h1>parent組件</h1>
                <input type="text" value={this.state.msg} 
                    onChange={ (e)=>this.msgChange(e) }
                />
                <p>{ this.state.msg }</p>
                <button onClick={ ()=>this.setState({showChild:!this.state.showChild}) }>銷燬</button>
                <hr/>
                {el}
            </div>
        )
    }
    componentDidMount(){
        console.log('組件掛載完成-componentDidMount...');
    }
    
    // 頁面更新期
    shouldComponentUpdate(){
        console.log('=================')
        console.log('組件是否要更新數據嗎？-shouldComponentUpdate...')
        // 返回true 可以更新數據 false 不更新數據
        return true;
    }
    UNSAFE_componentWillUpdate(){
        console.log('組件將要更新數據-componentWillUpdate...')
    }
    msgChange(e){
        // 更新數據
        console.log('數據正在更新中...')
        this.setState({
            msg:e.target.value
        })
    }
    // 還有個 render鉤子函數 頁面渲染
    componentDidUpdate(){
        console.log('組件數據更新完成-componentDidUpdate...')
    }
}

子組件

// 子組件
import React, { Component } from 'react'

export default class Child extends Component {
    // 渲染期
    constructor() {
        super()
        console.log('子組件構造函數執行...')
    }
    render() {
        console.log('子組件渲染了...')
        return (
            <div>
                <h1>child子組件</h1>
                <p>接收到父組件數據:{this.props.msg}</p>
            </div>
        )
    }
    UNSAFE_componentWillMount() {
        console.log('子組件將要掛載...')
    }
    componentDidMount() {
        console.log('子組件掛載完成...')
    }

    // 更新期
    shouldComponentUpdate() {
        console.log('子組件是否要更新數據？...')
        return true
    }
    UNSAFE_componentWillUpdate() {
        console.log('子組件將要更新數據...')
    }
    componentDidUpdate() {
        console.log('子組件數據更新完成...')
    }

    // 放子組件 會自動執行 放父組件不會自動執行
    UNSAFE_componentWillReceiveProps() {
        console.log('子組件將要接收父組件傳遞的數據...')
    }

     // 頁面銷燬期
    componentWillUnmount(){
        console.log('子組件將要被銷燬...')
    }
}

GIF演示