當使用React應用條件CSS時，我注意到幾毫秒的明顯延遲，我想知道我哪里做錯了。這是一個非常sm all應用程序，我正在創建，以學習框架。這是導致問題的組件:

export default function Word({ word, state, onClick }) {
  return (
    <button
      id='word'
      disabled={state !== 'gameover'}
      onClick={onClick}
      className={state === 'timesup' ? 'timesup' : ''}
      >
      {state === 'playing' && word}
      {state === 'gameover' && 'GO'}
      {state === 'timesup' && 'Time\'s up!'}
    </button>
  )
}

在我的主App.js中，它呈現為:

import { useState } from 'react';

import Timer from './components/Timer';
import Word from './components/Word';

function App() {
  const timer = 3;
  const [word, setWord] = useState('some word');
  const [state, setState] = useState('gameover');

  const handleStartGame = () => {
    setState('playing');
  }

  const handleTimesUp = async event => {
    setState('timesup');
    await sleep(3000)
    setState('gameover');
  }

  const sleep = ms => new Promise(
    resolve => setTimeout(resolve, ms)
  )

  return (
    <>
      <Timer duration={timer} isRunning={state === 'playing'} timesUp={handleTimesUp} />
      <Word word={word} state={state} onClick={handleStartGame}/>
    </>
  );
}

export default App;

我不認為這是問題的一部分，但為了不完全起見，這里Timer.js:

import { useState } from "react"
import { useEffect } from "react"

export default function Timer({ duration, isRunning, timesUp }) {
  const [time, setTime] = useState()

  useEffect(() => {
    if (isRunning) {
      const timer = time > 0 && setInterval(() => setTime(time - 1), 1000)
      if (time === 0) {
        timesUp()
      }
      return () => clearInterval(timer)
    } else {
      setTime(duration)
    }
  }, [time, isRunning])

  return (
    <div id='timer'>{time}</div>
  )
}

以及相關的CSS:

#word {
  font-size: 20px;
  font-weight: 500;
  border: 1px solid var(--color-3);
  padding: 20px;
  text-align: center;
  background-color: var(--color-5);
  margin-bottom: 20px;
  color: var(--color-2);
  width: 100%;
  height: 90px;
}

#word:disabled {
  color: var(--color-2);
  pointer-events: none;
}

#word.timesup {
  color: red;
  font-weight: 800;
}

當狀態在handleTimesUp內改變時，在文本變為& quot時間到了。并應用CSS。有那么一會兒& quot時間到了。文本仍然使用其以前的顏色呈現。

據我所知，當我在父組件上使用setState時，它會觸發該組件及其子組件的新呈現。那么所有的東西不都應該同時被畫出來嗎？避免這種延遲的方法是什么？

編輯:如果我以這種方式編寫Word組件(即不在return語句中添加類名)，結果是相同的:

export default function Word({ word, state, onClick }) {
  let className = 'normal'
  if (state === 'timesup') {
    className += ' timesup'
  }

  return (
    <button
      id='word'
      disabled={state !== 'gameover'}
      onClick={onClick}
      className={className}
      >
  // etc