react.useEffect的具体使用

react.useEffect的具体使用"/>

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')//componentreturn ()=>{//返回的这个函数对应componentWillUnMount,组件将会被卸载console.log('这是卸载的hooks')}},[])useEffect(()=>{//没有第二个参数，说明对应componentDidUpdateconsole.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>)
}