先来了解一下react的生命周期函数有哪些：

组件将要挂载时触发的函数：componentWillMount
组件挂载完成时触发的函数：componentDidMount
是否要更新数据时触发的函数：shouldComponentUpdate
将要更新数据时触发的函数：componentWillUpdate
数据更新完成时触发的函数：componentDidUpdate
组件将要销毁时触发的函数：componentWillUnmount
父组件中改变了props传值时触发的函数：componentWillReceiveProps

一.挂载部分
根据官方生命周期图我们可以看到，一个组件的加载渲染，首先是defaultProps和propsTypes，（这两个是什么下一篇会单独说，这里也不是重点）
然后就是constructor及this.state里的初始数据，所以到这里是第一步。接着就是componentWillMount 组件将要开始挂载了，这是第二步。然后组件挂载，render解析渲染，所以第三步呼之欲出，就是render数据都渲染完成，最后componentDidMount
组件挂载完成。
子组件代码，父组件内引入渲染即可

import React, { Component } from 'react'

class Smzq extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: '我是一个msg数据'
        }
    }
    //组件将要挂载时候触发的生命周期函数
    componentWillMount() {
        console.log('02组件将要挂载')
    }
    //组件挂载完成时候触发的生命周期函数
    componentDidMount() {
        //Dom操作，请求数据放在这个里面
        console.log('04组件挂载完成')
    }
    //是否要更新数据，如果返回true才会更新数据
    shouldComponentUpdate(nextProps, nextState) {
        console.log('01是否要更新数据')
        console.log(nextProps)      //父组件传给子组件的值，这里没有会显示空
        console.log(nextState)      //数据更新后的值
        return true;                //返回true，确认更新
    }
    //将要更新数据的时候触发的
    componentWillUpdate() {
        console.log('02组件将要更新')
    }
    //更新数据时候触发的生命周期函数
    componentDidUpdate() {
        console.log('04组件更新完成')
    }
    //你在父组件里面改变props传值的时候触发的函数
    componentWillReceiveProps() {
        console.log('父子组件传值，父组件里面改变了props的值触发的方法')
    }
    setMsg() {
        this.setState({
            msg: '我是改变后的msg数据'
        })
    }
    //组件将要销毁的时候触发的生命周期函数，用在组件销毁的时候执行操作
    componentWillUnmount() {
        console.log('组件销毁了')
    }
    render() {
        console.log('03数据渲染render')
        return (
            <div>
                生命周期函数演示--{this.state.msg}--{this.props.title}
                <br />
                <hr />
                <button onClick={() => this.setMsg()}>更新msg的数据</button>
            </div>
        )
    }
}
export default Smzq
父组件代码：
import React, { Component } from 'react';
import Smzq from './data2/datachange'

class App extends Component {
    constructor(props){
        super(props)
        this.state={
            flag:true,
            title:"我是app组件的标题"
        }
    }
    //创建/销毁组件
    setFlag(){
        this.setState({
            flag:!this.state.flag
        })
    }
    //改变title
    setTitle(){
        this.setState({
            title:'我是app组件改变后的title'
        })
    }
    render() {
        return (
          <div className="App">
                {
                    this.state.flag?<Smzq title={this.state.title}/>:''
                }
                <button onClick={()=>this.setFlag()}>挂载/销毁生命周期函数组件</button>
                <button onClick={()=>this.setTitle()}>改变app组件的title</button>
          </div>
        );
    }
}
export default App;
 
文章摘自 https://blog.csdn.net/weixin_43851769/article/details/88188325