Javascript 为什么我的组件的这一部分会在间隔调用时重新结束？

我正在用react钩子构建一个测验应用程序，我遇到了一些问题

我有一个从20开始的倒计时，设置了间隔，但这导致我的组件中一些不相关的东西重新启动

当组件挂载时，我使用Effect将分数附加到每个化身上。allAvatars是传递到此组件的道具

 const [userScores, setUserScores] = useState([])


 useEffect(() => {
   const userScoreObject = allAvatars.map((user) => {
   user.score = 0;
   return user;
 })
  setUserScores(userScoreObject);
 }, [])

然后，根据游戏的状态，我的计时器会有另一个useEffect

useEffect(() => { 
  let interval; 
  if (gameState === 'play') {
    interval = setInterval(() => {
      setTimer(timer -= 1)
  }, 1000)
 } else if (gameState === 'pause') {
  return clearInterval(interval);
 }
 return () => clearInterval(interval)
 }, [gameState])

我只是把游戏状态放在依赖数组中，因为我只想在游戏状态改变时调用这个效果。游戏状态初始化为“播放”

在我的JSX Im中，映射这些用户分数

 {
    userScores && 
      userScores.map((user, index) => {
        console.log(user)
        return (
          <div key={index} >
            <img src={user.avatar} alt='avatar'></img>
            <p>{user.score}</p>

          </div>
        )
      })
  }

{
用户分数和
userScores.map（（用户，索引）=>{
console.log（用户）
返回(
{user.score}

)
})
}

问题是，此控制台日志每秒都在发生。为什么计时器会导致重新启动

---

感谢

当组件的状态发生变化时，React将始终对其进行完全重新加载。因此，

setTimer

调用将导致执行渲染函数。请确保不要将重新渲染与DOM更新混淆

---

通常情况下，重新呈现对性能的影响是可以接受的，因为虚拟DOM减少了对页面的更改，但这会带来一些成本。如果有一些昂贵的渲染正在进行，你可以考虑把你不想再渲染的部分分解成它自己的组件，然后使用它，即使父组件重新渲染它也不会（如果它的道具不改变）。

是<代码> StimeTime/Cudio>设置状态？更改状态会导致按设计重新渲染。但是否预期会重新渲染整个组件？是的。当组件的状态发生变化时，React将始终对其执行完全重新加载。虚拟DOM可能会最小化对DOM的实际更改，但渲染函数仍将运行。如果不希望渲染功能运行，则可以将不希望重新渲染的部分拆分为单独的组件，并对其执行

React.memo

。