React中有两种组件写法,一种是class组件,一种是函数组件。
1.类组件写法
import React from "react";
class ClickCounter extends React.Component {
constructor() {
super()
// 定义 state
this.state = {
count: 0
}
// 绑定this
this.clickHandler = this.clickHandler.bind(this)
}
render() {
return <div>
<p>你点击了{this.state.count}次</p>
<button onClick = {this.clickHandler}>点击</button>
</div>
}
clickHandler() {
// 修改 state
this.setState({
count: this.state.count + 1
})
}
}
export default ClickCounter
2.函数式组件写法
利用useState
- useState(0) 传入初始值,返回数组[state, setState]
- 通过state获取值
- 通过setState(1)修改值
import React, { useState } from "react";
function ClickCounter() {
// 数组的解构
const [count, setCount] = useState(0)
return <div>
<p>你点击了{count}多少次</p>
<button onClick = {() => setCount(count + 1)}>点击</button>
</div>
}
export default ClickCounter