4.3 开始封装时钟UI

首先，我们就从封装React State时钟的UI开始，当然目前仅仅就是一个静态的时钟UI，具体代码如下：

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

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

●核心代码是第18~20行代码定义的函数组件（ClockReactComp()），实现了一个可封装的时钟UI。目前，这个时钟UI是个静态组件，是无法自动更新的。

测试网页的效果如图4.1所示。如图中的箭头所示，页面中显示出了React时钟UI的样式，当然目前这个时钟是静态无法自动更新的。

图4.1 React时钟UI