4.9 正确的使用State状态

在React框架中，对于如何正确地使用状态（State）定义了专属的方式，具体就是通过setState()方法来更新状态（State）。

这里需要强调的是，在React框架中是不允许直接操作状态（State）属性的，而且直接操作是无效的。如何理解呢？简单说就是直接操作状态（State）属性时，虽然React框架不会报错，但是不会产生任何效果。

下面，我们先通过一个具体的代码实例讲解一下，如果直接操作状态（State）属性会是什么效果，具体代码如下：

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

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

●在第19~24行代码定义的构造方法中，定义了一个状态（State）属性（count），并初始化为数值0，该属性用于测试直接操作的方式。

●在第25~30行代码定义的componentDidMount()方法中，通过使用setInterval()方法定义了一个计时器（this.timerId），并通过箭头函数调用了count()方法。

●第31~33行代码是自定义方法（count()）的实现过程，通过直接操作“count”属性进行累加（+1）。其中，props参数（increment）定义在第47~49行代码中。

●在第41行代码中，通过render()方法将状态（State）属性（count）的值渲染到页面中进行显示。

●在第34~36行代码定义的componentWillUnmount()方法中，通过使用clearInterval()方法清除了上面定义的计时器（this.timerId）。

测试网页的效果如图4.6所示。如图中的箭头所示，在第32行代码中尝试直接通过操作“count”属性进行累加（+1），页面中是看不到任何的效果，这说明该方式并不会重新渲染组件。

下面，我们通过另一个代码实例，讲解一下通过setState()方法操作状态（State）属性的正确方式，具体代码如下：

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

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

●这段代码与【代码4-18】基本类似，不同之处就是第31~35行代码所实现的自定义方法（count()）。

●在自定义方法（count()）中，第32~34行代码通过setState()方法操作“count”属性进行累加（+1）。

●另外，在setState()方法中定义了两个参数“prevState”和“props”，分别用于传递前一个State状态和Props参数。

测试网页的效果如图4.7所示。如图中的箭头所示，通过setState()方法操作状态（State）属性的正确方式，可以看到数值动态更新的效果。