class组件:
一个最基础的++ -- 的组件,新手搞不明白怎么写class组件的函数时候可以观看以下
import React, { Component } from 'react'
class App extends Component {
constructor(props) {
super(props)
// 定义初始值
this.state = {
data: 1
}
}
// 函数
add(){
//setState(官方)方法进行修改,不然页面不更新数据,this获取
this.setState({
data:++this.state.data
})
}
jian(){
this.setState({
data:--this.state.data
})
}
// 生命周期
componentDidMount(){
// 挂载完成
}
componentDidUpdate(){
// 更新完成
}
componentWillUnmount(){
//卸载完成
}
render() {
const { data } = this.state
return (
<>
<div>
{data}
<button onClick={()=>this.add()}>++</button>
<button onClick={()=>this.jian()}>--</button>
</div>
</>
)
}
}
// 导出组件 不然获取不到 报错
export default App