本文译自：[30-seconds-of-react](https://github.com/30-seconds/30-seconds-of-react)。React 30 秒速学：全篇中文翻译、学习，地址：[30-seconds-of-react-zh_CN-umi](https://github.com/heibaimeng/30-seconds-of-react-zh_CN-umi)，所有案例进行分析、注释、上线。 ### 倒计时组件渲染倒数计时器，在达到零时打印消息。 * 使用对象解构来设置`hours`，`minutes`和`seconds`prop 的默认值。 * 使用`React.useState()`钩子来创建`time`，`paused`和`over`状态变量，并将它们的值分别设置为传递的props，`false`和`false`的值。 * 创建一个方法`tick`，它根据当前值更新`time`的值（即将时间减少一秒）。 * 如果`paused` 或 `over` 是 `true` ，`tick`将立即返回。 * 创建一个方法`reset`，将所有状态变量重置为其初始状态。 * 使用`React.useEffect()`钩子通过使用`setInterval()`每秒调用`tick`方法，并在卸载组件时使用`clearInterval()`进行清理。 * 使用`

`用`time`状态变量的文本表示形式包装`

`元素，以及分别暂停/取消暂停和重启计时器的两个`

); } ``` 例子 ```jsx export default function() { return ; } ``` - [示例代码](https://github.com/heibaimeng/30-seconds-of-react-zh_CN-with-demo/blob/master/src/pages/Visual/CountDown.jsx) - [运行效果](https://heibaimeng.github.io/30-seconds-of-react-demo/#/Visual/CountDown)