Hook的setxxx中使用回调函数的作用

在使用hook函数式组件时遇到setXxx中使用回调函数的情况。

import React, { FC, useEffect, useState } from 'react'
import { Button } from 'antd'
interface IProps {}
const Test1: FC<IProps> = () => {
  const [count, setCount] = useState<number>(0)
  useEffect(() => {
    console.log('count', count)
  }, [count])

  // console.log('count---', count)
  const autoBatchProcessing = () => {
    setCount((count) => count + 1)
    setCount((count) => count + 1)
    console.log('使用回调函数', count)
  }
  const noAutoBatchProcessing = () => {
    setCount(count + 1)
    setCount(count + 1)
    console.log('不使用回调函数', count)
  }
  return (
    <div>
      <Button type="primary" onClick={autoBatchProcessing}>
        使用回调函数
      </Button>
      <Button type="primary" onClick={noAutoBatchProcessing}>
        不使用回调函数
      </Button>
    </div>
  )
}
export default Test1

阅读文档发现，如果新的state需要通过使用之前的state计算得到，比如state+1或state-1等情况，那么就可以将回调函数当做参数传递给setState。该回调函数将接收之前的state，并返回一个更新后的值。

上述代码运行后

 

 使用回调函数会使用之前的state计算，不使用回调函数使用他们都是用同一个值相加，比如当count加为6时点击不使用回调函数会同时使用6来加，最后结果为7，使用回调函数则会一个加完另一个函数取到加完后的结果继续加，最后为8