4.5 自我更新的时钟UI类

在前一节中，我们实现了可封装的React时钟UI的自动更新，主要是通过定时器功能实现的。不过，对于完美主义者还是不够理想，与React框架的设计理念也有很大的差距。

我们理想的形式是仅仅定义一个时钟组件，该时钟组件可以自我更新，将其渲染到页面中就是一个真正的时钟UI。因此，具体的代码形式大致如下：

【代码4-8】

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

●第04行代码定义的<Clock />就是我们想要的、可封装、可重用的时钟组件。这个时钟组件在渲染到页面中之后，是完全可以自我更新的。

为了实现这个可自我更新的时钟UI，我们需要将函数组件转换为ES6类组件，这个类组件具有自我更新的功能。

（1）需要创建一个ES6组件类，并且继承于React.Component，具体的代码形式如下：

【代码4-9】

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

●第02行代码，定义的时钟组件类（ClockReactComp）。

●第04行代码，通过render()方法将时钟组件类（ClockReactComp）渲染到页面中进行显示。

（2）在刚刚创建的时钟组件类（ClockReactComp）中定义render()方法，并将之前时钟函数组件的内容加进去，具体的代码形式如下：

【代码4-10】

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

●第03~10行代码，通过render()方法定义的、所渲染的时钟函数组件的内容。

●另外，由于在ES6组件类中无法显式地定义Props参数，需要在props参数前使用this关键字引用。

（3）到这步为止，一个可自我更新的时钟组件类（ClockReactComp）的雏形就基本完成了，然后借助【代码4-7】的机制通过定时器来实现时钟的自我更新，完整的代码形式如下：

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

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

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

●在第36行代码中，通过定义计时器来实现时钟组件类（ClockReactComp()）的自我更新。

测试网页的效果如图4.3所示。如图中的箭头所示，通过可自我更新的时钟组件类也可以实现同样的效果。同时，关键的地方是【代码4-11】通过ES6 Class形式定义的时钟组件，更接近我们理想中的React时钟组件了。