React 组件初始化重复渲染和副作用问题，常见原因包括状态更新逻辑不当、依赖项未正确设置或使用了错误的 Hook。以下是具体解决方法：1. 使用 useEffect 的依赖数组控制副作用执行useEffect 会在每次渲染后执行，但可以通过依赖数组来控制其执行时机。useEffect(() => { // 副作用逻辑 }, [dependency]); // 只有 dependency 变化

本文深入剖析了 React 组件在严格模式下因 useEffect 被设计性调用两次而导致初始化 API 请求重复执行这一常见却棘手的问题，直击传统 isLoading 防重逻辑失效的根本原因——状态更新的异步性与渲染时机错配；进而提出一种简洁、可靠、符合 React 数据流原则的“双 useEffect + 初始渲染标记”模式：第一个 effect 用空依赖数组精准标记挂载完成，第二个 effect 仅响应标记变化来触发唯一一次业务逻辑，既彻底规避开发环境重复请求，又无需 useRef 或复杂封装，语义清晰、兼容并发渲染，让“一次声明，一次执行”真正落地。

本文介绍一种简洁可靠的模式，通过双 useEffect 配合初始渲染标记，精准控制副作用（如 API 调用）仅执行一次，彻底规避开发环境下的重复请求问题。

本文介绍一种简洁可靠的模式，通过双 useEffect 配合初始渲染标记，精准控制副作用（如 API 调用）仅执行一次，彻底规避开发环境下的重复请求问题。

在 React 开发中，尤其在严格模式（Strict Mode）启用的开发环境下，组件的 useEffect 可能被故意调用两次（仅限开发模式，生产构建中不会发生），以帮助开发者提前发现副作用中的不纯行为（如未清理的定时器、未撤销的订阅等）。这虽是调试利器，却常导致本应只执行一次的昂贵操作（例如初始化 API 请求）被意外触发多次，造成数据冗余、状态混乱甚至后端压力。

你尝试用 isLoading 状态做防重判断：

useEffect(() => {
  if (!isLoading) {
    setIsLoading(true);
    fetchUserData(); // ❌ 仍可能被调用两次
  }
}, []);

但该方式失效的根本原因在于：setIsLoading(true) 是异步状态更新，React 不保证其在当前渲染周期内立即生效；当组件因 Strict Mode 触发第二次挂载时，isLoading 仍为 false，条件再次满足，API 再次发起。

✅ 正确解法是分离“标记”与“执行”逻辑：使用两个独立的 useEffect，一个负责在首次挂载后立即将“非初始渲染”标记置为 true，另一个则监听该标记变化，并仅在标记稳定为 false 后执行业务逻辑。这是一种轻量、无副作用、符合 React 数据流原则的模式：

import { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isInitialRender, setIsInitialRender] = useState(true); // 初始标记为 true

  // ✅ 第一 effect：仅在挂载时运行一次（开发模式下会执行两次，但结果一致）
  useEffect(() => {
    setIsInitialRender(false);
  }, []); // 空依赖数组确保仅挂载时触发

  // ✅ 第二 effect：仅当 isInitialRender 变为 false 时触发，且因依赖项固定，后续不会重复执行
  useEffect(() => {
    if (!isInitialRender) {
      setIsLoading(true);
      fetch('/api/user')
        .then(res => res.json())
        .then(data => {
          setUser(data);
        })
        .finally(() => setIsLoading(false));
    }
  }, [isInitialRender]); // 仅响应 isInitialRender 的变化

  return (
    <div>
      {isLoading ? <span>Loading...</span> : <pre>{JSON.stringify(user, null, 2)}