import React from ‘react‘

  //生命周期第一步：挂载一个组件首先，执行constructor来创建组件。调用render函数 获取Dom结构，渲染dom,当组件挂载成功（DOM渲染完成），会执行componentDidMount生命周期函数

  //生命周期第二步 修改 props或者调用this.setState方法修改状态就会进行更新操作，或者直接调用forceUpdate时会重新调用render函数，进行更新操作； 会执行componetDidUpdata函数

  //生命周期第三步 ：当我们的组件不再使用，会被从DOM中移除掉（卸载）；这个时候会回调componentWillUnmount生命周期函数；

  

  //几个不常用的钩子函数

//   getDerivedStateFromProps：state 的值在任何时候都依赖于 props时使用；该方法返回一个对象来更新state；

//   getSnapshotBeforeUpdate：在React更新DOM之前回调的一个函数，可以获取DOM更新前的一些信息（比如说滚动位置）；

//   shouldComponentUpdate：该生命周期函数很常用，但是我们等待讲性能优化时再来详细讲解；

 class Componens extends React.Component{

   

        // constructor(props){

        //    super()

        //    this.state={

        //         a:1

        //    }

        //    console.log("调用constructor方法");

        //    console.log(props);

        // }

   componentDidMount(){

       console.log("组件挂载完毕");

   }

   edit(){

       console.log("111");

       this.setState({

           a:2

       })

   }

   componentDidUpdata(){

       console.log("状态更新了");

   }

  render(){

      console.log(this);

      console.log(this.props);

      console.log("调用render方法");

       return(

           <>

           <p onClick={this.props.btn}>子传父级 {this.props.operator}</p>

           <h1 onClick={()=>{this.edit()}}>生命周期</h1>

           </>

       )

     

  }

 } 

 export default Componens