useUpdateEffect 在 React 18 中不起作用[重复]

Question

每当组件内的特定状态发生更改时，我都需要调用效果回调，但不应在安装阶段调用回调。我创建了一个自定义挂钩（参考）。

function useUpdateOnlyEffect(callback) {
  const componentJustMounted = useRef(true);

  useEffect(() => {
    if (!componentJustMounted.current) {
      callback();
    }
    componentJustMounted.current = false;
  }, [callback]);
}

我在codesandbox中创建了一个示例，代码在React 17中工作正常，但在React 18中不起作用，即在安装期间也会调用效果回调。 我检查了react 18的changel og，但找不到解决方案。发生这种情况是因为 React 18 中引入了自动批处理吗？

此代码在生产模式或删除严格模式下可以正常工作。原因是 React 团队计划删除/添加 UI 部分，同时在将来卸载之前保留组件的状态。

从 React 18 开始使用严格模式，每当组件安装在 开发时，React会模拟立即卸载和重新安装 组件：

这只是为了确保我们的组件在未来具有可重用性。

要了解更多信息，请参阅可重用状态并关注 github 讨论此处。

无论如何，如果您添加额外的效果（不确定是否推荐）来重置标志（ref）值，则钩子在开发版本中也将完美工作。

useEffect(() => {
  return () => {
    componentJustMounted.current = true;
  };
}, []);

Answer 1

我认为这与严格模式有关。请参阅此处的更新：https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors

为了帮助解决这些问题，React 18 引入了针对严格模式的新的仅开发检查。每当第一次安装组件时，这项新检查将自动卸载并重新安装每个组件，并在第二次安装时恢复之前的状态。

因此您的组件在开发模式下安装了两次，在第二次加载时，您的标志为 false。

Answer 2

您的实现是否使用 rooks，以及什么版本。 useUpdateEffect 在 rooks v7 中已被弃用，已被删除。

https://react-hooks.org/docs/useUpdateEffect