为什么React中调用setState后无法立即获取最新的状态值？

这个现象是React的正常设计，并非状态更新异常，核心由两个机制导致：

• 状态更新批处理规则：React框架对状态更新做了批量优化设计，调用setClicked这类状态更新函数时，不会立刻修改当前内存中的状态值，而是会先把更新任务加入待处理队列，等到当前事件回调的所有同步代码执行完成后，再统一执行状态更新、触发组件重新渲染。你在setClicked之后立刻打印的操作，属于当前事件回调的同步代码，此时更新任务还没有执行，所以拿到的还是旧值。
• 函数组件的闭包快照特性：函数组件每一次渲染都会生成独立的闭包作用域，当前这次渲染过程中声明的handleClick函数，绑定的是这次渲染对应的clicked状态快照，在本次handleClick的执行周期内，无论调用多少次状态更新函数，访问到的clicked永远是当前这一轮渲染的旧值，只有等组件重渲染之后，新的闭包作用域里才会拿到更新后的状态值。

验证状态更新成功的方法 #

如果你需要获取更新后的状态值，可以用两种方式实现：

1. 直接在组件根作用域打印状态，组件触发重渲染时就会输出最新值：

function LoginComponent(){
  const [clicked, setClicked] = useState(false)
  // 首次渲染输出false，点击触发重渲染后会输出true
  console.log('当前渲染的clicked值：', clicked)
  
  function handleClick(){
    console.log('before', clicked)
    setClicked(true)
    console.log('after', clicked)
  }
  return(
    <a onClick={handleClick}>
      random text
    </a>
  )
}

2. 通过useEffect监听状态变化，状态更新完成后会触发useEffect的回调：

useEffect(() => {
  // clicked变更后触发，点击后会输出true
  console.log('clicked更新完成，最新值为：', clicked)
}, [clicked])

内容的提问来源于stack exchange，提问作者Anon Eemus