为什么 React 中 useEffect 钩子中的 setInterval 一直在运行？答案

【问题标题】：why setInterval inside useEffect hook in React keeps running?为什么 React 中 useEffect 钩子中的 setInterval 一直在运行？
【发布时间】：2021-12-12 22:14:21
【问题描述】：

我有这个 React 组件

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

export default function MyD3(props) {

  const [count, setCount] = useState(0);

  useEffect(() => {
    
    console.log("first log")

    const interval = setInterval(() => {
      console.log('This will run every second!');
    }, 1300);

    console.log("second log")

    return () => clearInterval(interval);

  },[]);

    return (
      <div >
        <p>{count}</p>
      </div>
    );
  }

我想了解为什么 setInterval 中的代码一直在运行。

当组件第一次挂载时记录 first log 和 second log

在浏览器控制台中打印一次。

让我吃惊的是，尽管如此，useEffect 代码并没有重复，

This will run every second!

一直在打印。

我想知道的是为什么，我希望它的范围仅限于 useEffect，因此留下 useEffect 代码也会中断间隔的执行。

我并不清楚 react / js stack 是如何工作的。

【问题讨论】：

"这样留下useEffect代码"组件卸载时调用清理代码
只要你的组件被挂载，setInterval里面的代码就会被重复执行。这就是setInterval 的工作原理。

标签： javascript reactjs use-effect callstack

【解决方案1】：

useEffect 代码将在您创建的 react 组件的每次渲染时执行。在这种情况下，正如您所说的 [] 作为 useEffect 依赖项，您的代码将在第一次渲染中执行。间隔将在哪里开始。

该间隔将无限运行，直到组件被卸载。为什么？因为函数() => clearInterval(interval); 被称为清理函数，它只有在组件如前所述被卸载时才会执行。 Here is a link to a further explanation

什么时候卸载组件？ You can find here a link to a question in this same site which solves this question

【讨论】：

【解决方案2】：

希望你没事！如果我理解正确，您希望 setInterval 函数停止返回。但是，您正在使用此设置进行 useEffect ： useEffect(() => {}, []);所以每当挂载组件时，它里面的所有东西都会被挂载，类似于componentDidMount。所以加载组件的时候会一直执行。

【讨论】：