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 的东西时这是强制性的。

我建议阅读Using the Effect Hook on React 文档以了解有关useEffect更多信息。

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

此外，当您setCount ，最好使用回调表单获取先前的状态，因为这将始终是最新的。

Answer 2

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

换句话说，随着时间的推移，您正在创建越来越多的计时器，而不是创建一次性使用的计时器。 您需要调用clearInterval(timer_id_goes_here)来清除计时器。 请参阅下面链接中的代码示例。

https://www.w3schools.com/jsref/met_win_setinterval.asp