React切换标签页时如何阻止组件重复渲染？

核心原因：Tabs组件的卸载机制 #

你遇到的问题本质不是memo失效，而是Geist UI的Tabs组件默认会卸载未激活标签对应的面板组件。当切换标签时，之前的P1QueryTab/P2QueryTab会被完全卸载，切换回来时会重新挂载——这不是“重复渲染”，而是组件的重新创建，memo是用来优化相同props下的重复渲染的，对组件卸载后重新挂载的场景完全无效，自然自定义比较器也不会被调用。

具体修复步骤 #

1. 启用Tabs的面板缓存（优先方案） #

查看Geist UI Tabs的官方文档，确认是否有保留未激活面板的配置项（比如类似keepAlive、preserveContent这类属性）。如果有，开启该属性后，未激活的标签面板会被隐藏而非卸载，此时memo就能正常工作——只要props没有变化，组件就不会重复渲染。

2. 手动实现组件缓存（如果Geist UI无内置支持） #

如果Geist UI不支持面板缓存，你可以用useRef手动缓存组件实例，避免切换时卸载：

// 在CommonContainer中修改
function CommonContainer(props: Props) {
  const [activeTab, setActiveTab] = useState("p1");
  // 缓存两个标签组件的实例
  const tabRefs = useRef({
    p1: <P1QueryTab meta={props.metaList[0]} question={props.question}/>,
    p2: <P2QueryTab meta={props.metaList[0]} question={props.question}/>,
  });

  return (
    <Card width="100%">
      <Card.Content>
        <Tabs value={activeTab} onChange={setActiveTab}>
          <Tabs.Item label="P2" value="p2">
            {tabRefs.current.p2}
          </Tabs.Item>
          <Tabs.Item label="P1" value="p1">
            {tabRefs.current.p1}
          </Tabs.Item>
        </Tabs>
      </Card.Content>
    </Card>
  );
}

这样两个组件会一直存在于DOM中，切换时只是显示/隐藏，不会触发卸载和重新挂载，memo的优化就能生效。

3. 修复子组件的useEffect依赖漏洞 #

你的P1QueryTab和P2QueryTab的useEffect中用到了props.meta，但依赖数组里只写了props.question，这会导致meta变化时，useEffect不会重新执行，属于React钩子的依赖缺失问题，需要补充：

// P1QueryTab和P2QueryTab中修改useEffect依赖
useEffect(() => {
  // ... 原有逻辑
}, [props.question, props.meta])

补充说明 #

你提到不想用CSS隐藏方案，但上面的缓存方案本质是让组件始终挂载，只是通过Tabs组件控制显示状态，和单纯的CSS隐藏不同，不会有额外的性能负担（只要组件本身的渲染开销不大）。

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