lefecycle-React

react16之前后的生命周期

A.初始化阶段：
1.设置默许属性：

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

2)设置属性校验

`import PropTypes from 'prop-types';`
属性搜检器，搜检父组件传递给当前组件的范例
  static propTypes = {
    number: PropTypes.number.isRequired
  }

2.设置组件的初始化状况

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

3、父组件挂载之前 componentWillMount
4 、render(父组件挂载)
5、子组件挂载中render
6、父组件挂载完成 componentDidMount
组件被更新完成后触发。页面中产生了新的DOM的元素，能够举行DOM操纵

7、父组件是不是须要更新 shouldComponentUpdate

//上一个属性对象 上一个状况对象
shouldComponentUpdate(prevProps,prevState){
    if(prevState.number<5){//假如新状况的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()函数来优化机能：

一个React项目须要更新一个小组件时，极可能须要父组件更新本身的状况。而一个父组件的从新更新会构成它旗下一切的子组件从新实行render()要领，构成新的假造DOM，再用diff算法对新旧假造DOM举行构造和属性的比较，决议组件是不是须要从新衬着

无疑如许的操纵会构成许多的机能糟蹋，所以我们开发者能够依据项目的营业逻辑，在
shouldComponentUpdate()中到场前提推断，从而优化机能

比方React中的就供应了一个PureComponent的类，当我们的组件继续于它时，组件更新时就会默许先比较新旧属性和状况，从而决议组件是不是更新。值得注意的是，PureComponent举行的是浅比较，所以组件状况或属性转变时，都须要返回一个新的对象或数组

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 (
            <p>{this.props.number}</p>
        )
    }
}

class Counter extends React.Component {
    static defaultProps = {
        //1、加载默许属性
        name: 'sls',
        age:23
    };

    constructor() {
        super();
        //2、加载默许状况
        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 (
            <div style={{margin:50}}>
                <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'));