4.4 实现时钟UI的自动更新

在本节中，我们接着从前一节封装好React State时钟UI开始，实现时钟UI的自动更新功能，具体代码如下：

【代码4-7】（详见源代码目录ch04-react-state-clock-ui-auto.html文件）

关于【代码4-7】的说明：

●首先，我们需要完整保留第18~20行代码定义的时钟函数组件（ClockReactComp()），目的是保留对时钟UI的封装。

●然后，我们会想到通过定义计时器实现时钟的自动更新，这样就添加了第30行代码定义的setInterval()方法，目的是通过这个定时器方法每间隔1秒来更新一次时钟的显示。由于setInterval()方法的语法特点，我们需要定义一个回调函数autoClock()。

●最后，第22~29行代码是autoClock()函数的实现过程，通过调用时钟函数组件（ClockReactComp()）来显示页面时钟，并借助Props参数来传递时间。

测试网页的效果如图4.2所示。如图中箭头所示，页面中显示出的React时钟UI已经可以自动更新了。其实，【代码4-7】本质上与【代码4-5】是类似的，只不过突出了可封装的时钟组件的概念。

图4.2 React时钟UI的自动更新