React组件生命周期

每个组件都有自己的生命周期，它规定了组件的状态和方法需要在哪个阶段改变和执行。关于组件的生命周期，附图一张：

1.React生命周期分两类

• 当组件在挂载或卸载时；
• 当组件接收新的数据时，即组件更新时。

2.组件挂载

这个过程主要做组件状态的初始化，以下面的例子为模板写初始化组件：

import React,{ Component, PropType} from 'react';

class App extends Component {
    static propType = {

    }

    static defaultProps = {

    }

    constructor(props) {
        super(props);

        this.state = {

        }
    }

    componentWillMount() {
        //render 方法之前执行
    }

    componentDidMount() {
         //render 方法之后执行
    }

    render() {
        return <div> This is a demo.</div>;
    }
}

这个初始化过程没什么特别的，读取 state 和 props 以及两个生命周期的方法componentWillMount 和 componentDidMount。

【注意】： 初始化时的 state 都可以放在 this.state

3.组件的卸载

import React,{ Component, PropType} from 'react';

class App extends Component {

    componentWillUnmount() {
         //执行一些清理方法，如事件回收或是清理定时器
    }

    render() {
        return <div> This is a demo.</div>;
    }
}

4.数据更新过程

更新指的是父组件向下传递 props 或者自身执行 setState 方法时发生的一系列更新动作。

import React,{ Component, PropType} from 'react';

class App extends Component {

    componentWillReceiveProps(nextProps) {
         //this.setState({})
    }

    shouldComponentUpdate(nextProps, nextState){
        // return true;
    }

    componentWillUpdate(nextProps, nextState){

    }

    componentDidUpdate(preProps, preState){

    }
    render() {
        return <div> This is a demo.</div>;
    }
}

• 如果组件自身的 state 更新了

  那么会依次执行 shouleComponentUpdate、componentWillUpdate、render 和componentDidUpdate。

  shouleComponentUpdate是一个特别的方法，它接收需要更新的 props 和 state，让开发者增加必要的条件判断，在其在需要时更新，不需要时不更新。so，当方法返回false的时候，组件不再向下执行生命周期方法。

• 如果组件是由父组件更新 props 而更新的

  那么在 shouldComponentUpdate 之前会先执行 componentWillReceiveProps。此方法可以作为React在props传入后，渲染前setState的机会。

5. state的使用

• 可以使用 this.state()方法的地方： componentWillMount()、componentDidMount()、componentWillReceiveProps(nextProps)、componentDidUpdate()
• 可以使用 setState()方法的地方： shouldComponentUpdate(nextProps, nextState),组件由于父组件更新而更新时用到的componentWillReceiveProps(nextProps)也可以使用。

6. 不同状态下的执行顺序

在组件生命周期的不同阶段实现不同的逻辑

• 当首次挂载组件时，按顺序执行 getDefaultProps、getInitialState、componentWillMount、render 和 componentDidMount。
• 当卸载组件时，执行componentWillUnmount。
• 当重新挂载组件时，此时按顺序执行getInitialState、componentWillMount、render 和 componentDidMount，并不执行getDefaultProps。
• 当再次渲染组件时，组件接收到更新状态，此时按顺序执行componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render和componentDidUpdate。

当使用 ES6 classes构建 React组件时， static defaultProps = {}其实就是调用内部的getDefaultProps,constructor 中的 this.state = {}其实就是调用内部的getInitialState()方法。

7. 通过三个阶段管理组件的生命周期

通过mounting、receive_propss和unmounting三个阶段进行管理分别对应mountComponent、updateComponent、unmountComponent。

• mounting 组件挂载

  getDefaultProps是整个生命周期中最先开始执行的，它只能执行一次。

• receive_propss 更新组件

  调用shouldComponentUpdate判断是否需要进行组件更新。
  mountComponent、updateComponent本质上是通过递归渲染内容的，由于递归的特性，父组件的componentWillMount是在其子组件的componentWillMount之前调用的，而父组件的componentDidUpdate是在其子组件的componentDidUpdate之后调用的。

• 和unmounting 卸载组件