Set 添加两次 useCallback 回调

Question

从另一个文件设置添加来自

useCallback

的回调两次：

测试.ts：

export const testSet = new Set();

App.tsx

import { useCallback, useState } from "react";
import { testSet } from "./test.ts";

export default function App() {
  const callback = useCallback(() => {}, []);

  const [state, setState] = useState(0);

  testSet.add(callback);

  console.log(testSet);
  return (
    <div className="App">
      {state}
      <button
        onClick={() => {
          setState((prev) => prev + 1);
        }}
      >
        Update state
      </button>
    </div>
  );
}

沙盒链接：沙盒

Set 添加了两次 useCallback 的回调，因此

testSet

有两个功能。另外，如果我更新 App 组件的状态，

testSet

仅保留 2 个功能。

为什么要第二次添加函数，如果useCallback记忆回调，那么

testSet

不应该第二次添加函数，因为它是同一个函数？

如果我禁用

StrictMode

，它会按应有的方式工作（不会第二次添加功能）。

为什么会这样以及如何解决？

Answer 1

一些注意事项：

在

StrictMode

中，react 调用组件两次。也可能是第一次渲染的

useCallback

结果被丢弃，这就是为什么你看到它被添加了两次。但即使情况并非如此，您也不应该像这样依赖

useCallback

，因为有时它可能会丢弃缓存：

您应该只依赖 useCallback 作为性能优化。如果 如果没有它，你的代码就无法工作，找到根本问题并修复 首先。然后你可以添加useCallback回来。

因此，如果此

useCallback

功能有问题，请考虑

useRef

是否适合您的情况。

最后，您不应该在渲染期间执行副作用，这就是您在这里所做的。将该代码移至

useEffect

。