React 学习——Class类组件生命周期函数

componentDidMount：组件渲染完执行一次，发送网络请求 

componentWillUnmount：组件卸载的时候执行，副作用（清理的工作 清除定时器 事件绑定）

import {  Component,useState } from 'react';
class Counter extends Component{
  // 组件渲染完执行一次
  componentDidMount(){
    console.log('组件渲染完执行一次，发送网络请求');
    this.timer = setInterval(()=>{
      console.log('定时器执行');
    },1000)
  }
  // 组件卸载的时候自动执行，副作用清理的工作 清除定时器 事件绑定
  componentWillUnmount(){
    console.log('组件销毁之前执行一次');
    clearInterval(this.timer);
  }
  render(){
    return <div>counter组件</div>
  }
}

const App = () => {
  const [show, setShow] = useState(true)
  return (
    <div className="home">
     {show && <Counter />}
     <button onClick={()=>setShow(!show)}>{show ? '隐藏' : '显示'}</button>
    </div>
  )
}
export default App