如何避免useState更新时React子组件重复渲染？

你的核心问题是每次组件渲染都会直接调用fetchData(10)——不管是父组件更新触发子组件重渲染，还是子组件自身setCount触发重渲染，都会重新执行这个函数，导致多个循环实例同时运行。下面是针对性的解决方案：

方案1：用useEffect控制执行时机+状态锁避免重复触发 #

这是React中控制组件生命周期逻辑的标准方式，能确保fetchData只在组件挂载时执行一次，同时防止循环被重复启动。

修改后的子组件代码：

import { useState, useEffect } from "react";

export default function Child() {
  const [count, setCount] = useState(0);
  const [isRunning, setIsRunning] = useState(false); // 标记循环是否正在运行

  async function fetchData(startId) {
    if (isRunning) return; // 已有循环在运行，直接终止当前调用
    setIsRunning(true);
    
    let currentId = startId;
    while (currentId < 100) {
      console.log(currentId);
      setCount(currentId);
      currentId += 1;
      // 加延迟避免同步循环瞬间完成，React批量更新导致看不到count变化
      await new Promise(resolve => setTimeout(resolve, 100));
    }
    
    setIsRunning(false);
  }

  // 仅在组件首次挂载时执行一次fetchData
  useEffect(() => {
    fetchData(10);
    // 组件卸载时终止循环，避免内存泄漏
    return () => {
      setIsRunning(false);
    };
  }, []); // 空依赖数组确保只执行一次

  return (
    <>
      {count}
    </>
  );
}

关键说明 #

• useEffect空依赖数组：确保fetchData只在组件挂载时执行，父组件更新触发子组件重渲染时不会重复调用。
• isRunning状态锁：即使意外触发fetchData，也会因为锁的存在直接返回，避免多个循环实例同时运行。
• 循环内的延迟：原代码是同步循环，会瞬间执行完所有逻辑，React会批量更新状态，你看不到count的逐步变化；实际业务中如果是接口请求，可替换为你的异步调用逻辑。

方案2：配合React.memo阻止父组件导致的不必要重渲染 #

如果父组件自身有状态更新（比如按钮点击改变父组件状态），会触发子组件无意义重渲染，此时可以用React.memo优化：

父组件（示例） #

import Child from "../components/child";
import { useState } from "react";

const Home = () => {
  const [parentCount, setParentCount] = useState(0);

  return (
    <div>
      <button onClick={() => setParentCount(prev => prev + 1)}>父组件更新</button>
      <Child />
    </div>
  );
};
export default Home;

子组件（添加React.memo） #

import { useState, useEffect, memo } from "react";

function Child() {
  // 内部逻辑同方案1
  const [count, setCount] = useState(0);
  const [isRunning, setIsRunning] = useState(false);

  async function fetchData(startId) {
    if (isRunning) return;
    setIsRunning(true);
    
    let currentId = startId;
    while (currentId < 100) {
      console.log(currentId);
      setCount(currentId);
      currentId += 1;
      await new Promise(resolve => setTimeout(resolve, 100));
    }
    
    setIsRunning(false);
  }

  useEffect(() => {
    fetchData(10);
    return () => setIsRunning(false);
  }, []);

  return <>{count}</>;
}

// 用memo包裹，仅在props变化时重渲染子组件
export default memo(Child);

关键说明 #

• React.memo是高阶组件，会对组件props做浅比较，若props无变化则跳过重渲染，避免父组件自身状态更新导致子组件无意义重渲染。
• 如果父组件需要给子组件传递函数，要配合useCallback缓存函数，避免每次父组件渲染生成新函数导致memo失效。

额外修正点 #

你原代码的fetchData存在语法错误：while循环的闭合括号位置错误，id = id +1写在循环外会导致死循环，上面的代码已修正。

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