react 18 的 strictmode 在开发模式下会自动双渲染组件以检测副作用问题，导致 useeffect 执行两次、路由相关弹窗（如 alert）重复触发；关闭 strictmode 即可解决，但更推荐保留并正确处理副作用逻辑。
react 18 的 strictmode 在开发模式下会自动双渲染组件以检测副作用问题，导致 useeffect 执行两次、路由相关弹窗（如 alert）重复触发；关闭 strictmode 即可解决，但更推荐保留并正确处理副作用逻辑。
在你提供的代码中，<messages></messages> 组件每次被路由匹配时都会执行 alert('This is the Messages component!!!!!!!!')，而你在 App 组件内将其定义为内联函数：
const Messages = () => {
alert('This is the Messages component!!!!!!!!');
};
⚠️ 这本身已存在严重问题：Messages 是一个无返回值的函数组件（未返回 JSX），且每次渲染都重新定义、立即执行 alert —— 它甚至不是合法的 React 组件，而是一个副作用“陷阱”。
更关键的是，该行为在开发环境被放大了：React 18 默认启用 <react.strictmode></react.strictmode>（通常包裹在 index.js 的 root.render() 中），它会在开发模式下对组件进行双重挂载/卸载，用于提前暴露不纯副作用（如未清理的定时器、重复的 API 调用、意外的 alert 等）。因此 useEffect(() => { setTest('test') }, []) 和 <messages></messages> 的 alert 均会触发两次。
✅ 正确解决方案分两步：
1. 修复组件结构（根本性修复）
不要将带副作用的逻辑写在组件声明内部，尤其避免在渲染函数中直接调用 alert。应将其改为标准函数组件，并将副作用移入 useEffect（若需）：
// ✅ 正确写法：Messages 是一个合法组件，alert 仅在挂载时执行一次（受 StrictMode 影响仍可能两次，见下一步）
const Messages = () => {
useEffect(() => {
alert('This is the Messages component!!!!!!!!');
// 注意：生产环境请用 toast 或日志替代 alert，避免阻断交互
}, []);
return <div>Messages Page</div>; // 必须返回有效 JSX
};
2. 处理 StrictMode 的双触发（推荐保留 StrictMode）
不建议简单删除 <strictmode></strictmode> —— 它是 React 提供的重要开发工具，能帮你发现内存泄漏、未清理副作用等隐患。正确做法是：
- 确保所有
useEffect具备可中断性（如取消请求、清除定时器）； - 对于仅需执行一次的初始化逻辑（如身份校验），可结合
ref避免重复执行：
useEffect(() => {
const abortController = new AbortController();
const checkAuth = async () => {
// 模拟异步检查
await fetch('/api/me', { signal: abortController.signal });
setTest('test');
};
checkAuth();
return () => abortController.abort(); // 清理
}, []);
若坚持临时禁用 StrictMode（仅限学习调试），请检查 index.js，移除或注释掉 <react.strictmode></react.strictmode> 包裹：
// ❌ 原始（常见）写法（导致双渲染）：
root.render(
<react.strictmode><provider store="{store}"><app></app></provider></react.strictmode>
);
// ✅ 临时调试可改为：
root.render(
<provider store="{store}"><app></app></provider>
);
? 总结：
-
alert在路由组件中直接调用属于反模式，应封装进useEffect并确保组件返回合法 JSX； - StrictMode 的双触发是设计使然，是“发现问题”而非“制造问题”，应适应而非规避；
- 生产构建（
npm run build）中 StrictMode 自动失效，双触发不会出现； - 最佳实践：保留 StrictMode + 正确编写可清理的副作用 + 使用专业 UI 提示（如
react-toastify）替代alert。
