setState 异步问题

[981377660LMT]

interface IAHooksProps {}

const AHooks: React.FC<IAHooksProps> = props => {
  const [first, setFirst] = useState(0)
  setTimeout(() => {
    for (let i = 0; i < 200; i++) {
      setFirst(first+1) // state不是函数，则会异步批量更新(类似jobQueue，只会触发一次useEffect)
    }
  }, 1000)

  useEffect(() => {
    console.log('first', first)
  }, [first])

  return <></>
}

interface IAHooksProps {}

const AHooks: React.FC<IAHooksProps> = props => {
  const [first, setFirst] = useState(0)
  setTimeout(() => {
    for (let i = 0; i < 200; i++) {
      setFirst(i => i + 1) // state是函数，则会同步更新(触发多次useEffect)
    }
  }, 1000)

  useEffect(() => {
    console.log('first', first)
  }, [first])

  return <></>
}