React: setInterval 计数值什么时候不变化？

Question

我知道这段代码可以工作，count 值将每 2 秒更新一次：

import React from 'react';

function App() {
  const [count, setCount] = React.useState(0);

   React.useEffect(() => {
     setInterval(() => {
       setCount(prev => prev + 1);
     }, 2000);
   }, []);

  return <h1>{count}</h1>;
}

我想了解为什么下面的代码不起作用：

React.useEffect(() => {
    const interval = setInterval(() => {
      setCount(count + 1);
      console.log('hello');
    }, 2000);

    return () => clearInterval(interval);
  }, []);

在这种情况下，count 保持为 1，但每 2 秒后调用 setInterval，因为每 2 秒记录一次 hello。

组件未渲染时如何调用 setInterval？它是否在 React 生命周期之外运行？
当我将回调传递给 setCount(prev => prev + 1) 时，它工作正常吗？为什么？回调中的prev如何获取更新值？

我已经阅读了类似的答案，但对我来说仍然没有意义，所以如果有人可以解决这个问题。

谢谢

Answer 1

当您创建区间函数时，count 将是创建时的值（因此为 0）。稍后调用它时，它仍将保留该值，因为它不会在该上下文中发生更改。所以它总是将它设置为 0 + 1，所以 1.

当您传递回调函数时，它将使用当前的正确值。

希望这可以解决问题！[=11=]

Answer 2

How setInterval is being called when component is not being rendered? Does it operate outside of React lifecycle or something?

是的，setInterval 是核心 javascript 语言的一部分。通过调用 setInterval，您要求浏览器每 2000 毫秒调用一次指定的函数。 React 不参与其中。

When I pass callback to setCount(prev => prev + 1), then it works fine? Why? How the prev in callback getting the updated value?

useState 挂钩旨在允许这种交互。 React 承诺，如果你将一个函数传递给 setCount，那么 React 将调用你的函数并传递最新的值。

他们实现这个的确切代码可能很难逐步完成，因为他们重用了许多通用函数来实现几个不同的挂钩，但如果你想浏览他们的代码库，你可以看这里：https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.new.js#L1525

Answer 3

此版本：setCount(prev => prev + 1) 每次间隔运行.

时使用之前的状态值

此版本：setCount(count + 1) 在 useEffect 为 las 运行时使用 count（在本例中为 0，因此为 0+1）。因为有一个空的依赖数组，这个钩子只有运行一次。

如果 count 包含在 useEffect 的依赖数组中，那么当 count 的值发生变化时它将重新获得运行。

运行这可能有助于了解发生了什么：

  React.useEffect(() => {
    console.log('running useEffect')
    const interval = setInterval(() => {
      setCount(count + 1);
      console.log('hello ', count);
    }, 500);

    return () => {
      console.log('clear interval')
      clearInterval(interval);
    }
  }, [count]);

React: setInterval 计数值什么时候不变化？

React: When does not the count value changes in setInterval?

javascript

setinterval

reactjs

react-hooks