React显示/隐藏组件无法保留内部状态，如何优雅重构代码？

重构后的代码会触发组件卸载重挂载，核心是两个问题：

1. 每次render时都在tabToRegionMap中重新创建所有区域组件的实例
2. 动态调整了组件的渲染位置：隐藏的组件被统一放到hidden-tab容器内，选中的组件被移到容器外，React Diff算法判定组件树结构变化，直接销毁旧组件、创建新组件，导致内部状态丢失。

你最初的版本能保留状态的核心逻辑是：四个组件的渲染顺序、位置永远固定，仅通过CSS控制显隐，没有发生卸载/挂载操作，优化时只要保留这个核心逻辑即可。另外你重构代码里还有拼写错误：eruope应为europe，这个问题也会导致欧洲标签切换异常。

完全保留原有功能，同时简化代码，不需要做状态提升或引入第三方状态管理：

// 常量抽离到组件外部，避免每次render重复生成
const REGION_CONFIG = [
  { tabKey: 'africa', Comp: Africa },
  { tabKey: 'europe', Comp: Europe },
  { tabKey: 'america', Comp: America },
  { tabKey: 'asia', Comp: Asia },
]

// 组件render方法
render() {
  const { selectedTab } = this.state
  return (
    <div>
      {REGION_CONFIG.map(({ tabKey, Comp }) => (
        <div 
          key={tabKey}
          className={selectedTab === tabKey ? '' : 'hidden-tab'}
        >
          <Comp />
        </div>
      ))}
    </div>
  )
}

原有样式可以直接复用：

.hidden-tab {
  display: none;
}

方案优势 #

• 组件渲染顺序、位置固定，仅通过CSS控制显隐，不会触发卸载重挂载，内部状态完全保留
• 无冗余重复代码，后续新增区域组件仅需在REGION_CONFIG中新增一行配置即可，可维护性更高
• 改造成本极低，不需要调整现有组件的任何内部逻辑

内容的提问来源于stack exchange，提问作者craig-nerd