React中阻止组件重复（多次）渲染的代码方案是什么？

你的核心问题在于setIsLoading是异步更新，组件重复渲染时，isLoading的状态还没来得及更新，导致API被多次触发。以下是React中应对这类场景的通用解决方案：

1. 使用Ref同步标记请求状态 #

Ref的更新不会触发组件渲染，能同步记录请求是否已发起，完美规避state异步更新的滞后问题。

import { useEffect, useRef, useState } from 'react';

function ExpensiveAPIContent() {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState(null);
  const hasInitiatedRequest = useRef(false); // 同步标记是否已发起请求

  useEffect(() => {
    if (!hasInitiatedRequest.current) {
      hasInitiatedRequest.current = true; // 立即标记为已发起，同步生效
      setIsLoading(true);
      
      // 调用高开销API
      fetch('/your-expensive-api')
        .then(res => res.json())
        .then(result => {
          setData(result);
          setIsLoading(false);
        })
        .catch(err => {
          console.error('API调用失败:', err);
          setIsLoading(false);
        });
    }
  }, []); // 空依赖数组确保组件挂载时仅执行一次

  return (
    <div>
      {isLoading ? <span>加载中...</span> : <div>{JSON.stringify(data)}</div>}
    </div>
  );
}

2. 跟踪依赖变化，避免重复请求 #

如果API调用依赖某个参数（比如id），需要在参数变化时重新请求，但要避免重复渲染导致的重复触发，可以用Ref记录上一次的依赖值：

import { useEffect, useRef, useState } from 'react';

function ExpensiveAPIContent({ itemId }) {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState(null);
  const prevItemId = useRef(null);

  useEffect(() => {
    // 仅当参数变化时发起新请求
    if (itemId !== prevItemId.current) {
      prevItemId.current = itemId;
      setIsLoading(true);
      
      fetch(`/your-expensive-api/${itemId}`)
        .then(res => res.json())
        .then(result => {
          setData(result);
          setIsLoading(false);
        })
        .catch(err => {
          console.error('API调用失败:', err);
          setIsLoading(false);
        });
    }
  }, [itemId]); // 依赖itemId，参数变化时触发

  return (
    <div>
      {isLoading ? <span>加载中...</span> : <div>{JSON.stringify(data)}</div>}
    </div>
  );
}

3. 优化组件渲染，从源头减少重复触发 #

如果组件重复渲染是因为父组件无意义重渲染导致的，可以用React.memo配合useCallback优化：

import { useEffect, useCallback, useState, memo } from 'react';

// 用memo包裹组件，浅比较props，避免无意义重渲染
const ExpensiveAPIContent = memo(({ onDataReady }) => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState(null);

  // 用useCallback封装请求逻辑，避免每次渲染创建新函数
  const fetchData = useCallback(async () => {
    setIsLoading(true);
    try {
      const res = await fetch('/your-expensive-api');
      const result = await res.json();
      setData(result);
      onDataReady?.(result);
    } catch (err) {
      console.error('API调用失败:', err);
    } finally {
      setIsLoading(false);
    }
  }, [onDataReady]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return (
    <div>
      {isLoading ? <span>加载中...</span> : <div>{JSON.stringify(data)}</div>}
    </div>
  );
});

核心思路总结 #

• 用Ref同步记录请求状态或依赖历史值，绕过state异步更新的延迟问题
• 精准设置useEffect的依赖数组，确保仅在必要时触发API调用
• 通过React.memo和useCallback减少组件无意义重渲染，从源头降低重复请求概率

内容的提问来源于stack exchange，提问作者Graeme