为什么我在“时间”上使用 useEffect() 时所有其他值都会更新？答案

【问题标题】：why does all other values update while i used useEffect() on just 'time'?为什么我在“时间”上使用 useEffect() 时所有其他值都会更新？
【发布时间】：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 (
  <div className="App">
    <div>{time}</div>
    <div>{gap}</div>
  </div>
)

【问题讨论】：

标签： javascript reactjs setinterval use-effect dayjs

【解决方案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;

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

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

【讨论】：

【解决方案2】：

它每秒都在更新，因为您每秒都会更改 time，组件会呈现它。

这种重新渲染还会导致常量ftime 和dateVar 每秒重新初始化。如果这不是故意的，则需要将它们放在函数外部或将它们包装在挂钩中，例如useState 或useMemo。

您可以通过将时间作为 React 组件并将间隔效果放置在该组件中来解决重新渲染问题。子级的重新渲染通常不会触发父级的重新渲染。

【讨论】：

【解决方案3】：

这是因为在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>
  );
}

【讨论】：