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>        )    }}