其他分享
首页 > 其他分享> > 常用的生命周期函数

常用的生命周期函数

作者:互联网

 import React, { Component } from 'react'    class Cpn extends Component{    render(){       return (         <div>我是Cpn组件</div>       )    }
   componentWillUnmount(){      console.log('调用了cpn的componentWillUnmount方法')    }  }
 export default class App extends Component {
    constructor(){       super();       this.state = {         counter:0,         isShow:true       }
      console.log('执行了constructor方法');     }       componentDidMount(){       console.log('执行了组件componentDidMount方法');     }
    componentDidUpdate(){       console.log('执行了组件componentDidUpdate方法');     }
   render() {     console.log('执行了组件render方法');      return (        <div>           <h2>App组件</h2>            <h2>当前计数:{this.state.counter}</h2>            <button onClick={e => this.increment()}>+1</button>           <hr />           <button onClick={e => this.changeCpnShow()}>切换</button>            {this.state.isShow &&  <Cpn/> }
       </div>      )    }
   increment(){      this.setState({        counter:this.state.counter + 1      })    }
   changeCpnShow(){     this.setState({       isShow:!this.state.isShow     })    } 
 }  

标签:常用,console,log,counter,周期函数,生命,isShow,state,组件
来源: https://www.cnblogs.com/eric-share/p/15125172.html