經常使用的生命週期函數

 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

    })

   } 

 }