1-6 React 状态

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css'
import './index.css'

class Clock extends React.Component {
    constructor(props) {
        super(props);
        // 状态（数据）--> view
        //构造函数初始化数据，将需要改变的数据初始化到 state 中
        this.state = {
            time: new Date().toLocaleTimeString()
        }
    }
    render() {
        //----------------------------------------------------
        // constructor 函数不会重复调用，因为 react 会认为是同一个组件，不会重复渲染
        // render 函数会循环调用，所以设置 time 的表达式写再 render 里面
        // this.state = {
        //     time: new Date().toLocaleTimeString()
        // }
        //----------------------------------------------------
        return (
          <div>
              <h1>当前的时间是：{ this.state.time }</h1>
          </div>
        )
    }

    //生命周期函数，组件渲染完成时的函数
    componentDidMount() {
        setInterval(() => {
            //切勿直接修改 state 数据，重新渲染内容需要 setState
            //通过 this.setState 修改完数据后，并不会立即修改 DOM 里面的内容， react 会在
            //这个函数内容所有设置状态改变后，统一对比虚拟 DOM 对象，然后再统一修改，提升性能
            this.setState({//-------注意！！！-------
                time: new Date().toLocaleTimeString()
            })
        }, 1000);
    }
}

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