4.6 在时钟组件类中引入State状态

在这一节中，我们开始正式引入React状态（State）的概念。前面做了那么多的代码铺垫，就是为了在这里引入State状态的概念时能够水到渠成，因为React State是其他大部分JavaScript前端框架中所没有的概念。

为了便于读者学习，我们就以【代码4-11】为代码蓝本，通过代码改写的方式进行介绍。另外，改写的方式可以参考本章第1小节中介绍的内容。

首先，我们需要将“props”参数替换为“state”属性，具体代码形式如下：

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

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

●第06行代码中，使用“state”状态替换了原来的“props”参数。

接着，需要为时钟组件类（ClockReactComp）添加constructor()构造方法，并且对“state”状态进行初始化，具体代码形式如下：

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

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

●第02~04行代码定义的就是时钟组件类（ClockReactComp）的constructor()构造方法。其中，第03行代码对“state”状态进行了初始化操作，定义了一个date时间属性。

然后，将“props”参数传递到父类的构造方法之中，具体的代码形式如下：

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

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

●在第03行代码中，通过super关键字调用“props”参数，实现将“props”参数传递到父类构造方法的操作。

至此，在时钟组件类（ClockReactComp）中引入React State状态的操作就基本完成了，完整的代码形式如下：

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

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

●在第33行代码中，通过调用ReactDOM的render()方法，实现将时钟组件类（ClockReactComp()）渲染到页面中进行显示的操作。另外请注意，我们在<ClockReactComp />元素中移除了date属性。

测试网页的效果如图4.4所示。通过在时钟组件类（ClockReactComp()）中引入State状态，也可以实现同样的页面显示效果。正如图中标识所写内容那样，这个时钟组件类是无法自我更新的。难道还是要继续通过计时器功能，才可以实现自我更新的时钟组件类么？我们在下一小节中给出答案。