为什么我在“时间”上使用 useEffect

分享于2022年07月17日 dayjs javascript reactjs setinterval use-effect 问答
【问题标题】:为什么我在“时间”上使用 useEffect() 时所有其他值都会更新?(why does all other values update while i used useEffect() on just 'time'?)
【发布时间】:2022-01-26 22:14:37
【问题描述】:

gap 变量应该只给出一次差异,但它每秒都会给出一个差异。我什至没有更新它的状态。即使我在 useEffect 中使用 settime ,仍然在后台更改的其他变量仍在影响页面并正在更新。

const ftime = dayjs('Dec 31,2021').unix();
const dateVar = dayjs().unix();
const gap = ftime - dateVar;

const [time, settime] = useState(dayjs().format('DD/MM/YYYY'));

useEffect(() => {
  setInterval(() => settime(dayjs().second()), 1000);
}, []);

return (
  
{time}
{gap}
)


【解决方案1】:
useEffect(() => {
 setInterval(() => settime(dayjs().second()), 1000)
}, [])

settime 每 1000 毫秒调用一次。这将更新状态 ( time ) 并触发重新渲染。

 const ftime = dayjs('Dec 31,2021').unix();
 const dateVar = dayjs().unix();
 const gap = ftime - dateVar;

由于这三个变量是在函数的顶层初始化的,所以每次重新渲染都会初始化它们。

如果你想防止这种情况,你可以将变量移到函数组件之外。