React生命周期

react可以将页面分成一个一个独立或嵌套的组件，使得整体代码可复用性特别高；react组件的挂载到销毁的过程中有七个生命周期钩子函数，可以在不同的生命周期函数中写业务逻辑代码

componentWillMount

组件将要被挂载，这个阶段发生在组件render函数之前，初始化state状态之后

componentDidMount

组件已经挂载完成，这个阶段发生在render函数执行之后，是组件首次创建完成后的最终形态

componentWillReceiveProps

组件将要接收新的属性，这个阶段发生在组件的属性改变的时候，并且是组件重新渲染的过程中第一个执行的方法

shouldComponentUpdate

组件是否要更新，这个阶段发生在componentWillReceiveProps之后，控制组件是否会重新渲染，唯一一个需要返回值的钩子函数

componentWillUpdate

组件将要更新，这个阶段发生在shouldComponentUpdate之后，render函数执行之前

componentWillUnmount

组件将要被销毁，当组件由于功能需求或者用户操作，需要卸载的时候执行此钩子函数，一般用于解除组件的定时器或者事件监听函数

代码示例

//定义一个时钟组件
class Clock extends Component {

    constructor(){
        super();
        this.state={
            time: new Date().toLocaleString()
        };
    }

    componentWillReceiveProps(){
        console.log("clock receive props");
    }

    shouldComponentUpdate(){
        console.log("clock should update");
        return true;
    }

    componentWillUpdate(){
        console.log("clock will update");
    }

    componentDidUpdate(){
        console.log("clock did update");
    }

    componentWillMount(){
        console.log("clock will mount");
    }

    componentDidMount(){
        console.log("clock did mount");
        this.timer=setTimeout(()=>{
            this.setState({
                time: new Date().toLocaleString()
            });
        },1000);
    }

    componentWillUnmount(){
        console.log("clock unmount");
        clearInterval(this.timer);
    }

    render(){
        console.log("clock render");
        return (
          <div>
              {this.props.country }: {this.state.time}
          </div>
        )
    }
}

//在Index组件中使用Clock组件，并且将Index组件在页面中渲染出来
class Index extends Component {

    constructor(){
        super();
        this.state={
            isShow: true,
            country: "china"
        };
    }

    shouldComponentUpdate(){
        console.log("index should update");
        return true;
    }

    componentWillUpdate(){
        console.log("index will update");
    }

    componentDidUpdate(){
        console.log("index did update");
    }

    componentWillMount(){
        console.log("index will mount");
    }

    componentDidMount(){
        console.log("index did mount");
    }

    render(){
        console.log("index render");
        return (
          <div>
              {
                  this.state.isShow?
                      <Clock country={this.state.country} /> : null
              }
            <button onClick={()=>{this.setState({isShow: !this.state.isShow})}}>
                {
                    this.state.isShow?"hide":"show"
                }
            </button>
              {
                  this.state.isShow?
                      <button onClick={()=>{this.setState({country: this.state.country==="china"?"usa":"china"})}}>transform</button> : null
              }
          </div>
        )
    }
}

页面首次被渲染的时候依次在控制台打印出如下结果：

index will mount
index render
clock will mount
clock render
clock did mount
index did mount

紧接着，一秒过后，定时器中的函数执行，对Clock组件的状态进行了修改，于是浏览器依次输出如下结果：

clock should update
clock will update
clock render
clock did update

从上面可以看出update类型的钩子函数只会在组件存在之后状态改变时执行。之后点击transform按钮，将Clock接收的props中的country属性改变成usa，浏览器输出如下结果：

index should update
index will update
index render
clock receive props
clock should update
clock will update
clock render
clock did update
index did update

再点击hide按钮，使Clock组件从页面中卸载，浏览器输出如下结果：

index should update
index will update
index render
clock unmount
index did update

以上就是react组件完整的生命周期，每个react组件从创建到销毁都会经历如此过程，这些生命周期钩子能够帮助我们实现项目中各种各样的功能需求。

React生命周期