React组件的生命周期

概述

React组件的生命周期就是React组件从创建到消亡的过程。大致分为三个阶段：

1.Mounting    组件装载和初始化
2.Updating    组件更新 
3.Unmounting  组件卸载

图例

生命周期函数及其用法

constructor(props, context){...}

此函数对应图中getInitialState方法，由于React在ES6的实现中去掉了getInitialState这个hook函数，规定state在constructor中实现。该函数为组件的构造函数，用于初始化组件状态（state），在组件创建的时候调用一次，在组件的整个生命周期只调用一次。方法中不可以使用setState方法

---

componentWillMount(){...}

在组件装载（render）之前调用一次。在这个函数里面调用setState，本次的render函数可以看到更新后的state，并且该方法在组件生命周期只调用一次。在本方法中可以使用fetch异步请求加载操作。

---

componentDidMount(){...}

组件装载（render）完成后调用一次，此时子组件也已经装载完成，可以在该方法中使用refs。也可以使用setState方法，该方法在组件生命周期中只调用一次。

---

componentWillReceiveProps(nextProps){...}

props是通过父组件传递给子组件的。当父组件发生render的时候子组件就会调用componentWillReceiveProps（不管props有没有更新，也不管父子组件之间有没有数据交换）。此方法用于更新组件数据。方法中可以使用setState，并且在组件的生命周期中可能被调用多次。

---

bool shouldComponentUpdate(nextProps, nextState){...}

注意本方法是唯一一个包含返回值的生命周期函数，其他函数返回值都为void。组件装载之后，每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true，需要重新render。在比较复杂的应用里，有一些数据的改变并不影响界面展示，可以在这里做判断，优化渲染效率。方法内不可以使用setState函数。

---

componentWillUpdate(nextProps, nextState){...}

shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用。需要特别注意的是，在这个函数里面，你就不能使用 this.setState 来修改状态。这个函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中。紧接着这个函数，就会调用 render() 来更新界面了。

---

render(){...}

render即为组件渲染函数，render中不能使用setState

---

componentDidUpdate(prevProps,prevState){...}

除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。函数内不可使用setState 方法。

---

componentWillUnmount(){...}

组件即将卸载时调用。一般在componentDidMount注册的监听事件需要在该方法中注销删除，以免不必要的错误。

---

实例

/**
 * 生命周期函数示例.
 * 
 */
import React from 'react';
/**
 * 父组件
 */
export default class LifeCircle extends React.Component{

    constructor(props){
        super(props);
        this.state=({
            propsToChild:1
        })
    }

    addCount=()=>{
        this.setState({
            propsToChild:this.state.propsToChild+1
        })
    }

    render(){
        return (
            <div>
                <button onClick={this.addCount}>累加计数值</button>
                <LifeCircleChild currentCount={this.state.propsToChild}></LifeCircleChild>
            </div>
        )
    }
}

/**
 * 生命周期组件
 */
class LifeCircleChild extends React.Component{
    /**
     * 构造函数，初始化state.
     * @param  props 
     * @return void
     */
    constructor(props){
        super(props);
        this.state=({
            currentCount:props.currentCount,//计数,来自父组件
            width:0,//当前文档body宽度
            height:0,//当前文档body高度
        })
    }

    /**
     * 组件render前执行的函数，在此函数中可以执行一些异步请求并setState.
     * @return void
     */
    componentWillMount(){
        //异步请求，返回值内容为 {currentCountResult:1}
        fetch('/currentCount.json')
        .then((res)=> res.json())
        .then((json)=>{
            this.setState({
                currentCount:json.currentCountResult
            })
        });
    }

    /**
     * 组件render之后执行，通常在此方法中注册一些监听事件.
     * @return void
     */
    componentDidMount(){
        //添加浏览器窗口resize监听事件，通知this.onWindowResize方法.
        window.addEventListener('resize', this.onWindowResize);
    }

    /**
     * 当父组件render后调用，根据父组件的值重新渲染组件状态（state）.
     * @param  Object nextProps [父组件传来的参数对象]
     * @return void
     */
    componentWillReceiveProps(nextProps){
        this.setState({
            currentCount:nextProps.currentCount
        })
    }

    /**
     * 判断是否需要重新渲染组件,true为渲染，本方法中当计数能被3整除时，不渲染组件.
     * @param  Object nextProps [将要渲染的props]
     * @param  Object nextState [将要渲染的状态]
     * @return boolean           [是否渲染]
     */
    shouldComponentUpdate(nextProps, nextState){
        if(nextState.currentCount%3===0){
            return false;
        }
        return true;
    }


    /**
     * shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用.
     * @param  Object nextProps [this.props = nextProps]
     * @param  Object nextState [this.state = nextState]
     * @return void
     */
    componentWillUpdate(nextProps, nextState){
        console.log(nextProps);
        console.log(nextState);
    }

    /**
     * 除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。函数内不可使用setState 方法.
     * @param  Object prevProps 
     * @param  Object prevState 
     * @return void          
     */
    componentDidUpdate(prevProps,prevState){
        console.log(prevProps);
        console.log(prevState);
    }

    /**
     * 组件即将卸载时调用。一般在componentDidMount注册的监听事件需要在该方法中注销删除，以免不必要的错误.
     * @return void
     */
    componentWillUnmount(){
        //在组件即将销毁的时候取消resize的监听
        window.removeEventListener('resize', this.onWindowResize);
    }

    /**
     * 当浏览器窗口大小发生变化时，获得文档body的宽度和高度.
     * @return void
     */
    onWindowResize=()=>{
        let width = document.body.offsetWidth;
        let height = document.body.offsetHeight;
        this.setState({
            width:width,
            height:height
        })
    };

    /**
     * 渲染虚拟dom
     * @return void
     */
    render(){
        return (
            <div>
                <p>
                    当前计数：{this.state.currentCount}
                </p>
                <p>
                    当前文档body高度：{this.state.height}
                </p>
                <p>
                    当前文档body宽度：{this.state.width}
                </p>
            </div>
        )
    }
}