React 功能组件在根据 setInterval 更改数字状态时不一致答案

【问题标题】：React 功能组件在根据 setInterval 更改数字状态时不一致
【发布时间】：2022-01-23 09:51:36
【问题描述】：

Rando2.js

import React, { useState } from 'react';

const Rando2 = (props) => {
  const [num, setNum] = useState(0);

  const changeNum = () => {
    setInterval(()=>{
      let newNum = Math.floor(Math.random()*props.maxNum);
      setNum(newNum);
    }, 1000)
  }

  changeNum();

  return (
    <h1>{num}</h1>
  )
}

export default Rando2;

上面的代码没有报错，props {maxNum: 15} 是 parent 提供的，所以没问题。问题是，我希望 number 每秒更改一次，它在开始时确实如此，但随着时间的推移 --- Number 更改的频率急剧增加，例如每秒 10 次、20 次或 30 次。 ..关于那个。

现在，代码有什么问题吗，为什么数字的变化并不总是一致的……就像代码一样每秒一次？

【问题讨论】：

当一个功能组件重新渲染时，基本上整个功能都会再次运行。这意味着当该间隔触发时，更改状态并导致重新渲染，changeNum(); 再次运行，创建 另一个 增量间隔。要在挂载时触发一次，请使用 useEffect 和一个空的依赖数组（并记住返回一个函数以清除卸载时的间隔）

标签： javascript reactjs react-native react-redux react-hooks

【解决方案1】：

问题在于，每次 num 状态更改时，您都在设置新的超时或间隔。因此，每次此组件运行或重新渲染时，您都会有一个额外的时间间隔，即以不同的节奏设置新的 num 以及原始时间间隔。相反，您只需要在组件第一次加载时设置超时。

useEffect(() => {
 val interval = setInterval(...code...)

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

【讨论】：

没有注意到@Jayce444 的评论。很不错。

【解决方案2】：

在上面的代码中，有时会同时执行多个间隔，每次渲染后都会安排一个新的 setInterval

使用 Effect Hook 在初始渲染时安排 setInterval 以便它每秒执行一次间隔

useEffect(()=>{
  setInterval(()=>{
    let newNum = Math.floor(Math.random()*props.maxNum);
      setNum(newNum);
  }, 1000)
  return () => {clearInterval(interval)}
},[])

【讨论】：