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，写法相对来说简洁一些。