react——生命周期函数

import React from 'react'
class LifeCycle extends React.Component{
    constructor(props) {
        console.log('我是constructor')
        super(props)
        this.state = {
            value: '生命周期组件'
        }
    }
    componentWillMount() { // 将要挂载
        console.log('我是componentWillMount')
    }
    componentDidMount() { // 已经挂载
        console.log('我是componentDidMount')
    }
    componentWillUpdate(nextProps, nextState, nextContext) { // 数据将要更新前
        console.log('我是componentWillUpdate')
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) { // 是否支持本身的state和父组件传递的props数据更新，return true则为可以,false则不可以  return 必填
        console.log(nextProps)
        console.log(nextState)
        console.log('我是shouldComponentUpdate')
        return true
    }
    componentDidUpdate(prevProps, prevState, snapshot) { // 数据已经更新
        console.log('我是componentDidUpdate')
    }
    componentWillReceiveProps(nextProps, nextContext) { // 父组件的props数据更改
        console.log('我是componentWillReceiveProps')
    }
    componentDidCatch(error, errorInfo) { //  render()函数抛出错误，则会触发该函数
        console.log('我是componentDidCatch')
    }
    componentWillUnmount() { // 组件销毁前
    }
    changeMsg= ()=>{
        this.setState({
            value: 'aaaa'
        })
    }
    render() {
        console.log('我是render')
        return(
            <div>
                <h3>{this.state.value}</h3>
                <button onClick={this.changeMsg}>改变state中的值</button>
            </div>
        )
    }
}
export default LifeCycle