useEffect的依赖项是Object时，即使依赖项的值没发生变化，仍然触发了useEffect

关于useEffect首先需要知道以下三种情况

useEffect(()=>{
console.log('没有第二个参数，每次渲染都会触发')
})

useEffect(()=>{
console.log('第二个参数是个【】，初次挂载时会触发')
},[])

const [age,setAge] = useState(0);
const [name, setName] = useState('Tom');
useEffect(()=>{
console.log('当依赖项发生改变时(这里是当age或name发生改变时)，会触发')
},[age,name])

那么问题来了，当依赖项是引用类型的时候，会发生什么呢？看以下代码

import React, {useState, useEffect} from 'react';

const EffectDemo = () => {
    const [user, setUser] = useState({name:'tom',age:10})

    useEffect(()=>{
        //这里会发现，即使user没有变化，但是仍然触发了
        console.log(user,'effect runs')
    },[user])

    const handleChange = () => {
        //user的值仍然设置成{name:'tom',age:10}，注意useEffect触发了没有
        setUser({name:'tom',age:10})
    }
    
    return (
        <div>
            <button onClick={handleChange}>点击修改</button>
        </div>
    )
}
export default EffectDemo;

产生上述情况的原因是，useEffect的Object.is方法是通过“===”进行比较的，基础数据类型比较的是值，而引用类型比较的是内存中的引用地址，所以看似值没有变化，但是引用地址变了，就也会触发useEffect

如何解决这个问题呢？如下：

useEffect(()=>{
   console.log(user,'effect runs')
   //分别监听user的值
},[user.name,user.age])