clock小项目

一个简单的clock，显示当前时间

1.页面只渲染时间这一个元素，所以Clock只返回一个h1标签

2.定义构造函数

在构造函数中定义date属性

3.当渲染组件时开启计时器，当把组件移除时解除定时器

在tick函数中修改date属性的值，计时器每隔1秒调用1次tick()

总结：

当 <Clock /> 被传递给 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()这个钩子函数，定时器也就会被清除。