为什么 useIsMounted return 是回调而不是值本身？

Question

我指的是 usehooks-ts 中的 useIsMounted。我试图理解为什么函数返回 useCallback(() => isMounted.current, []) 而不是 isMounted.current.

我已经在仅使用 setTimeout 模拟异步工作的 CodeSandbox 中测试了这两个想法，并且我没有发现返回值而不是回调的任何问题。我错过了什么？

Answer 1

出于某种原因，这个 useIsMounted 钩子的作者决定 return 一个函数而不是 isMounted 布尔值。 returned 函数已记忆，因此它可以作为回调安全地传递给子组件。

虽然返回 isMounted.current 不起作用，但是 return 整个 isMounted 参考有效。

示例：

const useIsMounted = () => {
  const isMounted = useRef(false);

  useEffect(() => {
    isMounted.current = true;

    return () => {
      isMounted.current = false;
    };
  }, []);

  return isMounted;
}

这要求消费者知道它是一个 React ref，并且他们需要解压当前的 ref 值。

function Child() {
  const [data, setData] = useState("loading");
  const isMounted = useIsMounted();

  // simulate an api call and update state
  useEffect(() => {
    void delay(3000).then(() => {
      if (isMounted.current) setData("OK"); // <-- access ref value
    });
  }, [isMounted]);

  return <p>{data}</p>;
}

似乎 return 记忆函数只是一个设计决定。

为什么 useIsMounted return 是回调而不是值本身？

Why does useIsMounted return a callback instead of the value itself?

reactjs

asynchronous

react-hooks

usecallback