4.8 在时钟组件类中使用生命周期

在这一节中，我们通过引入React生命周期的概念，配合State状态来实现最终版本的React时钟组件。

我们继续以【代码4-15】为基础，通过引入相关生命周期方法来实现能够自我更新的时钟组件类，具体代码如下：

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

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

●在第25~30行代码中引入了componentDidMount()方法，该方法会在组件已经被渲染到DOM中后被触发，可以在该方法中设置一个计时器，来实现时钟组件类的自我更新功能。其中，第26~29行代码通过使用setInterval()定义了一个计时器（this.timerId），并通过该定时器定时调用第27行代码所定义的箭头函数方法（tick()）。

●第35~39行代码是自定义方法（tick()）的实现过程，主要是通过this.setState()方法来更新组件的State状态。其中，第37行代码通过更新date属性实现了时钟组件类的自我更新。

●在第31~33行代码中引入了componentWillUnmount()方法，该方法会在组件已经被从DOM中清除后被触发。其中，第32行代码通过使用clearInterval()清除了计时器（this.timerId）。

测试网页的效果如图4.5所示。通过在时钟组件类（ClockReactComp()）中定义State状态和使用生命周期方法调用定时器，同样实现了的自我更新的时钟UI效果。同时，该时钟组件类（ClockReactComp()）通过结合State状态和使用生命周期方法，完全实现了一个结构清晰、可封装和可重复使用的时钟组件。

图4.5 React State & Lifecycle时钟组件类