反应无限计数

Question

所以我有一个问题，当计数超过 10 时，我的反应会发疯， 我试图从 0?(Unlimited count) 开始计数，在计数超过 10 之后，数字开始变得疯狂，而不是 11，我得到不停切换的数字。 这是我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React, { useState } from 'react';
function CountUp() {
    
    const [i, setI] = useState(0);
    function timeOutExample() {
        setI(i + 1);
    }
    setInterval(timeOutExample, 1000);
    return (
        <span>{i}</span>
    );
}
export default CountUp;

如果您在这里发现有问题，请告诉我，我搜索了 3 个小时没有成功。

Answer 1

每次渲染组件时，您都会启动一个新的间隔计时器。最终你会得到数百个，甚至可能是数千个，它们都相互重叠。

两种方法解决：

1. 只需设置一个一次性计时器 - 然后会导致重新渲染，这将设置另一个 rone-off 计时器等。请务必在卸载组件时取消计时器。 （因为如果在组件卸载后调用定时器回调，你会尝试在卸载的组件上设置状态，React 会向控制台写入错误。）

2. 在组件首次挂载时设置一个间隔定时器（使用useEffect和一个空的依赖数组），并在组件卸载时取消。

由于无论哪种方式卸载时都必须取消计时器，因此通过useEffect 的间隔计时器可能是最简单的。请务必使用状态设置器的回调形式（因为您关闭的 i 在后续调用间隔回调时会过时）：

function CountUp() {
    const [i, setI] = useState(0);
    useEffect(() => {
        // This is called once when the component is mounted
        const handle = setInterval(() => {
            setI(i => i + 1);
        }, 1000);
        // Return the unmount cleanup handler:
        return () => {
            // This is called once when the component is unmounted
            clearInterval(handle);
        };
    }, []);
    return (
        <span>{i}</span>
    );
}

现场示例：

const {useState, useEffect} = React;

function CountUp() {
    const [i, setI] = useState(0);
    useEffect(() => {
        // This is called once when the component is mounted
        const handle = setInterval(() => {
            setI(i => i + 1);
        }, 1000);
        // Return the unmount cleanup handler:
        return () => {
            // This is called once when the component is unmounted
            clearInterval(handle);
        };
    }, []);
    return (
        <span>{i}</span>
    );
}

ReactDOM.render(<CountUp/>, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>

Answer 2

在这篇文章中使用 UseEffect 钩子回答了这个问题

Use React hook to implement a self-increment counter

您的 SetInterval 会一遍又一遍地发生，因为每次您的状态发生变化时都会重新渲染页面

const [i,setI] = useState(0)

  useEffect(()=>{
      const interval = setInterval(() => {
        setI(i=>i+1)
      }, 1000);;
      return ()=>{
        clearInterval(interval)
      }

  },[])