反应:: CountDown
呈现一个倒计时计时器，该计时器在到达零时将其打印出来。
使用对象解构到默认设置的 hours， minutes 和 seconds 道具。
使用 钩来创建 ， 并且 状态变量并将其值设置为通过道具的价值， 并 分别。React.useState()timepausedoverfalsefalse
创建一个方法tick，该方法 time 根据当前值更新 值（即，将时间减少一秒钟）。
如果 paused 或者 over 是 true， tick 将立即返回。
创建一个方法 reset，将所有状态变量重置为其初始状态。
使用 钩子 通过使用每秒调用一次该 方法， 并 在卸载组件时使用 进行清理。React.useEffect()ticksetInterval()clearInterval()
使用a
包装
带有组件time 状态变量的文本表示形式的
如果 over 是 true，计时器将显示一条消息，而不是值 time。
function CountDown({ hours = 0, minutes = 0, seconds = 0 }) {
const [paused, setPaused] = React.useState(false);
const [over, setOver] = React.useState(false);
const [time, setTime] = React.useState({
hours: parseInt(hours),
minutes: parseInt(minutes),
seconds: parseInt(seconds)
});
const tick = () => {
if (paused || over) return;
if (time.hours == 0 &&time.minutes== 0 &&time.seconds== 0) setOver(true);
else if (time.minutes == 0 &&time.seconds== 0)
setTime({
hours:time.hours- 1,
minutes: 59,
seconds: 59
});
else if (time.seconds == 0)
setTime({
hours: time.hours,
minutes:time.minutes- 1,
seconds: 59
});
else
setTime({
hours: time.hours,
minutes: time.minutes,
seconds:time.seconds- 1
});
};
const reset = () => {
setTime({
hours: parseInt(hours),
minutes: parseInt(minutes),
seconds: parseInt(seconds)
});
setPaused(false);
setOver(false);
};
React.useEffect(() => {
let timerID = setInterval(() => tick(), 1000);
return () => clearInterval(timerID);
});
return (
{`${time.hours.toString().padStart(2, '0')}:${time.minutes
.toString()
.padStart(2, '0')}:${time.seconds.toString().padStart(2, '0')}`}
{over ? "Time's up!" : ''}
);
}ReactDOM.render(, document.getElementById('root'));