react16之前的生命周期

xiangchaobin 發(fā)布于2019-08-29 18:41 / 1434人閱讀

摘要：之前后的生命周期初始化階段設(shè)置默認(rèn)屬性，設(shè)置屬性校驗(yàn)屬性檢查器，檢查父組件傳遞給當(dāng)前組件的類型設(shè)置組件的初始化狀態(tài)父組件掛載之前父組件掛載子組件掛載中父組件掛載完成組件被更新完成后觸發(fā)。

lefecycle-React

react16之前后的生命周期

A.初始化階段：
1.設(shè)置默認(rèn)屬性：

static defaultProps = {
    name: "sls",
    age:23，
     number: 0
};
//or      Counter.defaltProps={name:"sls"}

2)設(shè)置屬性校驗(yàn)

`import PropTypes from "prop-types";`
屬性檢查器，檢查父組件傳遞給當(dāng)前組件的類型
  static propTypes = {
    number: PropTypes.number.isRequired
  }

2.設(shè)置組件的初始化狀態(tài)

constructor() {
    super();
    this.state = {number: 0}
}

3、父組件掛載之前 componentWillMount
4 、render(父組件掛載)
5、子組件掛載中render
6、父組件掛載完成 componentDidMount
組件被更新完成后觸發(fā)。頁面中產(chǎn)生了新的DOM的元素，可以進(jìn)行DOM操作

7、父組件是否需要更新 shouldComponentUpdate

//上一個(gè)屬性對(duì)象 上一個(gè)狀態(tài)對(duì)象
shouldComponentUpdate(prevProps,prevState){
    if(prevState.number<5){//如果新狀態(tài)的number屬性小于5的話
      return true;
    }else{
      return false;
    }
  }

8、父組件將要更新 componentWillUpdate
4、render(父組件掛載)
9、子組件將要接收到新屬性SubCounter componentWillReceiveProps
10、子組件是否需要更新 shouldComponentUpdate

shouldComponentUpdate(props,state){
    if(props.number<3){
      return true;
    }else{
      return false;
    }
  }

11、子組件將要更新 componentWillUpdate
12、子組件掛載中render
13、子組件更新完成 componentDidUpdate
8、父組件更新完成 componentDidUpdate

子組件最后一次更新：
6、父組件是否需要更新 shouldComponentUpdate
7、父組件將要更新 componentWillUpdate
4、render(父組件掛載)
9、子組件將要接收到新屬性SubCounter componentWillReceiveProps
10、子組件是否需要更新 shouldComponentUpdate
8、父組件更新完成 componentDidUpdate

一般我們通過shouldComponentUpdate()函數(shù)來優(yōu)化性能：
一個(gè)React項(xiàng)目需要更新一個(gè)小組件時(shí)，很可能需要父組件更新自己的狀態(tài)。而一個(gè)父組件的重新更新會(huì)造成它旗下所有的子組件重新執(zhí)行render()方法，形成新的虛擬DOM，再用diff算法對(duì)新舊虛擬DOM進(jìn)行結(jié)構(gòu)和屬性的比較，決定組件是否需要重新渲染
無疑這樣的操作會(huì)造成很多的性能浪費(fèi)，所以我們開發(fā)者可以根據(jù)項(xiàng)目的業(yè)務(wù)邏輯，在shouldComponentUpdate()中加入條件判斷，從而優(yōu)化性能
例如React中的就提供了一個(gè)PureComponent的類，當(dāng)我們的組件繼承于它時(shí)，組件更新時(shí)就會(huì)默認(rèn)先比較新舊屬性和狀態(tài)，從而決定組件是否更新。值得注意的是，PureComponent進(jìn)行的是淺比較，所以組件狀態(tài)或?qū)傩愿淖儠r(shí)，都需要返回一個(gè)新的對(duì)象或數(shù)組

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

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

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

    componentWillUpdate() {
        console.log("11、子組件將要更新 componentWillUpdate");
    }

    componentDidUpdate() {
        console.log("13、子組件更新完成 componentDidUpdate");
    }

    componentWillUnmount() {
        console.log("14、子組件將卸載 componentWillUnmount");
    }

    render() {
        console.log("12、子組件掛載中render");
        return (
            {this.props.number}
        )
    }
}

class Counter extends React.Component {
    static defaultProps = {
        //1、加載默認(rèn)屬性
        name: "sls",
        age:23
    };

    constructor() {
        super();
        //2、加載默認(rèn)狀態(tài)
        this.state = {number: 0}
    }

    componentWillMount() {
        console.log("3、父組件掛載之前 componentWillMount");
    }

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

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

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

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

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

    render() {
        console.log("4、render(父組件掛載)");
        return (
            
                {this.state.number}
                
                {this.state.number<10?:null}
            
        )
    }
}
ReactDOM.render(, document.getElementById("root"));