React hooks之 获取setState更新后的值

React setState默认是异步，但有时候是同步

如果setState是同步的，意味着每执行一次setState时，都重新vnodediff + dom修改，这对性能来说是极为不好的。

如果setState是异步，则可以把一个同步代码中的多个setState合并成一次进行批量更新。

由React控制内的事件处理函数(onChange、onClick等合成事件)，以及生命周期函数调用setState时表现为异步 。

在setTimeout或者原生事件中，setState是同步的

一般情况:

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  const [count, setCount] = useState(0)

  const handleClick = () => {
    setCount(count + 1)
    console.log(`更新后的值:`, count)
  }
  return (
    <>
      <span>{count}</span>
      <button
        onClick={() => {
          handleClick()
        }}
      >
        加1
      </button>
    </>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

 这样是不能立即拿到更新后的值的

2:正确演示:

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
const App = () => {
  const [count, setCount] = useState(0)

  const handleClick = () => {
    setCount((count) => {
      // 使用箭头函数 并将count 返回
      count++
      console.log(`值1:`, count)
      return count
    })
    console.log(`值2:`, count)
  }
  console.log(`值3:`, count)
  return (
    <>
      <span>{count}</span>
      <button
        onClick={() => {
          handleClick()
        }}
      >
        加1
      </button>
    </>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))