为依赖数组值 useEffect 设置计时器

Question

在我的 React Native 应用程序中，我在我的 useEffect 中使用了一个依赖数组，并希望在值更改时重新呈现。 但我希望重新渲染在 2 或 3 秒后发生。 目前它会立即重新渲染，这在我的应用程序中添加了一些闪烁的问题。 现在，这是我目前的 useEffect：

 useEffect(() => { fetchClimate(); setCount(count + 1); if (rooms.length >= 1 && count < 2 && displayRoomList) { setActive(rooms[0].id); } const interval = setInterval(() => { fetchClimate(); }, 10000); return () => clearInterval(interval); }, [rooms]);

每当按下按钮后房间的值发生变化时，都会立即调用 useEffect 。 我希望在房间数据更改 2 或 3 秒后调用它。 我怎样才能做到这一点？

Answer 1

故意等待几秒钟很可能是错误的解决方案，因为您可能正在创建新的竞争条件。 如果你真的想这样做，你需要在 setTimeout 中运行产生 UI 变化的代码 3000 毫秒。

https://developer.mozilla.org/en-US/docs/Web/API/setTimeout

setTimeout(() => {console.log("Code here runs after 3 seconds")}, 3000);

但是，真正的答案是您需要解决为什么瞬时重新加载看起来很糟糕。 强制您的代码等待可能会引入竞争条件（导致更难以解决错误）并造成糟糕的用户体验。 这次你也许可以侥幸逃脱，但一旦你遇到另一个类似的问题，这个解决方案就变得站不住脚了。 其他可能的解决方案：

如果您的代码正在等待另一个异步更改，您可以将其作为依赖项添加到 useEffect 并将 UI 更改代码放在 if 语句中。

如果布局更新本身看起来不协调，请尝试使用 React Native 的 LayoutAnimation。 这会自动动画布局更改，但可能有点命中或错过。 https://reactnative.dev/docs/layoutanimation

if (
  Platform.OS === "android" &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

useEffect(() => {
  LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
  
  //Run UI changing code

}, [rooms])

最后，如果您的代码在其他布局更改完成之前运行时遇到问题，您可以尝试将 useEffect 更改为 useLayoutEffect https://reactjs.org/docs/hooks-reference.html#uselayouteffect

最终，几乎总有比使用 setTimeout 更好的解决方案