react中类组件中的state与函数组件中的state的区别

问题

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是重新执行当前函数。