本章与下一章分别介绍React组件的状态（State）和生命周期（Lifecycle）的概念。

---

为啥需要使用状态？

先通过一个示例来说明为啥需要用到React组件的状态（state）；还是之前那个时钟的示例：

function showTime() {
  const element = (
    <div>
      <h1>反清复明</h1>
      <p>现在时间是： {new Date().toLocaleTimeString()}</p>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(showTime, 1000);

运行一下

但是上述并不是一个真正可复用的React组件，而是定时更新罢了，耦合性过高，没有进行封装。而React组件的状态（State）和生命周期（LifeCycle）则非常适合解决这些事情。

首先从封装闹钟的外观开始：

function Clock(props) {
    return (
        <div>
          <h1>反清复明</h1>
          <p>现在时间是： {props.date.toLocaleTimeString()}</p>
        </div>
    );
}

function showTime() {
  ReactDOM.render(
      <Clock date={new Date()} />, 
      document.getElementById('root')
      );
}

setInterval(showTime, 1000);

运行一下

但是上述的这种写法，依然还是需要一个计时器来每秒更新。理想情况下，最好可以只编写一次代码，便可以让Clock组件自我更新，这就是用到状态（state）来实现。state与props类似，但是state是完全私有的，其作用域就是当前组件。跟函数的局部变量的感觉有点像。

不过得先把函数组件转换成类组件：

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>反清复明</h1>
        <p>现在时间是：{this.props.date.toLocaleTimeString()}</p>
      </div>
    );
  }
}

运行一下

再在类组件中添加局部的state，并在构造对象时获取当前时间：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
         <h1>反清复明</h1>
         <p>现在时间是：{this.state.date.toLocaleTimeString()}</p>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

运行一下

---

但是，上述运行所得只是一个静止的闹钟，下一章则会介绍通过生命周期（lifecycle）来实现动态的闹钟。