圖解ES6中的React生命週期

前言

若是將React的生命週期比喻成一隻螞蟻爬過一根吊繩，那麼這隻螞蟻從繩頭爬到繩尾，就會依次觸動不一樣的卡片掛鉤。在React每個生命週期中，也有相似卡片掛鉤的存在，咱們把它稱之爲‘鉤子函數’。那麼在React的生命週期中，到底有哪些鉤子函數？React的生命週期又是怎樣的流程？今天我給你們來總結總結

React 生命週期

如圖，React生命週期主要包括三個階段：初始化階段、運行中階段和銷燬階段，在React不一樣的生命週期裏，會依次觸發不一樣的鉤子函數，下面咱們就來詳細介紹一下React的生命週期函數

1、初始化階段

一、設置組件的默認屬性

static defaultProps = {
    name: 'sls',
    age:23
};
//or
Counter.defaltProps={name:'sls'}
複製代碼

二、設置組件的初始化狀態

constructor() {
    super();
    this.state = {number: 0}
}
複製代碼

三、componentWillMount()

組件即將被渲染到頁面以前觸發，此時能夠進行開啓定時器、向服務器發送請求等操做

四、render()

組件渲染

五、componentDidMount()

組件已經被渲染到頁面中後觸發：此時頁面中有了真正的DOM的元素，能夠進行DOM相關的操做

2、運行中階段

一、componentWillReceiveProps()

組件接收到屬性時觸發

二、shouldComponentUpdate()

當組件接收到新屬性，或者組件的狀態發生改變時觸發。組件首次渲染時並不會觸發

shouldComponentUpdate(newProps, newState) {
    if (newProps.number < 5) return true;
    return false
}
//該鉤子函數能夠接收到兩個參數，新的屬性和狀態，返回true/false來控制組件是否須要更新。
複製代碼

通常咱們經過該函數來優化性能：

一個React項目須要更新一個小組件時，極可能須要父組件更新本身的狀態。而一個父組件的從新更新會形成它旗下全部的子組件從新執行render()方法，造成新的虛擬DOM，再用diff算法對新舊虛擬DOM進行結構和屬性的比較，決定組件是否須要從新渲染

無疑這樣的操做會形成不少的性能浪費，因此咱們開發者能夠根據項目的業務邏輯，在shouldComponentUpdate()中加入條件判斷，從而優化性能

例如React中的就提供了一個PureComponent的類，當咱們的組件繼承於它時，組件更新時就會默認先比較新舊屬性和狀態，從而決定組件是否更新。值得注意的是，PureComponent進行的是淺比較，因此組件狀態或屬性改變時，都須要返回一個新的對象或數組

三、componentWillUpdate()

組件即將被更新時觸發

四、componentDidUpdate()

組件被更新完成後觸發。頁面中產生了新的DOM的元素，能夠進行DOM操做

3、銷燬階段

一、componentWillUnmount()

組件被銷燬時觸發。這裏咱們能夠進行一些清理操做，例如清理定時器，取消Redux的訂閱事件等等。

有興趣的同窗也能夠用下面的代碼進行測試

廢話少說，放碼過來!

import React from 'react'
import ReactDOM from 'react-dom';

class SubCounter extends React.Component {
    componentWillReceiveProps() {
        console.log('九、子組件將要接收到新屬性');
    }

    shouldComponentUpdate(newProps, newState) {
        console.log('十、子組件是否須要更新');
        if (newProps.number < 5) return true;
        return false
    }

    componentWillUpdate() {
        console.log('十一、子組件將要更新');
    }

    componentDidUpdate() {
        console.log('1三、子組件更新完成');
    }

    componentWillUnmount() {
        console.log('1四、子組件將卸載');
    }

    render() {
        console.log('十二、子組件掛載中');
        return (
                <p>{this.props.number}</p>
        )
    }
}

class Counter extends React.Component {
    static defaultProps = {
        //一、加載默認屬性
        name: 'sls',
        age:23
    };

    constructor() {
        super();
        //二、加載默認狀態
        this.state = {number: 0}
    }

    componentWillMount() {
        console.log('三、父組件掛載以前');
    }

    componentDidMount() {
        console.log('五、父組件掛載完成');
    }

    shouldComponentUpdate(newProps, newState) {
        console.log('六、父組件是否須要更新');
        if (newState.number<15) return true;
        return false
    }

    componentWillUpdate() {
        console.log('七、父組件將要更新');
    }

    componentDidUpdate() {
        console.log('八、父組件更新完成');
    }

    handleClick = () => {
        this.setState({
            number: this.state.number + 1
        })
    };

    render() {
        console.log('四、render(父組件掛載)');
        return (
            <div>
                <p>{this.state.number}</p>
                <button onClick={this.handleClick}>+</button>
                {this.state.number<10?<SubCounter number={this.state.number}/>:null}
            </div>
        )
    }
}
ReactDOM.render(<Counter/>, document.getElementById('root'));
複製代碼