为什么使用 use-callback-ref 中的 useCallbackRef 时调用两次 useEffect答案

【问题标题】：why useEffect is called twice when using useCallbackRef from use-callback-ref为什么使用 use-callback-ref 中的 useCallbackRef 时调用两次 useEffect
【发布时间】：2021-09-04 20:37:34
【问题描述】：

useCallbackRef是use-callback-ref包提供的钩子

当依赖数组中有useCallbackRef结果的.current时，为什么useEffect会触发两次？

import { useCallback, useEffect, useRef, useState } from "react";
import { useCallbackRef } from "use-callback-ref";

function App() {
  const [useCbRefCounter, setUseCbRefCounter] = useState(0);
  const [useCbRefEffectCounter, setUseCbRefEffectCounter] = useState(0);


  const divCbRef = useCallbackRef(null, () =>
    // This is called once
    setUseCbRefCounter((counter) => counter + 1)
  );

  useEffect(() => {
    if(!divCbRef.current) {
      return;
    }

    // This is called twice
    setUseCbRefEffectCounter((counter) => counter + 1);
  }, [divCbRef.current]);
  
  // ...
}

（useEffect 不会像人们想象的那样被 null 触发）

Sandbox Demo与ref变化时的调用次数比较

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

这很可能是由于 useCallbackRef 的实现。
divCbRef.current 是一个可变对象，因此在 useEffect 内部，这两个调用是相同的。

但是对useEffect 的调用发生了两次，因为第一次divCbRef.current 是null，第二次是HTMLDivElement。

如果你稍微改变useEffect的代码，那么你就会明白为什么调用效果了：

  const currentREF = divCbRef.current;
  useEffect(() => {
    if (!divCbRef.current) {
      return;
    }

    console.log(currentREF);

    // This is called twice
    setUseCbRefEffectCounter((counter) => counter + 1);
  }, [currentREF]);

控制台输出将是

null
<div> </div>

【讨论】：