React v16.0前的生命周期

image

阶段一：组件初始化 (initialization)

constructor() 构造方法 super(props) 用来调用基类的构造方法( constructor() ), 也将父组件的props注入给子组件，子组件读取(组件中props只读不可变，state可变)。
而constructor()用来做一些组件的初始化工作，如定义this.state的初始内容。

import React, { Component } from 'react';

class Test extends Component {
  constructor(props) {
    super(props);
  }
}

阶段二：组件的挂载阶段(Mounting)

此阶段分为componentWillMount，render，componentDidMount三个时期。

1.componentWillMount:
在组件挂载到DOM前调用，且只会被调用一次，在这边调用this.setState不会引起组件重新渲染，也可以把写在这边的内容提前到constructor()中，所以项目中很少用。

  componentWillMount() {
        console.log(' componentWillMount  组件将要挂载到页面的时刻')
    }

2.render
根据组件的props和state，return 一个React元素（描述组件，即UI），不负责组件实际渲染工作，之后由React自身根据此元素去渲染出页面DOM

3.componentDidMount:
组件挂载到DOM后调用，且只会被调用一次

   componentDidMount() {
        console.log(' componentDidMount  组件挂载完成的时刻')
    }

阶段三：组件更新阶段（updata）

setState引起的state更新或父组件重新render引起的props更新，更新后的state和props相对之前无论是否有变化，都将引起子组件的重新render。

  shouldComponentUpdate() {
        console.log('1-shouldComponentUpdate   组件更新之前执行')
        return true
    }
    componentWillUpdate() {
        console.log('2-componentWillUpdate ')
    }
    render(){
      console.log('3-开始渲染Dom。。。。')
    }
    componentDidUpdate() {
        console.log('4-componentDidUpdate ')
    }

造成组件更新有两类（三种）情况：

1.父组件重新render
a. 直接使用,每当父组件重新render导致的重传props，子组件将直接跟着重新渲染，无论props是否有变化。可通过shouldComponentUpdate方法优化。
b..在componentWillReceiveProps方法中，将props转换成自己的state

class Child extends Component {
    constructor(props) {
        super(props);
        this.state = {
            someThings: props.someThings
        };
    }
    componentWillReceiveProps(nextProps) { // 父组件重传props时就会调用这个方法
        this.setState({someThings: nextProps.someThings});
    }
    render() {
        return <div>{this.state.someThings}</div>
    }
}

2.组件本身调用setState，无论state有没有变化。可通过shouldComponentUpdate方法优化

1.componentWillReceiveProps(nextProps)
此方法只调用于props引起的组件更新过程中，参数nextProps是父组件传给当前组件的新props。
2.shouldComponentUpdate(nextProps, nextState)
此方法通过比较nextProps，nextState及当前组件的this.props，this.state，返回true时当前组件将继续执行更新过程，返回false则当前组件更新停止，以此可用来减少组件的不必要渲染，优化组件性能。

 shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.content!== this.props.content) {
            return true;
        } else {
            return false;
        }
    }

3.componentWillUpdate(nextProps, nextState)
此方法在调用render方法前执行，在这边可执行一些组件更新发生前的工作，一般较少用。

4.componentDidUpdate(prevProps, prevState)
此方法在组件更新后被调用，可以操作组件更新的DOM，prevProps和prevState这两个参数指的是组件更新前的props和state

卸载阶段

componentWillUnmount
此方法在组件被卸载前调用，可以在这里执行一些清理工作，比如清楚组件中使用的定时器，清楚componentDidMount中手动创建的DOM元素等，以避免引起内存泄漏

componentWillUnmount() {
  console.log('child-componentWillUnmount')
     }