【React系列教程七】React生命周期

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33237207/article/details/89358833

生命周期函数学习，必须记住的生命周期函数：

*加载的时候：componentWillMount、 render 、componentDidMount（此时可放dom操作）

更新的时候：componentWillUpdate、render、componentDidUpdate

 *销毁的时候： componentWillUnmount

以下面的组件为例：

import React from 'react';
class Lifecycle extends React.Component {
    constructor(props) {
        console.log('01构造函数---constructor');
        super(props);
        this.state = {
            msg: '我是一个msg'
        };
    }
    componentWillMount() {
        console.log('02组件将要挂载---componentWillMount');
    }
    componentDidMount() {
        console.log('04组件挂载完成---componentDidMount')
    }
    shouldComponentUpdate(nextProps, nextState) {
        //是否要更新数据  如果返回true才会执行更新数据的操作
        console.log('01是否要更新数据---shouldComponentUpdate');
        console.log(nextProps);
        console.log(nextState);
        return true;
    }
    componentWillUpdate() {
        console.log('02组件将要更新---componentWillUpdate');
    }
    componentDidUpdate() {
        console.log('04组件数据更新完成---componentDidUpdate');
    }
    componentWillUnmount() {
        console.log('组件销毁了---componentWillUnmount');
    }
    setMsg = () => {
        this.setState({
            msg: '我是改变后的msg的数据'
        })
    }
    render() {
        console.log('03数据渲染---render')
        return (
            <div>
                <button onClick={this.setMsg}>更新msg的数据</button>
            </div>
        );
    }
}

export default Lifecycle;

1、页面渲染时，发现控制台打印下面的内容：

2、当我点击按钮更新state数据时，发现控制台打印下面的内容：

注：shouldComponentUpdate如果return false;则不会继续执行componentWillUpdate方法。