React 使用useEffect

React 使用useEffect

基本使用

useEffect(()=>{},)
//第一个参数是一个回调函数
//重点在第二个参数，
1. 如果不写第二个参数，那么就会一直执行第一个参数的回调，无限循环
2. 一般我们会写一个空数组[],表示第一个参数的回调只执行一次，也就是挂载时执行一次
3. 我们也可以在数组里面写依赖性，如[a]，则表示每当a的值改变，就会去执行一次回调，也就是组件挂载时执行一次和a变量在栈中的值发生改变时执行一次
注：如果第二参数的值在回调中被再次改变也会陷入无限循环

一个坑：第二个参数为非空数组时，若该变量存在栈中发生改变，则useEffect能监听到变化，但是若是引用类型，如对象，对象真正的数据是存在堆中，而useEffect检测不到堆中数据的变化

const [obj,setObj] = useState({
    a:'18'
})
useEffect(()=>{
    setObj((old)=>{
        old.a = '20'
        return old
    })
},[])
useEffect(()=>{
    console.log(obj)
},[obj])
//结果是并没有打印obj，因为obj并没有发生变化，也是obj内部的改变并没有被useEffect检测出来

如何解决：

const [obj,setObj] = useState({
    a:'18'
})
useEffect(()=>{
    setObj((old)=>{
        const new = {...old} //拷贝一份
        new.a = '20'
        return new
    })
},[])
useEffect(()=>{
    console.log(obj)
},[obj])