useEffect使用场景

1.不传递第二个参数。

每次渲染都会运行

useEffect(()=>{
   console.log('所有更新都执行');
}) 

2.第二个参数传[]

仅在挂载和卸载的时候执行

useEffect(()=>{
   console.log('仅在挂载和卸载的时候执行')
},[]) 

3.第二个参数传递一个值

只有该值更新时才执行

useEffect(()=>{
    console.log('number更新时执行')
},[number]) 

4.第二个参数传递多个值

只运行一次

const Asynchronous : React.FC=({number})=>{
    const [newNum,setNewNum] = useState(number);
    useEffect(()=>{
         console.log(number)
         setNewNum(number)
     },[number,setNewNum]) //监听props对象number的更改
   //setNewNum是useState返回的setter，所以不会在每次渲染时重新创建它，因此effect只会运行一次
}

5.return 方法

在组件销毁的时候会被调用

const timer = setInterval(() => {
     console.log('time')
}, 1000)

useEffect(() => {
    return () => {
       clearInterval(timer)
   }
}, [])