react.useEffect的具体使用

一、前言
react.useEffect的可以作为生命周期钩子使用，也可以作为类似于vue中watch使用。
二、用作生命周期钩子

import React,{ useEffect,useState } from 'react'
export default function watch {
      const [num,setNum] = useState(0)
      useEffect(()=>{
            console.log('这是初始化的hooks')//component
            return ()=>{//返回的这个函数对应componentWillUnMount,组件将会被卸载
                  console.log('这是卸载的hooks')
            }
      },[])

      useEffect(()=>{//没有第二个参数，说明对应componentDidUpdate
            console.log('这是更新的hooks')
      })
      return (
            <div>
                  <p>{`当前数量是${num}`}</p>
                  <button onClick={()=>{setNum(num+1)}}>增加数量</button>
            </div>
      )

}

三、用作watch,某个值变化时执行事件

export default function watch(){
      const [num,setNum] = useState(0)
      useEffect(()=>{
            console.log('改变后的num',num)
      },[num])
      return (
            <div>
                  <button onClick={()=>{setNum(num+1)}}></button>
            </div>
      )
}