const log = (...value) => console.log(...value)

            import ReactDOM from 'react-dom'
            import React, { Component, PropTypes } from 'react';

            class Clock extends React.Component {
              constructor (props) {
                super(props)
                /**
                 *  this.state: 定义可读写的初始状态 通过this.state读取
               */
                this.state = {
                  date: new Date(),
                }
              }

              // 页面渲染完成后调用
              componentDidMount() {
                this.timerID = setInterval(
                  v => this.tick(),
                  1000
                )
              }

              // 组件从挂在点移除时调用     
              componentWillUnmount() {
                clearInterval(this.timerID)
              }

              // setState 可以是异步的 所以使用如下2种方式解决
              // 每次修改状态 都会自动调用this.render 再次渲染组件
              tick () {
                /**
                 * setState((prevState, props) => ({ key: value })) 方法一 返回一个对象列表 函数体要带括号
                     prevState: 当前状态对象
                     props: 当前的props对象
               */
                this.setState(
                  (prevState, props) => ({
                    date: new Date()
                  })
                )

                /**
                 * setState(obj, callback): 方式二
                     obj: 状态的对象列表
                     callback: 状态更新后的回调函数
               */
                this.setState(
                  {
                    date: new Date()
                  },
                  () => {
                    // 回调函数
                  }
                )
              }

              render () {
                return (
                  <div>
                    <h3>{this.state.date.toLocaleTimeString()}</h3>
                  </div>
                )
              }
            }

            const App = () => {
              return (
                <div>
                  <Clock />
                  <Clock />
                  <Clock />
                </div>
              )
            }

            ReactDOM.render(
              // 可以用这种方式引入 自定义组件
              <App />,
              document.querySelector('#box')
            )