为什么我的组件的这一部分在间隔调用时重新调用

Question

我正在用react hook构建一个智力竞赛应用程序，但我遇到了一些问题。

我有一个从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])

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

在我的JSX中，我映射这些用户核心。

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

问题是这个控制台日志每秒都在发生。为什么计时器会导致重新发送？

感谢

Answer 1

React总是在组件状态发生变化时对其进行完整的重新发布。因此，setTimer调用将导致渲染函数执行。请确保不要将重新渲染与DOM更新混淆。

通常情况下，由于虚拟DOM减少了对页面的更改，重新渲染对性能的影响是可以接受的，但也会产生一些成本。如果正在进行一些代价高昂的渲染，可以考虑将不想重新渲染的部分拆分为自己的组件，并在其上使用React.memo，这样即使父组件重新渲染也不会(前提是其道具不变(。