React学习3

上图为生命周期。Mount代表一个Dom节点渲染到页面的一个过程。
Update 代表一个已经被mounted的Dom节点重新渲染的过程。
Unmont 代表一个已经被mounted的Dom节点被移除的过程。

里面有几个方法，我们直接看代码：

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')
);

解读一下代码：
首先，还是看render方法，调用的是Clock，则去找Clock这个类。调用这个类时，会先调用它的构造函数，将state初始化了。接着会调用到Render方法。注意到，里面有两个函数，一个是componentDidMount，这个函数在Dom创建完成后会调用，而compomentwillUnmount会在即将移除Dom的时候会调用。当Dom创建完毕后，就会在界面上显示一开始初始化的时间，然后调用componentDidMount方法。里面有个定时函数，是在1s后给state重新赋一个值。State改变后又重新渲染界面，所以可以做出一个简易的计时器。State的值每次变化都会是组件进入update状态，所以重新渲染界面。