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