gpt4 book ai didi

javascript - 如何在 React 功能组件中正确设置 setInterval 计时器?

转载 作者:行者123 更新时间:2023-12-05 00:26:01 25 4
gpt4 key购买 nike

我刚刚开始学习 react ,我正在看一个处理状态和钩子(Hook)的教程。它只处理每 1000 毫秒更新一次的时间(或者我认为是这样)。

import React from "react";
let count = 0;

function App() {
const now = new Date().toLocaleTimeString();
let [time, setTime] = React.useState(now);


function updateTime(){
const newTime = new Date().toLocaleTimeString();
setTime(newTime);
count++;
console.log(count);
console.log(new Date().getMilliseconds());
}

setInterval(updateTime, 1000);


return (
<div className="container">
<h1>{time}</h1>
<button onClick = {updateTime}>time</button>
</div>
);
}

export default App;
本教程的目的只是一个关于如何更新时间的简单示例,但我注意到它每 1000 毫秒更新多次(突发)。我怀疑每次更改 Hook 时都会呈现新组件,但旧组件仍然在那里更新并产生更多组件,导致每 1000 毫秒调用似乎呈指数增长。
我很好奇这里发生了什么?我将如何去假设有一个每 1000 毫秒更新一次的简单计数器? setTime(count)显然不起作用

最佳答案

问题:在您当前的实现中,setInterval每次渲染组件时都会被调用(即,在时间状态设置后也会被调用)并且会 创建一个新区间 - 如您的控制台所示,这产生了这种“指数增长”。
如评论部分所述: useEffect 在 React 中处理功能组件时,这将是处理这种情况的最佳方式。看看我下面的例子。 useEffect这里只会在初始组件渲染后运行(当组件安装时)。

React.useEffect(() => {
console.log(`initializing interval`);
const interval = setInterval(() => {
updateTime();
}, 1000);

return () => {
console.log(`clearing interval`);
clearInterval(interval);
};
}, []); // has no dependency - this will be called on-component-mount

If you want to run an effect and clean it up only once (on mount andunmount), you can pass an empty array ([]) as a second argument. Thistells React that your effect doesn’t depend on any values from propsor state, so it never needs to re-run.


在您的场景中,这是“空数组作为第二个参数”的完美用法,因为您只需要在安装组件时设置间隔并在卸载时清除间隔。看看 useEffect 的功能也返回。这是我们的清理函数,将在组件卸载时运行。这将“清理”或者在这种情况下,清除组件不再使用的时间间隔。
我编写了一个小应用程序,演示了我在这个答案中涵盖的所有内容: https://codesandbox.io/s/so-react-useeffect-component-clean-up-rgxm0?file=/src/App.js
我已经合并了一个小型路由功能,以便可以观察到组件的“卸载”。

我的旧答案(不推荐):
每次重新渲染组件时都会创建一个新间隔,这就是您为时间设置新状态时发生的情况。我要做的是在设置新间隔之前清除上一个间隔( clearInterval )
try {
clearInterval(window.interval)
} catch (e) {
console.log(`interval not initialized yet`);
}

window.interval = setInterval(updateTime, 1000);
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

关于javascript - 如何在 React 功能组件中正确设置 setInterval 计时器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63333897/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com