问题
state在class和function中有什么区别吗?下面两段代码中,1s内点击事件各触发5次会有什么表现吗?
类组件
class HooksDemoRule extends React.PureComponent {
state = {
count: 0
}
increment = () => {
console.log('---setState---')
setTimeout(() => {
this.setState({
count: this.state.count + 1
})
}, 3000)
}
render() {
return <div>
<div className={
`${
classPrefix}-title`}>---useState && setState---</div>
<div className={
`${
classPrefix}-text`}>setState 当前值:{
this.state.count}</div>
<button onClick={
this.increment}>+1</button>
<IKWebviewRouterLink
ikTo='home'
className={
`${
classPrefix}-to-home`}
><p>返回</p></IKWebviewRouterLink>
</div>
}
}
函数组件
const SecondDemo = memo(() => {
const [count, setCount] = useState(0)
const increment = () => {
console.log('---useState---')
setTimeout(() => {
setCount(count + 1)
}, 3000)
}
return <div>
<div className={
`${
classPrefix}-title`}>---useState && setState---</div>
<div className={
`${
classPrefix}-text`}>useState 当前值:{
count}</div>
<button onClick={
increment}>+1</button>
<IKWebviewRouterLink
ikTo='rule'
className={
`${
classPrefix}-to-home`}
><p>返回</p></IKWebviewRouterLink>
</div>
})
最终结果
在类组件中,页面上的数字依次从0增加到5;
在函数组件中,页面上的数字只会从0增加到1。
原因
在类组件中,通过this.state引用count,每一次setTimeout的时候都能通过引用拿到上一次的最新count,所以最后加到5。但是在函数组件中,每一次更新都是重新执行当前函数,1s内setTimeout里读取的count实际上都是初始值0,所以最后只加到1。
简单来说,类组件的state依赖上一次state,函数组件的state是重新执行当前函数。