react中如何定义Class类组件以及hook函数组件

import { Component, useState } from "react"

// class类组件
class ClassModule extends Component {
    // 1.定义状态变量
    state = {
        text: '绫小路 欢迎来到实力至上主义的教室',
        count: 66
    }
    // 2.定义事件回调修改状态数据
    setText = () => {
        this.setState({
            text: '一之濑 欢迎来到实力至上主义的教室',
        })
    }
    // 3.渲染页面的地方
    render() {
        return (
            <div>
                {this.state.text}
                <button onClick={this.setText}>{this.state.count}</button>
            </div>
        )
    }
}


// hook函数式定义组件
// function ClassModule() {
//     // 1.定义状态变量
//     const [text, setText] = useState('绫小路 欢迎来到实力至上主义的教室')
//     const [count, setCount] = useState(66)
//     // 2.定义事件回调修改状态数据
//     function kanno() {
//         setText('一之濑 欢迎来到实力至上主义的教室')
//     }
//     // 3.渲染页面的地方
//     return (
//         <div>
//             {text}
//             <button onClick={kanno}>{this.state.count}</button>
//         </div>
//     )
// }

export default ClassModule

说明：两种定义组件的方式目前都是可以使用，calss类组件适用于老项目，目前官方推荐使用hook函数式组件；hook函数式组件可以避免使用this，写法相对来说简洁一些。