React MUI Tab切换触发重渲染 子组件状态丢失问题

MUI 实验室组件包提供的默认TabPanel实现逻辑为仅挂载匹配当前激活value的面板内容，其余非激活面板会直接从React组件树卸载，而非通过CSS样式隐藏。
切换标签时，非激活标签对应的TabPanel整段会被卸载，内部挂载的独立子组件自然也会被销毁，组件内存中存储的state、表单输入值、临时交互状态全部会被回收；切回原标签时组件是重新挂载的，所有状态都会回到初始定义的默认值，这就是切换标签后复选框选中状态被重置的核心原因。
所谓「不拆分子组件就不会异常」是测试时的认知偏差：如果把表单内容直接写在默认TabPanel内部，切换时一样会被卸载重置，只有当内容写在TabPanel外层、或者使用了不卸载子节点的TabPanel实现时，状态才会保留。

根据业务场景选择对应方案即可：

方案1：开启TabPanel的保留挂载属性（改造成本最低） #

MUI v5+版本的TabPanel原生支持keepMounted属性，开启后非激活面板不会被卸载，仅通过display: none隐藏，组件内部状态会完整保留，不需要修改任何业务子组件代码。
改造示例：

// 仅需要给每个TabPanel加keepMounted属性即可
<TabPanel value="1" keepMounted>
  <Deneme />
</TabPanel>
<TabPanel value="2" keepMounted>Item Two</TabPanel>
<TabPanel value="3" keepMounted>Item Three</TabPanel>

如果是低版本MUI不支持该属性，可以通过自定义样式实现同等效果：

import TabPanel from '@mui/lab/TabPanel';
import { styled } from '@mui/material/styles';

const KeepMountedTabPanel = styled(TabPanel)(() => ({
  '&[hidden]': {
    display: 'none',
  },
}));

替换原有的TabPanel组件即可。

• 适用场景：标签页数量少（5个以内）、单面板内容复杂度不高，需要快速改造保留状态
• 优点：改造成本极低，原有业务子组件的代码完全不需要改动
• 缺点：所有标签面板首屏就会完成挂载，标签数量多、单面板内容很重时会增加初始内存占用

方案2：状态上提，由父级Tab容器托管子组件状态 #

把子组件内部维护的表单值、交互状态全部提升到父级LabTabs组件中维护，通过props把状态值和更新方法传递给子组件。哪怕子组件随TabPanel切换被卸载，状态因为保存在父组件中不会丢失，重新挂载时把状态通过props传入即可还原之前的操作内容。
父组件改造参考：

export default function LabTabs() {
  const [tabValue, setTabValue] = React.useState('1');
  // 托管子组件的所有状态
  const [denemeForm, setDenemeForm] = React.useState({
    someChecked: false,
    innerValue: '1'
  })

  const handleTabChange = (event: React.SyntheticEvent, newValue: string) => {
    setTabValue(newValue);
  };

  return (
    <Box sx={{ width: '100%', typography: 'body1' }}>
      <TabContext value={tabValue}>
        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
          <TabList onChange={handleTabChange} aria-label="lab API tabs example">
            <Tab label="Item One" value="1" />
            <Tab label="Item Two" value="2" />
            <Tab label="Item Three" value="3" />
          </TabList>
        </Box>
        <TabPanel value="1">
          {/* 把状态和更新方法通过props传给子组件 */}
          <Deneme formState={denemeForm} setFormState={setDenemeForm} />
        </TabPanel>
        <TabPanel value="2">Item Two</TabPanel>
        <TabPanel value="3">Item Three</TabPanel>
      </TabContext>
    </Box>
  );
}

子组件改造参考：

export default function Deneme({ formState, setFormState }) {
  // 移除内部独立的state定义，直接使用父组件传入的状态
  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
    setFormState(prev => ({...prev, innerValue: newValue}));
  };

  const someChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
    setFormState(prev => ({...prev, someChecked: event.target.checked}));
  };

  return (
         <FormControlLabel
                    label="Some Check Name"
                    control={
                        <Checkbox
                            checked={formState.someChecked}
                            onChange={someChanged}
                            inputProps={{ "aria-label": "primary checkbox" }}
                        />}
                />
  );
}

• 适用场景：标签页数量多、单面板内容重，不想承担全量挂载的内存开销
• 优点：性能更好，非激活面板不会占用组件树内存
• 缺点：需要调整状态的维护位置，子组件和父组件的耦合度会提升

方案3：接入全局状态管理 #

如果子组件的状态需要跨多页面共享、或者组件嵌套层级很深传props成本高，可以把状态放到Zustand、Redux、React Context这类全局状态容器中，效果和状态上提一致：组件卸载后状态依然存在全局存储中，重新挂载时直接从全局状态取数据渲染即可。

• 适用场景：子组件状态需要跨多个页面共享、组件嵌套层级过深传props成本高
• 优点：状态维护灵活，不依赖父子组件层级
• 缺点：需要引入额外的状态管理逻辑，简单场景下使用会增加代码复杂度

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