react中useEffect使用技巧

useEffect集合了组件中的 componentDidMount，componentDidUpdate以及componentWillUnmount到一个方法中，杜绝了频繁定义的繁琐。

使用事例

useEffect(()=>{},[depts])

1.如果传递一个空数组 [ ] ，告诉 useEffect 不依赖于 state、props中的任意值， useEffect 就 只会运行一次 ,相当于componentDidMount，vue中的mounted

2.如果数组中有值 ,这个值改变就会触发运行

3. 如果不给数组 ，useEffect(()=>{}),相当于componentDidUpdate，也就是vue中的beforeUpdate

4.方法里写return ...,相当于componentWillUnmount，也就是vue中的beforeDestroy\

useEffect写写异步的方式：

import React, { memo,useState ,useEffect,useCallback,useMemo} from 'react';
let c=0
function App(){
    let [count,setCount]=useState(0);
    c=count;
    useEffect(()=>{
        let timer=setInterval(()=>{
            setCount((v)=> v+1)
            console.log(c)
        },1000) 
        return ()=>{timer&&clearInterval(timer)}
    },[])
    return (
        <div>{count}</div>
    )
}
export default App