3 为一个类添加局部状态

三步将 date 从属性移动到状态中

• 在render()中使用this.state.date 替代 this.props.date

• 添加一个类构造函数来初始化状态 this.state
  
  注意如何传递 props 到基础构造函数的

类组件应始终使用props调用基础构造函数

• 从 元素移除 date 属性

稍后将定时器代码添加回组件本身。

• 结果如下

接下来，我们将使Clock设置自己的计时器并每秒更新一次

4 将生命周期方法添加到类中

在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要

每当Clock组件第一次加载到DOM时，我们都想[生成定时器]，这在React中被称为挂载

同样，每当Clock生成的这个DOM被移除时，我们也会想要[清除定时器]，这在React中被称为卸载

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

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  componentDidMount() {
  }
  componentWillUnmount() {
  }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

这些方法被称作生命周期钩子。

当组件输出到 DOM 后会执行 componentDidMount() 钩子，这是一个建立定时器的好地方：

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

注意我们是将定时器ID保存在 this 中的

尽管 this.props 是由React本身安装的以及this.state 有特殊的含义，如果你需要存储的东西不在数据流中，你可以随意手动向类中添加其他字段（比如定时器ID）。

我们将在 componentWillUnmount()生命周期钩子中卸载计时器

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

最后，我们实现了每秒钟执行的 tick() 方法。

它将使用 this.setState() 来更新组件局部状态：

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>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

现在时钟每秒钟都会执行。

让我们快速回顾一下发生了什么以及调用方法的顺序：

当 被传递给 ReactDOM.render() 时，React 调用 Clock 组件的构造函数。 由于 Clock 需要显示当前时间，所以使用包含当前时间的对象来初始化 this.state 。 我们稍后会更新此状态。

React 然后调用 Clock 组件的 render() 方法。这时 React 了解屏幕上应该显示什么内容，然后 React 更新 DOM 以匹配 Clock 的渲染输出。

当 Clock 的输出插入到 DOM 中时，React 调用 componentDidMount() 生命周期钩子。 在其中，Clock 组件要求浏览器设置一个定时器，每秒钟调用一次 tick()。

浏览器每秒钟调用 tick() 方法。 在其中，Clock 组件通过使用包含当前时间的对象调用 setState() 来调度UI更新。 通过调用 setState() ，React 知道状态已经改变，并再次调用 render() 方法来确定屏幕上应当显示什么。 这一次，render() 方法中的 this.state.date 将不同，所以渲染输出将包含更新的时间，并相应地更新DOM。

一旦Clock组件被从DOM中移除，React会调用componentWillUnmount()这个钩子函数，定时器也就会被清除。