Time: 20200126
函数组件中使用状态。
类组件写法
import React, { Component } from 'react'
class ClassCounter extends Component {
// rconst 快捷键生成构造函数
constructor(props) {
super(props)
this.state = {
count: 0,
}
}
incrementCount = () => {
this.setState({
count: this.state.count + 1
})
}
render() {
return (
<div>
<button onClick={this.incrementCount}> Count {this.state.count}</button>
</div>
)
}
}
export default ClassCounter
注意类组件的用法。
函数式组件写法
import React, {useState} from 'react'
// RFCE生成函数组件
function HookCounter() {
const [count, setCount] = useState(0)
return (
<div>
<button onClick={() => setCount(count + 1)}> Count {count}</button>
</div>
)
}
export default HookCounter
在事件调用中，因为是函数调用，所以用的是箭头函数。
useState的用法很简单，useState(初始值)，然后返回一个变量和一个控制此变量的函数。
底层机制后面可以看看，先用起来。
关于Hooks的规则
截屏2020-01-26下午5.57.26.png
END.
