首先，在 react 中，通过类来构建 react 组件时，可以在类的构造函数 constructor 中可以使用 react 的属性 state，属性 state 是一个对象，在对象中可以定义组件需要的属性和属性值，比如下面的例子:

import React from "react";
import reactDom from "react-dom";
class App extends React.Component{
    constructor(){
        super();
        this.state = { num: 0 };
    }
}

接下来，我们就可以在 react 组件内部的 render 方法定义虚拟 DOM 元素时使用挂载在类组件上的 state 对象。 例如：

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <p>{this.state.num}</p>
      </React.Fragment>
    );
  }
}

再者，我们通过 React-Dom 的 render 方法将创建好的类组件渲染到页面上，代码如下：

reactDom.render(<App></App>,window.root);

这样，页面上就可以看到，在 root 节点下面已经有一个子节点 p，并且 p 节点显示的内容为 0。

react setState 修改组件状态

在 react 中提供了一个 setState 方法，这个方法主要用来修改组件的状态，调用这个方法后，react 将会调用 react-dom 中的 render 方法重新渲染页面。

那么，这个 setState 方法该在哪里使用？并且如何使用呢？ 下面，我们就基于上面的例子进行扩展来说明 setState 该如何使用：

首先我们在需要进行渲染的虚拟 DOM 元素上增加 2 个按钮:

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <p>{this.state.num}</p>
        <button onClick={this.add}>增加</button>
        <button onClick={this.remove}>删除</button>
      </React.Fragment>
    );
  }
}

接下来，我们给"增加"按钮添加一个 add 方法，当点击这个"增加"按钮时给 state 对象上的 num 属性的属性值增加 1。

  add = () => {
    // 这里我们采用定时器的方式，不停的调用setState给num属性赋值
    this.timer = setInterval(() => {
      // prevState是react自带的，表示的是没设置之前的状态
      this.setState(prevState => ({ num: prevState.num + 1 }));
    },1000);
  };

这时我们去页面上点击"增加"按钮，触发 add 方法，num 属性的值就不停的修改：