4.1 React State介绍

在React框架中定义了一个状态（State）概念，并通过状态（State）来实现React组件的状态机特性。所谓React组件的“状态机”特性，就是指组件通过与用户的交互，实现不同的状态，然后通过渲染UI保证用户界面和数据一致性。

React框架之所以定义这个状态（State）概念，其目的就是仅仅通过更新React组件的状态（State），就可以实现重新渲染用户界面的操作（这样就不需要操作DOM了）。这点也正是React设计理念相较于其他前端框架的先进之处。

React State的使用方法相比于Props较为复杂一些，但也是有基本模式的，下面就详细介绍一下。

首先，先要创建一个ES6形式的React组件（Component）类，这方面内容在前文中有过详细的介绍，具体代码如下：

【代码4-1】

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

●在React组件类内部，要定义constructor()构造方法（见第03行代码），以及render()方法（见第05~07行代码）。

然后，在render()方法中通过“this.state”来使用React状态（State），具体的代码形式如下：

【代码4-2】

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

●第08行代码中，通过“this.state”来使用React状态（State）。

这里，React状态（State）的初始化工作如何实现呢？这个工作需要放在React组件类的constructor()构造方法中，具体的代码形式如下：

【代码4-3】

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

●第04行代码中，就是“this.state”的初始化方式。其中，“params”表示属性名称，“value”为初始化的属性值，同时可以定义若干组。

最后，还需要考虑将Props参数添加到构造方法中，具体的代码形式如下：

【代码4-4】

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

●第03行代码，在constructor()构造方法中定义props参数。

●第04行代码，通过super关键字调用props参数，实现对父类构造方法的引用。这里的super关键字属于JavaScript语法范畴了。

通过以上几个基本步骤，就实现了React State的定义与使用，当然在实际应用中是很灵活的，需要多加练习才可以慢慢掌握。在下面的几个小节中，我们通过实现一个可封装重用的React State时钟应用来详细介绍React状态（State）的使用方法。