使用firstUpdate.current但不明白它如何更新反应组件

Question

我正在开发一个计时器，但我想确保如果您在页面上进行硬刷新，计时器会立即显示。我尝试进行实验并最终将它们放入我的代码中。问题是，它有效，但我不知道为什么。有人可以解释一下该组件是如何更新的吗？

const date = new Date();
const [time, setTime] = useState("");
const firstUpdate = useRef(true);

useLayoutEffect(() => {
    const tmpTime = setInterval(() => {
      setTime(date.toLocaleTimeString());
      // setMinutes(minutes + 1);
    }, seconds * 1000);

    
    return () => {
      clearInterval(tmpTime);
    };
  }, [time]);


return ( 
<h1>{firstUpdate.current ? date.toLocaleTimeString() : "time"}</h1>
)

原始代码不是 h1 标签中的“时间”，而是引用时间状态，我只是决定将其放入字符串中看看会发生什么。现在我更困惑了。我是新来的反应

Answer 1

您的代码要么使用了比实际需要更多的功能，要么在您未发布的部分中发生了更多情况。达到相同结果的更简单版本是：

import React, { useEffect, useState } from 'react';


function MyApp() {
  const updatePeriodSeconds = 1;
  const [time, setTime] = useState(date.toLocaleTimeString());

  useEffect(() => {
      const tmpTime = setInterval(() => {
        setTime(date.toLocaleTimeString());
      },  updatePeriodSeconds * 1000);
      return () => clearInterval(tmpTime)
  })

  return ( 
  <h1>{time}</h1>
  )
}

由于您是反应新手（不要担心一段时间后一切都会有意义，这是正常的），一些令人惊讶的地方可能是：

1. 当你想运行某事时。在后台，例如定期获取数据或更新页面，您可以调用

   useEffect

   中的逻辑，因为您的代码具有副作用（大致意味着它不仅仅是一个接受输入并返回输出的函数，而无需触及其他任何内容） ）。 React 然后找到了一种平滑渲染页面的方法。
2. 如果不清理具有副作用的代码，通常会导致内存泄漏。如果您的组件被删除或渲染，您在 useEffect 中返回的函数就会运行，因此应该清除间隔等剩余内容。
3. 如果您的数据随时间变化，则将其存储在

   state

   中，要创建状态/内存，您可以调用

   useState

   钩子。它返回某物。类似于保存状态的指针/引用和更新状态的函数。您提供的参数是默认/开始状态。

尝试遵循反应文档并用他们的例子挑战自己以提高你的理解。