React中Material UI Tabs切换时重复渲染问题求助

问题原因 #

Material UI的Tabs组件默认会预渲染所有TabPanel的内容，切换标签页时只是通过CSS控制显示/隐藏，而非卸载/重新挂载组件。这意味着每次组件重渲染（包括切换标签触发的重渲染），TabPanel内部的代码都会被执行一遍，导致你的函数重复调用。另外，unmountOnEnter、mountOnExit是React Transition Group组件的属性，Material UI Tabs本身并不支持这些配置，所以设置后无效。

解决方案 #

1. 仅渲染当前激活的TabPanel

通过当前选中的标签索引，控制只渲染对应激活状态的TabPanel，未激活的TabPanel会被卸载，再次激活时才重新挂载，这样内部函数只会在挂载时执行一次：

import { useState } from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box sx={{ p: 3 }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

export default function BasicTabs() {
  const [value, setValue] = useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
        <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
          <Tab label="Item One" />
          <Tab label="Item Two" />
          <Tab label="Item Three" />
        </Tabs>
      </Box>
      {/* 只渲染当前激活的TabPanel */}
      {value === 0 && <TabPanel value={value} index={0}>
        {/* 这里的函数只会在挂载时执行一次 */}
        {(() => {
          console.log('Test Log - Tab 1');
          return null;
        })()}
        Item One
      </TabPanel>}
      {value === 1 && <TabPanel value={value} index={1}>
        {(() => {
          console.log('Test Log - Tab 2');
          return null;
        })()}
        Item Two
      </TabPanel>}
      {value === 2 && <TabPanel value={value} index={2}>
        {(() => {
          console.log('Test Log - Tab 3');
          return null;
        })()}
        Item Three
      </TabPanel>}
    </Box>
  );
}

2. 使用useEffect控制函数执行时机

如果需要TabPanel挂载后仅执行一次函数，或者在特定条件下执行，用useEffect包裹函数，并设置合适的依赖项：

• 仅在TabPanel挂载时执行一次：

import { useEffect } from 'react';

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  useEffect(() => {
    // 这里的函数只会在组件挂载时执行一次
    console.log('Test Log');
  }, []); // 空依赖项确保只执行一次

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box sx={{ p: 3 }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

• 在TabPanel激活时执行，切换回来不重复执行：

useEffect(() => {
  if (value === index) {
    // 仅当当前TabPanel激活时执行
    console.log('Test Log - Tab Activated');
  }
}, [value, index]); // 依赖value和index，仅在切换标签时触发检查

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