gap 變數應該只給出一次差異，但它每秒給出一個差異。我什至沒有更新它的狀態。即使我仍然使用settime在useEffect后臺更改的其他變數仍然影響頁面并且正在更新。
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 (
<div className="App">
<div>{time}</div>
<div>{gap}</div>
</div>
)
uj5u.com熱心網友回復：
useEffect(() => {
setInterval(() => settime(dayjs().second()), 1000)
}, [])
settime每 1000 毫秒呼叫一次。這將更新狀態 ( time) 并觸發重新渲染。
const ftime = dayjs('Dec 31,2021').unix();
const dateVar = dayjs().unix();
const gap = ftime - dateVar;
由于這三個變數是在函式的頂層初始化的，因此每次重新渲染都會初始化它們。
如果您想防止這種情況發生，您可以將變數移到函陣列件之外。
uj5u.com熱心網友回復：
它每秒更新一次，因為您time每秒都在更改組件呈現的內容。
這種重新渲染也會導致常量ftime和dateVar每秒重新初始化。如果這不是故意的，您需要將它們放在函式之外或將它們包裝在一個鉤子中，例如useState或useMemo。
您可以通過將時間設定為 React 組件并將間隔效果放置在該組件中來解決重新渲染問題。孩子的重新渲染通常不會觸發父級的重新渲染。
uj5u.com熱心網友回復：
這是因為useEffect您每秒都在更新狀態。當 react 函陣列件中的狀態更新時，變數將被重新初始化并且 react 不會跟蹤變數的值。它只跟蹤狀態和道具。
在這里你可以使用useRef鉤子，因為它是可變的，并且 react 不會重新初始化它的值，這保證它的值在狀態更新期間是相同的
import { useState, useEffect, useRef } from "react";
import dayjs from "dayjs";
import ReactDOM from "react-dom";
function App() {
const gap = useRef(dayjs("Dec 31,2021").unix() - dayjs().unix());
const [time, settime] = useState(dayjs().format("DD/MM/YYYY"));
useEffect(() => {
setInterval(() => settime(dayjs().second()), 1000);
}, []);
return (
<div className="App">
<div> {time}</div>
**<div>{gap.current}</div>**
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/395648.html
標籤：javascript 反应 设置间隔 使用效果 天杰
上一篇：如何通過子節點或子節點獲取欄位