React中不应直接使用window.alert()，因其阻塞线程、不可定制、不兼容React声明式模型；应改用useState控制自定义警告组件显隐，并增强无障碍支持。
React里不能直接用window.alert()做交互式警告
React组件中调用window.alert()虽然能弹出原生对话框，但会阻塞JS线程、无法自定义样式、不支持键盘焦点管理，且在严格模式或某些测试环境（如Jest）中可能抛出Warning: An update inside a test was not wrapped in act(...)。它本质上和React的声明式更新模型冲突。
实际项目中应避免在事件处理函数里裸写alert("xxx")，尤其当该逻辑可能被多次触发或涉及状态更新时。
用useState + 条件渲染模拟警告框更可控
最轻量又符合React范式的做法是用状态控制一个提示组件的显隐，配合简单CSS实现视觉反馈。这种方式完全可预测、可测试、可动画、可键盘导航。
- 定义
const [showAlert, setShowAlert] = useState(false)和对应消息const [alertMessage, setAlertMessage] = useState("") - 点击按钮时：先
setAlertMessage("操作失败")，再setShowAlert(true) - 警告组件内，确认按钮绑定
onClick={() => setShowAlert(false)}，不调用confirm()或alert() - 务必为警告框添加
role="alertdialog"、aria-modal="true"和aria-labelledby提升可访问性
第三方库如react-toastify适合批量通知场景
如果需要非模态、自动关闭、多位置、带图标和进度条的提示（比如表单提交成功后飘出“✅ 已保存”），react-toastify比手写更稳妥。它的toast.warn()或toast.error()底层不依赖alert()，而是挂载到document.body并管理z-index与生命周期。
注意两点：
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
- 初始化必须在根组件调用
toast.warn()无效果 - 若需用户手动确认（例如“确定删除？”），仍得用自定义Modal组件，
toast不适合阻断式交互
真要拦截用户操作？用useEffect监听状态+confirm()有风险
极少数场景（如离开未保存页面）需调用window.confirm()，React本身不提供钩子拦截路由跳转，得靠useEffect配合beforeunload事件或路由库的useBlocker（React Router v6.4+）。
但要注意：
-
window.confirm()在移动端体验差，iOS Safari可能静默忽略 - 不能在异步回调（如API响应后）里调用，浏览器会视为非用户触发而屏蔽
- 现代SPA中，更推荐用受控表单+脏检查+自定义Modal引导用户主动确认，而非依赖原生
confirm()
真正难的不是弹个框，而是判断什么时候该阻断、什么时候该提示、以及如何让提示不打断用户当前心智流——这些都得结合具体业务路径设计，而不是套一个alert完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
