React Native子组件重复渲染求助：避免重复触发后端请求

问题根源 #

1. 内部组件重复定义：WifiModuleSection 定义在父组件内部，每次父组件重渲染（比如isShown变化、横屏切换）时，都会创建全新的组件类型。React会判定这是不同组件，卸载旧实例并挂载新实例，导致子组件WifiModuleControls的useEffect重新执行，触发接口请求。
2. 缓存优化未生效：即便尝试过React.memo、useCallback，但组件定义本身不稳定的话，这些优化起不到作用。

具体修复步骤 #

1. 稳定WifiModuleSection组件定义

把组件移到父组件外部，避免每次父重渲染都重新创建组件类型：

// 移到Parent组件外部
const WifiModuleSection = ({title, wifiModule, wifiSection, t, i18n}) => {
    return (
      <View style={styles.sectionWifiModuleContainer}>
          <View>
            {...}
          </View>
          <WifiModuleControls wifiModule={wifiModule} t={t} i18n={i18n} />
        </View>
    );
};

export default function Parent({}) {
  const [isShown, setIsShown] = React.useState(false);
  {...}

  return (
    <View>
      {WifiModules.map(wifiModule => {
        return (
          <View style={{display: isShown ? 'flex' : 'none'}} key={wifiModule.id}>
            <WifiModuleSection
              title={wifiModule.name}
              wifiModule={wifiModule}
              wifiSection={wifiSection}
              t={t}
              i18n={i18n}
            />
          </View>
        );
      })}
      {...}
    </View>
  );
}

如果因依赖父组件内部变量无法移出，用useMemo缓存组件定义：

export default function Parent({}) {
  const [isShown, setIsShown] = React.useState(false);
  {...}

  const WifiModuleSection = React.useMemo(() => {
    return ({title, wifiModule, wifiSection}) => {
      return (
        <View style={styles.sectionWifiModuleContainer}>
          <View>
            {...}
          </View>
          <WifiModuleControls wifiModule={wifiModule} t={t} i18n={i18n} />
        </View>
      );
    };
  }, [t, i18n]); // 依赖t和i18n，确保引用稳定

  return (
    <View>
      {WifiModules.map(wifiModule => {
        return (
          <View style={{display: isShown ? 'flex' : 'none'}} key={wifiModule.id}>
            <WifiModuleSection
              title={wifiModule.name}
              wifiModule={wifiModule}
              wifiSection={wifiSection}
            />
          </View>
        );
      })}
      {...}
    </View>
  );
}

2. 给子组件添加React.memo

对组件props做浅比较，避免无意义的重渲染：

const WifiModuleControls = React.memo(({wifiModule, t, i18n}) => {
  {...}

  const handleReadData = async () => {
    // 原有接口请求逻辑
  };

  useEffect(() => {
    handleReadData();
  }, []); // 空依赖确保只在首次挂载执行

  {...}
});

export default WifiModuleControls;

3. 确保传递的props引用稳定

如果t或i18n是动态生成的（比如每次父重渲染返回新对象/函数），用useMemo/useCallback缓存：

export default function Parent({}) {
  {...}
  // 缓存t函数
  const cachedT = React.useCallback(t, [i18n]);
  // 缓存i18n对象（根据实际依赖调整）
  const cachedI18n = React.useMemo(() => i18n, [i18n.language]);

  return (
    <View>
      {WifiModules.map(wifiModule => {
        return (
          <View style={{display: isShown ? 'flex' : 'none'}} key={wifiModule.id}>
            <WifiModuleSection
              title={wifiModule.name}
              wifiModule={wifiModule}
              wifiSection={wifiSection}
              t={cachedT}
              i18n={cachedI18n}
            />
          </View>
        );
      })}
      {...}
    </View>
  );
}

4. 给列表项添加唯一key

父组件map返回的元素必须加唯一key，帮助React识别列表项变化，避免不必要的组件卸载/挂载：

{WifiModules.map(wifiModule => {
  return (
    <View style={{display: isShown ? 'flex' : 'none'}} key={wifiModule.id}>
      <WifiModuleSection
        title={wifiModule.name}
        wifiModule={wifiModule}
        wifiSection={wifiSection}
      />
    </View>
  );
})}

验证效果 #

修改完成后，父组件状态变化时：

• WifiModuleSection组件类型不再频繁变更，子组件不会被强制卸载/挂载
• React.memo会浅比较WifiModuleControls的props，仅当引用变化时才重渲染
• handleReadData仅在子组件首次挂载时执行一次，不会因父组件重渲染触发重复请求

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