React的State和生命周期

一、生命周期钩子简单描述

React 生命周期

//挂载部分

1.constructor添加状态 以及 事件处理函数绑定this

2.render   返回组件模板

3.conponentDidMount()是在组件已经被渲染到 DOM 中后运行，在这里挂定时器

//更新部分

4.shouldComponentUpdate()性能优化

5.render

6.getSnapshotBeforeUpdate()

7.componentDidUpdate组件更新后执行

8.卸载 componentWillUnmount() 组件卸载前执行 清理垃圾

二、生命周期钩子的简单使用

class LifeCircle extends Component
{
    constructor(props){
   super(props);

    }
    render(){
        return <div>
        hello world
        </div>
    }
    conponentDidMount(){
        console.log('vconponentDidMount');
    }

}

class LifeCircle extends Component
{
    constructor(props){
   super(props);

    }
    render(){
        return <div>
        hello world
        </div>
    }


    componentWillUnmount(){
        console.log('componentWillUnmount');
    }
}

class LifeCircle extends Component
{
    constructor(props){
   super(props);

    }
    render(){
        return <div>
        hello world
        </div>
    }
    componentWillUnmount(){
        console.log('componentWillUnmount');
    }
}

三、注意有返回值的钩子