状态更新触发重渲染时，React函数组件中当前函数调用的执行情况

场景示例 #

用户提供的登录组件代码如下：

export default function Login() {

    const [error, setError] = useState('')
    const router = useRouter()

    type Credentials = {
        email: string
        password: string
    }

    const handleLogin = async (credentials: Credentials) => {

        if (!credentials.email) {
            return setError('email is missing')
        }
        if (!credentials.password) {
            return setError('password is missing')
        }
        try {
            const response: SignInResponse | undefined = await signIn('credentials', { ...credentials, redirect: false })
            if (response?.error && response.error === 'CredentialsSignin') {
                setError('email or password are wrong') // 触发状态更新的代码
            } else {
                setError('')
                router.push('/')
            }
        } catch {
            setError('login failed')
        } finally {
            formik.setSubmitting(false)
        }
    }

    return (...)
}

核心问题解答 #

针对用户提出的具体问题，逐一解析：

1. 状态更新触发重渲染后，当前执行的函数会如何变化？在哪里继续执行？ #

状态更新（比如setError）只会通知React异步调度一次重渲染，不会中断当前正在运行的handleLogin函数。当前函数会继续执行完if分支内的剩余代码，之后按正常流程进入finally块，整个函数的执行路径不会被重渲染打断。

2. 重渲染会导致异步操作重新执行吗？ #

不会。重渲染时组件函数会重新执行，创建一个新的handleLogin函数实例，但之前已经触发的handleLogin调用已经处于执行流程中——它的await signIn已经完成，后续代码是在旧的函数实例中继续执行，和新创建的handleLogin无关。而且signIn已经被await过，不会因为重渲染再次调用。

3. 函数的剩余代码（比如finally块）会被执行吗？ #

会。try/catch/finally的执行逻辑完全独立于React的重渲染流程。只要try块中的代码执行到了setError，不管是否触发重渲染，后续分支代码执行完成后，必然会进入finally块，执行formik.setSubmitting(false)。

4. 重渲染时，为何常量定义的状态不会被重新赋值？ #

因为useState是React提供的状态持久化Hook。当组件重渲染时，const [error, setError] = useState('')这句代码虽然会执行，但useState内部会维护组件的状态快照，它会返回当前最新的状态值，而非初始值''。React会在组件的整个生命周期中保存这个状态，每次重渲染时Hook都会取出当前的状态，所以error常量每次拿到的都是最新状态，不会被重置为初始值。

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