React函数组件重渲染后函数执行位置及状态更新疑问

问题1：状态更新触发重渲染后，异步函数的执行流程 #

• 调用setLoading(true)后，不会中断当前doSomething函数的执行，它会直接继续执行console.log(2)，不会从头重新运行console.log(1)。
• React的状态更新是异步调度的：setLoading(true)触发的重渲染会被放入任务队列，等当前同步代码（console.log(2)）执行完毕后才会处理。此时await后的异步任务已经进入等待状态，重渲染会在console.log(2)执行后、5秒等待期间发生，Spinner会正常显示。
• 同理，setLoading(false)触发的重渲染也是异步调度：console.log(3)执行完后调用setLoading(false)，接着会立刻执行console.log(4)，重渲染要等console.log(4)执行完成后才会触发。

问题2：无异步操作时的状态更新合并与Spinner显示 #

• 如果移除代码中的await异步操作，连续执行setLoading(true)和setLoading(false)，React会合并这两次状态更新。因为React在同一批次更新中会对相同状态的多次变更做合并，最终只以最后一次的状态（false）为准触发重渲染，所以Spinner不会显示。
• 这种场景下，整个同步函数执行完成后才会触发一次重渲染，中间的setLoading(true)会被后续的setLoading(false)覆盖，组件只会渲染最终的状态。

问题3：重渲染对原函数调用的影响与执行一致性 #

• 组件重渲染时会重新执行整个函数组件，但这是独立的新函数调用，不会中断正在运行的doSomething函数。原函数会在自己的调用栈中继续执行，和新的组件渲染实例互不干扰。
• 状态一致性方面：每次重渲染时useState返回的是最新状态值，但已经启动的doSomething函数捕获的是它执行时的状态快照。比如第一次调用doSomething时loading为false，即便后续重渲染loading变为true，这个正在运行的doSomething里的loading还是初始的false，不会影响其执行逻辑。

附代码示例 #

export default function IndexComponent() {
    const [loading, setLoading] = useState(false)

    const doSomething = async () => {
        console.log(1)
        setLoading(true) //re-renders and Spinner appears
        console.log(2)
        await new Promise(resolve => setTimeout(resolve, 5000));
        console.log(3)
        setLoading(false)//re-renders and Spinner disappears
        console.log(4)
    }


    return (
        <div>
            <button onClick={doSomething}>Login</button>
            {loading && <div>Spinner</div>}
        </div>
    )
}

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