useUpdateEffect不在React18中工作

Question

每当在组件中更改特定状态时，我都需要调用效果回调，但是在安装阶段不应该调用回调。我创建了一个自定义钩子(请参阅)。

​

function useUpdateOnlyEffect(callback){

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

}

​

我在codesandbox中创建了一个示例，代码在反应17中工作得很好，但是它在反应18中不起作用，也就是说，在安装过程中也会调用回调效果。我已经检查了反应18的变化，但没有找到解决办法。这种情况是由于React 18中引入的自动配料造成的吗？

编辑：

此代码在生产模式或移除严格模式时运行良好。原因是React计划在将来卸载之前删除/添加UI的部分，同时保持组件的状态。

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

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

要了解更多信息，请参考可重用状态并遵循github讨论这里。

无论如何，如果添加额外的效果(不确定是否推荐)来重置标志(Ref)值，那么钩子在dev build中也会很好地工作。

​

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

​

Answer 1

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

为了帮助解决这些问题，Reactive18引入了一个新的开发-只检查严格模式。每当组件第一次挂载时，这个新的检查将自动卸载和重新装入每个组件，在第二次挂载时恢复以前的状态。

因此，您的组件在dev模式下挂载两次，在第二次加载时，您的标志为false。

Answer 2

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

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