class模式

class Clock extends React.Component{
  constructor(props){
    super(props)
    this.state={date:new Date()}

    this.handleClick=this.handleClick.bind(this)
  }
  componentDidMount(){
    this.timerID=setInterval(()=>{
      this.tick()
    },1000)
  }
  componentWillUnmount(){
     clearInterval(this.timerID)
  }
  render(){
    return (
      <div>
        <h1 onClick={this.handleClick.bind("libateer",this)}>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }

  tick(){
    this.setState({
      date:new Date()
    })
  }
  handleClick(name,e){
    clearInterval(this.timerID)
  }
}

hook模式

import React ,{useState , useEffect} from "react"
import axios from 'axios'

function Example(props){

    const [name,setName]=useState(props.name)
    const [time,setTime]=useState(new Date().toLocaleString())
    // 当你需要在组件里面添加state，就可以使用hook了
    // 1. 这里只是执行了初始化的state,如果props发生变化怎么操作。。
    
    // effect:里面的函数一定会在dom渲染之后才执行

   
    // 类似生命周期的函数
    useEffect(() => {
        console.log(name)
        // 在这个里面执行副作用操作
        // 数据获取，设置订阅，手动修改react组件的dom
    }, [name]);

    // 需要清除的
    useEffect(() => {
        let timer=setInterval(()=>{
            setTime(new Date().toLocaleString())
        })
        return () => {
            clearInterval(timer)
        };
    });


    // 不需要清除的，执行完毕之后就不需要在去管他了
    // 我们想要在更新dom之后做一些额外的操作。发送一个网络请求.
    useEffect(() => {
        axios.get('http://127.0.0.1:5000/test').then((e)=>{
            console.log(e)
            setName(e.data)
        })
    });
    return (
        <>
            <button onClick={()=>setName("nb")}>
                click me{name}-{props.name}
            </button>
    <span>{time}</span>

        </>
    )
}
export default Example