函数中意外的记忆

Question

我的案例非常简单 - 每个人都有这种钩子。

它包含状态并返回一些操作该状态的方法。

我的问题是为什么我有时会在函数（updateAndGetPolygon）内记忆状态变量（loadedPolys）并让这两个控制台日志显示不同的值？

它不受使用 useCallback 包装 updateAndGetPolygon 的影响。仅开始解决 useState 问题。

谢谢！

export function useLoadedViewports() {
  const [loadedPolys, setLoadedPolys] = useState([]);
  console.log('loadedPolys outside:', loadedPolys);

  const updateAndGetPolygon = (poly) => {
    console.log('loadedPolys inside:', loadedPolys);

    // Some logic setting updated state
    const differenceResult = difference(poly, loadedPolys);
    const unionResult = union(poly, loadedPolys);
    setLoadedPolys(unionResult);
    return differenceResult;
  };

  return {
    updateAndGetPolygon,
  };
}

Answer 1

所以，我自己找到了答案。 这是由于在使用 useCallback 记忆的函数内使用此“updateAndGetPolygon”函数引起的。 我有一个非常复杂的组件，具有以下调用堆栈：

useCallback(functionA)

=calls=>

someOtherFunction

=calls=>

updateAndGetPolygon

函数，我有意想不到的记忆。

因此，如果您在 useCallback 中使用嵌套函数，则所有这些函数中使用的与 states 相关的所有内容似乎都会在其中中记住。

顺便说一句，如果有人有任何关于如何在 React 中完成此操作的文章链接，请分享。