为什么usecallback被触发但依赖没有更新？

Question

我有一个依赖项 windowSize。我还有一个搜索输入字段，可以在其中更新搜索状态。如果我在搜索状态中提示某些内容，我的网站当然会重新呈现，因为我更新了状态。但我有一个包含在 useCallback 中的函数，但问题是，它被触发了。那么为什么它会被触发呢？它应该仅在依赖/状态 windowSize 更改时触发。

  const [searchValue, setSearchValue] = useState<string>('');

  useEffect(() => {
    gridRef.current?.recomputeGridSize();
    console.log('TRIGGER WINDOW SIZE')
  }, [windowSize]);

  const calculateColumnCount = useCallback((width: number) => {
    console.log('CALLBACK FUNC')
    return Math.floor(width / itemMinWidth);
  }, [windowSize])

  const columnCount = numColumns ?? calculateColumnCount(containerWidth);

我只把重要的事情放在片段中。如果您愿意，我可以分享完整的代码。

我做错了什么？

Answer 1

这是一个有趣的问题，我明白为什么它令人困惑。由于您的 useCallback 取决于 windowSize，因此它应该仅在 windowSize 更改时触发。但根据您的描述，听起来可能是其他原因导致回调运行。

需要注意的一件事是，每当您更新 searchValue 时，父组件是否会重新渲染。即使 searchValue 不是 useCallback 依赖项数组的一部分，父级别的重新渲染也可能导致函数被重新调用。

记录 windowSize 和 searchValue 可能有助于找出实际触发回调的内容。另外，请仔细检查 windowSize 是如何更新的——那里可能发生了一些微妙的事情。

请告诉我这是否有帮助或者您是否想分享更多代码。很高兴能帮助深入研究！