首页 > 网页制作 >React useEffect 空依赖数组与状态更新执行时机解析

React useEffect 空依赖数组与状态更新执行时机解析

来源：互联网 2026-07-15 19:41:11

React中useEffect空依赖数组在严格模式开发环境下会执行两次，导致状态更新叠加（如计数从0变为2）。生产环境仅单次执行。这是由于严格模式模拟组件卸载再挂载。可通过初始化直接设值或使用useRef保持引用稳定来避免歧义。

这篇文章就来聊聊 React 中 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 value of count: {count}
长期稳定更新的攒劲资源： >>>点此立即查看<<<
;}

控制台输出：count: 0 → count: 0 → count: 2，界面上最终显示 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 value of count: {count}
;}

方案二：使用 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 value of count: {count}
;}

关键总结

useEffect([], ...) 在 Strict Mode 下会执行两次（开发专用），这是设计特性，并非 bug；
setState 是异步且批处理的，但其更新必然在下次渲染生效，不存在“丢失更新”的情况；
依赖数组 [count] 的 effect 会在 count 每次变更后触发，包括 Strict Mode 引起的额外变更；
生产环境无 Strict Mode，效果符合预期（单次执行 → count = 1）；
调试时，可以先检查是否处于 Strict Mode，并善用 console.log 结合 React DevTools 的 Highlight Updates 功能，精准定位渲染时机。

理解这一机制，才是真正掌握 React 副作用模型与状态同步逻辑的关键所在。

侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述