我正在使用 React hooks 构建一个测验应用程序,但遇到了一些问题。
我有一个从 20 开始的倒计时,并且设置了间隔,但这会导致我的组件中一些不相关的内容重新渲染。
当组件安装时,我使用Effect为每个头像附加一个分数。 allAvatars 是传入此组件的 prop。
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 放入依赖项数组中,因为我只希望在游戏状态更改时调用此效果。游戏状态初始化为“play”
在我的 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>
)
})
}
问题是这个控制台日志每秒都会发生。为什么计时器会导致重新渲染?
谢谢
最佳答案
当组件的状态发生变化时,React 始终会对其进行完全重新渲染。因此,setTimer
调用将导致您的渲染函数执行。确保不要将重新渲染与DOM更新相混淆。
通常,由于虚拟 DOM 减少了对页面的更改,重新渲染对性能的影响是可以接受的,但是会产生一些成本。如果正在进行一些成本高昂的渲染,您可以考虑将不想重新渲染的部分拆分到其自己的组件中,并使用 React.memo
这样即使父组件重新渲染它也不会(假设它的 props 不改变)。
关于javascript - 为什么我的组件的这一部分会在间隔调用时重新渲染?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61642036/