先聊聊 useEffect，众所周知，该 hook 的第二个参数将决定执行规则：
- 空数组：只在组件加载时进行执行，类似 onMounted
- 数组中有变量时：当变量变化时执行，类似 watch
若在 useEffect 的函数中，可以 return 回一个函数，该函数将会在组件卸载时执行，类似 onUnmounted
useEffect(() => {
// 副作用逻辑
return () => {
// 清理逻辑
};
}, [依赖项]);
这里需要注意，刚才提到了变量变化时进行执行。
数组中的变量变化，采用的是浅比较，也就是 Object.is。Object.is 基本等同于 ===，所以如果是对象中的属性发生变化时，是不会引起函数的重新执行的。
- 基本类型（number、string、boolean）：值变化触发执行。
- 引用类型（object、array、function）：只有引用地址变化才会触发。
const [obj, setObj] = useState({ name: 'zhangsan', age: 18 })
不能 obj.name = 'lisi'，这样修改是无效的
必须 setObj({ ...obj, name: 'lisi' })，也就是传入了一个新对象
所以我们平时往 useEffect 中的依赖项中写对象时，可以正常进行监听，因为每次 object 类型的 state 更改时，对象都整个换了新的，也就是引用地址更新了，所以 useEffect 的函数正常执行，也就符合预期。
但如果往 useEffect 的依赖项里写入了一个 useRef，也就是
const num = useRef(1);
useEffect(() => {
console.log(name.current);
}, [num]);
return <div onClick="num.current += 1">现在是 { num.current }，点击加一</div>
此时是完全没有效果的，因为 useRef 里是个对象，而且是保持引用地址的对象，所以相当于完全没有变化。 不过在此例子中，即使将依赖项的 num 改为 num.current，也就是
const num = useRef(1);
useEffect(() => {
console.log(name.current);
}, [num.current]);
return <div onClick="num.current += 1">现在是 { num.current }，点击加一</div>
点击后，也是无效的。不过根本原因却是组件不会发生重新渲染，useEffect 自然不会执行，我们再来复习能引起重新渲染的几个情况：
- useState 中的 state 发生了更新
- 父组件发生了更新
- props 发生了更新
- 订阅了 useContext，并且 context 的数据发生了更新
可以看到，只有 useState 的 state 发生更新，才会引起重新渲染，重新渲染才会引起 useEffect 的判断是否更新，之后才执行对应函数。
所以尽管 Object.is 能检测到变更，但组件没有重新渲染，也就执行不了对应的函数。
