如何在 React 中每 30 秒运行一次函数而不让 DOM 重新渲染将倒计时重置为 0答案

【问题标题】：How to run a function every 30 seconds in React without having the DOM re-renders reset the countdown to 0如何在 React 中每 30 秒运行一次函数而不让 DOM 重新渲染将倒计时重置为 0
【发布时间】：2021-11-13 13:19:07
【问题描述】：

我需要让 React 每隔几秒运行一个函数，但不应该在重新渲染 DOM 时重新开始倒计时。所以基本上我想在应用程序启动时运行这个函数，并且每 30 秒重新运行一次相同的函数，但是如果当 DOM 重新渲染时我不想让倒计时到 30 秒从 0 重新开始。我正在检查这个答案How to call a function every minute in a React component?，但每次 DOM 呈现倒计时都会重置为 0。有没有办法只使用 React 来实现这一点？

【问题讨论】：

你想每 30 秒运行一次函数，为什么不使用setInterval，DOM 或 React 与此有何关系？请添加更多上下文以及您实际尝试过的内容。
如果你有函数组件，你可以使用 useEffect 之类的钩子
@DennisVash 问题是当我启动应用程序时 setInterval 开始计数为 30 但如果我刷新页面然后 setInterval 将重新启动 30 秒倒计时而不运行该功能
保留页面刷新之间的间隔与保留 React 渲染之间的间隔非常不同。您应该创建一个最小的代码示例，展示您尝试创建的特定行为以及它是如何失败的。

标签： javascript reactjs

【解决方案1】：

丹尼斯。如果我们能看到您的代码，为您提供某种答案会更容易。但是，就我所得到的，我想我可以在某种程度上帮助你。你看，如果你想要一个函数每 30 秒运行一次，你可以使用setInterval 函数。您可以将当前计时器存储在组件的状态中。通过这样做，您的 setInterval 函数将每 1 秒更新一次组件的状态，重新渲染组件但不重置计时器，因为计时器会直接从状态中检索其信息。

话虽如此，如果我们能看到您正在尝试做的事情的代码，那就太棒了。通过代码，我们可以了解您是在使用 state、Redux、hook 还是其他任何东西。

希望我能帮你解决一些问题！

【讨论】：