React 组件发生意外反应

Question

以下是一个简单的反应组件：import React from "react";import { useState } from "react";export default function Comp() {  let [count, setCount] = useState(1);  function countUp(){    setCount(count + 1);  }  setInterval(countUp, 1000);  return <h2>{count}</h2>}我预计计数器每秒都会上升但由于某种原因，十 - 二十秒后开始出现问题请参阅此处： https ://stackblitz.com/edit/react-az7qgn?file=src/comp.jsx谁能解释一下吗？

Answer 1

您应该使用useEffect钩子来正确设置它。我可以举个例子。

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

export default function Comp() {

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

  useEffect(() => {

    const interval = setInterval(() => {

      setCount(state => state + 1);

    }, 1000);

    return () => clearInterval(interval);

  }, []);

  return <h2>{count}</h2>

}

一些注释。

一般来说，你会const更喜欢let，但在解构来自 React 的东西时这是强制性的。

基本上，useEffect允许您实现与类组件类似的结果componentDidMount和生命周期方法。componentDidUpdate此外，在这种特定情况下，通过在回调中返回一个函数useEffect，我们确保在需要清理时（这意味着每次运行后）清除计划的回调。这实际上避免了将许多东西堆叠在一起的混乱setInterval。

另外，当您setCount最好使用回调形式获取先前的状态时，因为它始终是最新的。

Answer 2

当调用 setInterval() 时，它返回一个间隔 id。您的代码没有保存变量，因此您无法重置它。在较小的迭代中，您不会看到每次迭代的更改。但是，随着 setInterval() 被调用的次数从 0 增加到 N，更多的计时器被启动，并且您将很快看到数字随着它们的增加而闪烁，因为每个间隔都在改变 的状态count。

换句话说，随着时间的推移，您将创建越来越多的计时器，而不是创建一次性使用的计时器。您需要打电话clearInterval(timer_id_goes_here)来清除计时器。