本文深入解析 useEffect 在空依赖数组下为何看似“执行两次”、为何 count 最终显示为 2 而非 1，并厘清 useState 异步更新、渲染周期与 effect 触发顺序之间的关键关系。
本文深入解析 `useeffect` 在空依赖数组下为何看似“执行两次”、为何 `count` 最终显示为 2 而非 1，并厘清 `usestate` 异步更新、渲染周期与 effect 触发顺序之间的关键关系。
在 React 开发中，初学者常被如下代码的行为困扰：
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
setCount((c) => c + 1);
}, []); // 空依赖数组 → 仅在挂载后执行一次
useEffect(() => {
console.log('count:', count);
}, [count]);
return <p>value of count: {count}</p>;
}
控制台输出：count: 0 → count: 0 → count: 2，界面上最终显示 2 —— 这显然违背直觉：setCount 只调用一次，为何 count 变成 2？答案不在 bug，而在 Strict Mode 的开发模式行为 与 effect 执行时机的精确理解。
? 根本原因：Strict Mode 下的“双渲染”（非生产环境）
自 React 18 起，create-react-app 和 Vite 默认启用 Strict Mode。它会在开发阶段故意对组件进行两次挂载和卸载，以帮助检测副作用不纯问题。这意味着：
- 初始渲染（count = 0）→ 执行 useEffect([]) → setCount(0 + 1) → 触发重渲染；
- Strict Mode 再次模拟挂载：组件重新初始化（count 重置为 0），再次执行 useEffect([]) → setCount(0 + 1) → 再次触发重渲染；
- 最终 count 经历两次 +1，从 0 → 1 → 2。
⚠️ 注意：该行为仅存在于开发环境（Strict Mode），生产构建中严格遵循单次挂载逻辑，count 将稳定为 1。
? 执行时序详解（开发模式）
| 阶段 | count 值 | 触发动作 | 说明 |
|---|---|---|---|
| 初始渲染 | 0 | 显示 value of count: 0 |
useEffect([]) 尚未执行 |
| 第一次 useEffect([]) 执行 | 0（闭包捕获） | setCount(0 + 1) → 排队更新 | count 仍为 0，但更新已调度 |
| 第一次重渲染 | 1 | 显示 1，同时 useEffect([count]) 因 count 变为 1 而触发 → 输出 count: 1 | ✅ 此处原文答案有误：实际应输出 1，而非 0 或 2；若观察到 0 和 2，正说明 Strict Mode 干预 |
| Strict Mode 模拟重挂载 | 0（新实例） | 再次执行 useEffect([]) → setCount(0 + 1) | 导致第二次更新 |
| 最终渲染 | 2 | 显示 2，useEffect([count]) 触发 → 输出 count: 2 | 两次更新叠加 |
✅ 验证方式：在 index.js 中临时移除
包裹，运行后将稳定输出 count: 1 和界面显示 1。
✅ 正确写法：避免歧义与副作用耦合
若目标是“初始化时设置 count = 1 并立即响应”，推荐以下两种健壮方案：
方案一：初始化即设值（推荐）
function App() {
const [count, setCount] = useState(1); // 直接初始化为 1
useEffect(() => {
console.log('count:', count); // 稳定输出 1
}, [count]);
return <p>value of count: {count}</p>;
}
方案二：使用 useRef 记录是否已初始化
function App() {
const [count, setCount] = useState(0);
const initialized = useRef(false);
useEffect(() => {
if (!initialized.current) {
setCount(c => c + 1);
initialized.current = true;
}
}, []);
useEffect(() => {
console.log('count:', count);
}, [count]);
return <p>value of count: {count}</p>;
}
? 关键总结
- useEffect([], ...) 在 Strict Mode 下会执行两次（开发专用），这是设计特性，非 bug；
- setState 是异步且批处理的，但其更新必然在下次渲染生效，不存在“丢失更新”；
- 依赖数组 [count] 的 effect 会在 count 每次变更后触发，包括 Strict Mode 引起的额外变更；
- 生产环境无 Strict Mode，效果符合预期（单次执行 → count = 1）；
- 调试时优先检查是否处于 Strict Mode，并善用 console.log 结合 React DevTools 的 Highlight Updates 功能定位渲染时机。
理解这一机制，是掌握 React 副作用模型与状态同步逻辑的重要一步。
