React state状态

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

创建一个名称扩展为 React.Component 的 ES6 类，在 render() 方法中使用 this.state 来修改当前的时间。

添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。

class Clock extends React.Component {

  constructor(props) {

    super(props);

    this.state = {date: new Date()};

  }

  render() {

    return (

      <div>

        <h1>Hello, world!</h1>

        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>

      </div>

    );

  }

}

ReactDOM.render(

  <Clock />,

  document.getElementById('example')

);

将使Clock设置自己的计时器并每秒更新一次。将生命周期方法添加到类中，在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要。

每当 Clock 组件第一次加载到 DOM 中的时候，都想生成定时器，这在 React 中被称为挂载。同样，每当 Clock 生成的这个 DOM 被移除的时候，也会想要清除定时器，这在 React 中被称为卸载。

可以在组件类上声明特殊的方法，当组件挂载或卸载时，来运行一些代码：

React 实例

class Clock extends React.Component {

  constructor(props) {

    super(props);

    this.state = {date: new Date()};

  }

  componentDidMount() {

    this.timerID = setInterval(

      () => this.tick(),

      1000

    );

  }

  componentWillUnmount() {

    clearInterval(this.timerID);

  }

  tick() {

    this.setState({

      date: new Date()

    });

  }

  render() {

    return (

      <div>

        <h1>Hello, world!</h1>

        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>

      </div>

    );

  }

}

ReactDOM.render(

  <Clock />,

  document.getElementById('example')

);

componentDidMount() 与 componentWillUnmount() 方法被称作生命周期钩子。

在组件输出到 DOM 后会执行 componentDidMount() 钩子，就可以在这个钩子上设置一个定时器。

this.timerID 为定时器的 ID，可以在 componentWillUnmount() 钩子中卸载定时器。