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

【问题标题】：Set timer for dependency array value useEffect为依赖数组值 useEffect 设置计时器
【发布时间】：2022-01-13 13:57:54
【问题描述】：

在我的 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 秒后调用它。我该怎么做？

【问题讨论】：

标签： javascript reactjs react-native

【解决方案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 更好的解决方案

【讨论】：