react hook useEffect 依赖传入后如何执行？

先来了解下react hooks 闭包陷阱：

原因：

闭包陷阱产生的原因就是 useEffect 等 hook 里用到了某个 state，但是没有加到 deps 数组里，这样导致 state 变了却没有执行新传入的函数，依然引用的之前的 state。

解决方式一：

把 state 设置到 deps依赖项 里，并添加清理函数；闭包陷阱的解决也很简单，正确设置 deps 数组就可以了，这样每次用到的 state 变了就会执行新函数，引用新的 state。不过还要注意要清理下上次的定时器、事件监听器等。

解决方式二：

useRef：闭包陷阱产生的原因就是 useEffect 的函数里引用了某个 state，形成了闭包，那不直接引用不就行了？useRef 是在 memorizedState 链表中放一个对象，current 保存某个值。通过 useRef 保存回调函数，然后在 useEffect 里从 ref.current 来取函数再调用，避免了直接调用，也就没有闭包陷阱的问题了。

hooks 的原理：hooks 就是在 fiber 节点上存放了 memorizedState 链表，每个 hook 都从对应的链表元素上存取自己的值。

react hook useEffect 依赖传入后如何执行？

• 如果 useEffect 第二个参数传入 undefined 或者 null，那每次都会执行。
• 如果传入了一个空数组，只会执行一次。
• 否则会对比数组中的每个元素有没有改变，来决定是否执行。
• 同样，useMemo、useCallback 等也是同样的 deps 处理

参考文章：https://cloud.tencent.com/developer/article/2016207

https://blog.csdn.net/ttyt1217/article/details/126112536