react中类组件的写法

核心：1. 类组件必须要继承React.Component

　　　2. 类组件中的render()方法，返回值是一个jsx

// class 组件

import "./App.css";

import React from "react";

// 创建类组件
class App extends React.Component {
  constructor(props) {
    //类组件中默认初始化
    super(props);
    this.state = {
      // 在state中存放的是动态数据
      //相对于vue data=》存放动态数据
      num: 10,
    };

      // 不在state中存放的是固定数据
    this.msg = "你好同学";    // this指向当前实例
  }

  // es7 写法
  // 生命周期 组件加载完毕 可以做dom操作
  componentDidMount() {
    console.log("组件加载完毕");
  }

  // 定义方法
  changNum = () => {
    this.setState((state) => {    // setState 用于修改数据
      return {
        num: state.num + 1,
      };
    }); //相当于 useState
  };

  // 必须有render()方法，且返回值是一个jsx
  render() {
    return <div>
      <div>App{this.state.num}</div>
      <h2>{this.msg}</h2>
      <button onClick={()=>this.changNum()}>修改数据</button>   
    </div>;
  }
}

export default App;