反应18中的useEffect清除

Question

我用的是next.js的机车卷轴，在反应v18之后我的清理台停止工作了.谁能解释一下原因吗？

useEffect(() => {
let scroll;
import("locomotive-scroll").then((locomotiveModule) => {
  scroll = new locomotiveModule.default({
    el: document.querySelector("[data-scroll-container]"),
    smooth: true,
  });
});

return () => {
  scroll.destroy();
}});

我有错误“未处理的运行时错误TypeError:无法读取未定义的属性(读取‘破坏’)”

*如果我向下安装，对17版本的反应都很好

Answer 1

React v18引入了关于useEffect幂等性的新的开发模式检查.您的效果将被调用一次，然后立即销毁和重新创建。

在您的情况下，问题是import需要一段时间(必须发出网络请求)，因此值被赋值给scroll变量，并有一些延迟。不幸的是，您的清理在此之前被调用，所以scroll是undefined。这是一种竞争条件，它也会发生在React v17中，但由于它依赖于几个特性(CPU功率、网络速度)，所以不太频繁。

有关详细信息，请参阅本文档：https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-strict-mode

Answer 2

据我所知，然后响应vs18 useEffect自动运行清理。你可以在React18找到它