e.preventDefault与e.stopPropagation行为及React useState更新疑问

问题1：调用e.stopPropagation方法是否会阻断当前函数后续代码的执行？ #

• 答案是不会。e.stopPropagation()的作用仅为阻止当前DOM事件向上冒泡触发父元素的同类型事件监听，不会中断当前正在执行的handleSubmit函数的后续代码。你控制台输出中setValidated调用、后续打印语句都正常执行，也可以验证该结论。

问题2：执行setValidated(true)后，handleSubmit末尾打印validated仍为false的原因是什么？ #

• 这是React状态更新的固有特性决定的：useState返回的状态更新函数是异步批量更新的，调用setValidated(true)只是把状态更新请求加入React的更新队列，不会立即修改当前渲染上下文里的validated值。
• 同一渲染周期内，函数组件内部的state值是固定的，当前handleSubmit运行在本次渲染周期中，访问到的validated始终是本次渲染初始化时的false，更新后的值要等下一次组件渲染时才会通过useState返回。

问题3：handleSubmit执行完成后第50行打印再次触发、且validated为true的原因是什么？ #

• 调用setValidated(true)触发了组件的重新渲染，函数组件重新渲染的本质就是整个组件函数从头重新执行一次。第50行的打印语句写在组件函数的顶层作用域，每次渲染都会执行，因此handleSubmit执行完成触发重渲染后，该打印会再次执行。
• 重渲染时useState会返回更新后的最新状态值，因此此时打印的validated为true。

补充开发提示：如果需要在validated状态更新完成后执行后续逻辑，可以通过useEffect监听该状态：

import { useEffect } from 'react'

// 放在组件内部
useEffect(() => {
  // 此处可以拿到更新后的validated值执行逻辑
  console.log('validated已更新为：', validated)
}, [validated])

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