组件状态以及生命周期

每个组件都有几个 “生命周期方法” ，您可以重写这些方法，以在过程中的特定时间运行代码。 前缀为 **will** 的方法在一些事情发生之前被调用，而前缀为**did**的方法在一些事情发生后被调用。

Mounting(装载)

当组件实例被创建并将其插入 DOM 时，这些方法将被调用：

· constructor()在 React 组件被装载（mounted）前，该组件的 constructor(构造函数) 将被调用。

· componentWillMount()组件开始装载之前调用，在一次生命周期中只会执行一次。

· render()

· componentDidMount()组件完成装载之后调用，在一次生命周期中只会执行一次，从这里开始就可以对组件进行各种操作了，比如在组件装载完成后要显示的时候执行动画。
初始化所需要的 DOM 节点的应该放在这里。 如果你需要从远程加载数据，这是一个实例化网络请求的好地方。

Updating(更新)

改变 props 或 state 可以触发更新事件。 在重新渲染组件时，这些方法将被调用：

· componentWillReceiveProps(object nextProps)已加载组件收到新的参数时调用

· shouldComponentUpdate(object nextProps, object nextState)组件判断是否重新渲染时调用

· componentWillUpdate(object nextProps, object nextState)组件属性更新之前调用，每一次属性更新都会调用.
当接收到新的 props 或 state 时，componentWillUpdate() 在渲染之前立即被调用。在更新发生之前，使用这个方法可以作为执行准备更新的一个好机会。这个方法在第一次渲染时不会被调用。

注意，这里不能调用 this.setState() 。 如果你需要更新 state 以响应 props 更改，请改用 componentWillReceiveProps()。

· render()render() 函数应该是纯函数，这意味着它不会修改组件状态，每次调用它时返回相同的结果，它不会直接与浏览器交互。

· componentDidUpdate(object nextProps, object nextState)组件属性更新之后调用，每次属性更新都会调用

Unmounting(卸载)

当一个组件从 DOM 中删除时，这个方法将被调用：

· componentWillUnmount()组件卸载之前调用

componentDidMount() 钩子在组件输出被渲染到 DOM 之后运行。这是设置时钟的不错的位置：

example

我们在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')
);

from http://www.css88.com/react/docs/state-and-lifecycle.html

我们来快速回顾一下该过程，以及调用方法的顺序：

1. 当 <Clock /> 被传入 ReactDOM.render() 时, React 会调用 Clock组件的构造函数。 因为 Clock 要显示的是当前时间，所以它将使用包含当前时间的对象来初始化 this.state 。我们稍后会更新此状态。

2. 然后 React 调用了 Clock 组件的 render() 方法。 React 从该方法返回内容中得到要显示在屏幕上的内容。然后，React 然后更新 DOM 以匹配 Clock 的渲染输出。

3. 当 Clock 输出被插入到 DOM 中时，React 调用 componentDidMount()生命周期钩子。在该方法中，Clock 组件请求浏览器设置一个定时器来一次调用 tick()。

4. 浏览器会每隔一秒调用一次 tick()方法。在该方法中， Clock 组件通过 setState() 方法并传递一个包含当前时间的对象来安排一个 UI 的更新。通过 setState(), React 得知了组件 state(状态)的变化, 随即再次调用 render() 方法，获取了当前应该显示的内容。 这次，render() 方法中的 this.state.date 的值已经发生了改变， 从而，其输出的内容也随之改变。React 于是据此对 DOM 进行更新。

5. 如果通过其他操作将 Clock 组件从 DOM 中移除了, React 会调用 componentWillUnmount() 生命周期钩子, 所以计时器也会被停止。