React API调用引用相等致无限重渲染的优化方案咨询

你遇到的无限重渲染本质是React useEffect依赖浅比较机制导致的：每次setCgData传入新的接口返回数组时，即使内容和之前完全一致，数组的引用地址也发生了变化，React判定依赖项变更就会重新执行effect，effect里再次触发状态更新，最终形成死循环。

你当前用cgData.length作为依赖的写法属于临时取巧，虽然能跑，但存在明确缺陷：

• 当接口返回列表长度不变但内容更新时（比如加密货币价格波动、排名调整但总条目数不变），effect不会重新触发，页面无法拿到最新数据
• 首次加载时会触发两次无效请求：组件挂载时第一次执行effect，拿到数据后cgData.length从初始值0变为接口返回的固定长度（通常是100），依赖项变化会再次触发fetch请求。

根据你的业务需求选对应实现即可，都是React官方推荐的标准写法：

1. 仅需组件挂载时拉取一次数据 #

这是最符合你当前需求的方案，直接给useEffect传空依赖数组，代表effect仅在组件挂载阶段执行一次，不会随状态更新触发：

const [cgData, setCgData] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

useEffect(() => {
  const fetchData = async () => {
    setLoading(true);
    try {
      const response = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&sparkline=false');
      if (!response.ok) throw new Error('接口请求异常');
      const jsonData = await response.json();
      setCgData(jsonData);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  fetchData();
  // 空依赖 = 仅挂载时执行
}, []);

注：React 18+开发环境开启严格模式时，挂载阶段会重复执行一次effect做逻辑校验，这是正常的开发环境行为，生产环境不会触发。如果需要规避开发环境的重复请求，可以加AbortController做请求取消，或者用请求标记位拦截重复调用。

2. 需要定时轮询更新最新数据 #

如果要实现价格自动刷新，不要把cgData相关状态加入依赖数组，直接在空依赖的effect中定义轮询逻辑，记得在卸载时清除定时器避免内存泄漏：

useEffect(() => {
  const fetchData = async () => {
    // 复用上面的请求逻辑即可
  };
  // 首次挂载立即拉取数据
  fetchData();
  // 每30秒自动拉取最新数据
  const pollTimer = setInterval(fetchData, 30000);
  // 组件卸载时清除定时器
  return () => clearInterval(pollTimer);
}, []);

3. 请求依赖外部可变参数 #

如果后续需要加切换法币、切换排序规则的功能，只把这些可控的基础类型外部参数加入依赖数组即可，绝对不要把接口返回的cgData本身加入依赖：

const [vsCurrency, setVsCurrency] = useState('usd');
const [sortOrder, setSortOrder] = useState('market_cap_desc');

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=${vsCurrency}&order=${sortOrder}&sparkline=false`);
    const jsonData = await response.json();
    setCgData(jsonData);
  };
  fetchData();
  // 仅当筛选条件变化时重新拉取
}, [vsCurrency, sortOrder]);

如果后续数据量变大，需要避免内容完全一致时的无意义重渲染，可以在setCgData前做关键字段比对，比如比对返回数据的最新更新时间、总市值等核心字段，一致就不触发状态更新即可。

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