五（2）、React之类组件 ------ 2019-11-01

1、类组件

/**
 * 类组件:
 * 创建一个类，让其继承React.Component或者React.PureComponent
 * 此类被称为类组件
 *
 * 特点：
 * （1）类组件又称为动态组件；
 */

import React from "react";

export default class Clock extends React.Component {
  // 调取组件，创建类的一个实例，首先执行 constructor，
  // 把属性、上下文等信息传递进来
  constructor(props) {
    super();
    // 定义初始状态 
    this.state = {
      time: new Date().toLocaleString()
    };
  }
  render() {
    return <div>{this.state.time}</div>;
  }
  componentDidMount() {
    setInterval(() => {
      this.setState({
        time: new Date().toLocaleString()
      });
    }, 1000);
  }
}

2、类组件的状态管理：

/**
 * React中基于状态来管理动态组件（类组件）：
 * （1）设置初始状态值；
 * （2）修改状态：setState修改组件状态及重新渲染；
 * （3）setState接收两个值作为参数：{要修改的值}、回调函数
 */