React：Class类组件基础结构

类组件说明

Class类组件只是编写组件的一种方式。在React中依旧支持，适合于一些老项目，现在React官方不再推荐这种写组件的方式，而是推荐函数组件。
https://zh-hans.react.dev/reference/react/Component#componentdidmount

• 类组件就是通过js中的类来组织组件的代码
• 通过类属性state定义状态数据
• 通过setState方法来修改状态数据
• 通过render来写UI模版（JSX语法）

示例

import { Component } from "react"

class Counter extends Component {
  // 定义状态变量
  state = {
    count: 0
  }
  // 事件回调来修改状态数据
  setCount = () => {
    // 修改状态数据
    this.setState({
      count: this.state.count + 1
    })
  }
  // UI模版(JSX)
  render() {
    return <button onClick={this.setCount}>{this.state.count}</button>
  }
}

function App() {
  return (
    <>
      <Counter />
    </>
  )
}

export default App

初始展示：

点击按钮会自增：