React

 

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

React

原文地址:https://www.cnblogs.com/www123456/p/14927280.html