为什么useEffect中调用setState后，读取到的状态值没有即时变化？

这是React函数组件开发里大家基本都会碰到的情况，背后的逻辑拆成三层就能讲透：

• 首先是组件渲染的快照机制
  你通过useState解构拿到的isTrue，从来不是指向React内部状态存储的动态引用，而是每次组件渲染时，根据当次的状态值生成的固定变量快照。第一次组件挂载时，状态初始值是false，那整轮渲染流程里用到的所有isTrue都会被固定成这个值，后续再怎么调用setState，都不会改动已经生成好的这个快照。
• 其次是空依赖useEffect的闭包捕获特性
  写了空依赖[]的useEffect回调，只会在第一次组件DOM挂载完成后执行一次，这个回调是一个标准的闭包，它捕获的就是第一次渲染时生成的isTrue快照（也就是值为false的那个固定变量），和后续更新的状态值没有任何绑定关系。
• 最后是React状态更新的异步批处理规则
  你在effect回调里执行setIsTrue(true)的时候，React不会立刻同步修改内部存储的状态值，更不会打断当前正在运行的同步代码流——它只会把这个更新操作记到待执行队列里，等当前所有同步代码（包括你写的那行console.log(isTrue)）全部执行完，才会触发新一轮的组件渲染。
  等新一轮渲染启动时，整个组件函数会重新执行一遍，这时候才会根据最新的状态值true生成新的isTrue快照，后续的代码、JSX、新的effect回调拿到的才是更新后的值。

这里很容易踩的认知误区是：很多人刚用hooks的时候会以为setState是同步生效的操作，实际上它和class组件里的setState行为完全一致，从来不会在调用当下就修改当前执行上下文里的变量值，只会排到更新队列里等时机到了再触发渲染。

如果想验证这个逻辑，有两个很简单的方式：

• 新增一个把isTrue作为依赖的useEffect，第一次执行会打印初始的false，等setIsTrue触发重渲染后，这个effect会再次执行，打印出更新后的true：

  useEffect(() => {
    console.log("带依赖捕获的isTrue值：", isTrue)
  }, [isTrue])
  

• 如果需要在同一段同步代码里就拿到更新后的最新状态值，可以搭配useRef使用：ref的current属性是可变的、不受渲染快照限制，你可以在调用setState时手动把新值同步到ref上，后续打印ref的current就能拿到最新值。

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