多标签页与动态表单项的表单渲染优化

1. 仅渲染当前激活的标签页内容 #

当前代码通过filter+map处理标签内容，虽然只返回激活标签的内容，但可以进一步简化逻辑，确保非激活标签完全不渲染，减少初始渲染的组件数量：

修改TabContent组件：

const TabContent = ({ activeTab, tabs }) => {
  // 直接定位当前激活的标签数据，避免冗余数组操作
  const activeTabData = useMemo(() => tabs.find(tab => tab.id === activeTab), [activeTab]);

  return activeTabData ? (
    <UITabContent key={activeTabData.id} value={activeTabData.id} activeTabNum={activeTab}>
      <FieldRenderContent fields={activeTabData.fieldsList} />
    </UITabContent>
  ) : null;
};

2. 缓存表单项组件，避免不必要重渲染 #

用React.memo包裹FieldRenderer和FieldRenderContent组件，当传入的属性引用未变化时，组件不会触发重渲染：

// 缓存FieldRenderer
const FieldRenderer = React.memo(({ field }) => {
  switch (field.type) {
    case 'input':
      return <FormInput {...field} />;
    case 'select':
      return <FormSelect {...field} isClearable={true} />;
    case 'inputNumber':
      return <FormInputNumber {...field} />;
    default:
      return null;
  }
});

// 缓存FieldRenderContent
const FieldRenderContent = React.memo(({ fields }) => {
  return (
    <>
      {fields.map((field) => (
        <FieldRenderer key={field.name} field={field} />
      ))}
    </>
  );
});

3. 稳定表单字段数据的引用 #

确保FORM_LIST、SCHOOL_FIELDS等常量定义在组件外部（当前代码已实现），避免每次组件渲染时重新创建这些对象，导致子组件因引用变化触发重渲染。如果后续需要动态生成字段，建议用useMemo缓存字段数组。

4. 移除不必要的匿名函数 #

Tabs组件中，onChangeTab的匿名函数可以直接替换为传入的onTabChange，减少每次渲染时创建新函数的开销：

const Tabs = ({ tabs, activeTab, onTabChange }) => {
  return (
    <UITabs orientation="vertical" onChangeTab={onTabChange} outline>
      {tabs.map((tab) => (
        <UITab key={tab.id} id={tab.id} label={tab.title}>
          {tab.title}
        </UITab>
      ))}
    </UITabs>
  );
};

5. 延迟加载非激活标签页的表单项 #

如果初始渲染时所有标签页的表单项都被预处理（即使不可见），可以在标签页第一次激活时才渲染表单项，进一步降低初始渲染压力：

修改TabContent组件：

const TabContent = ({ activeTab, tabs }) => {
  const activeTabData = useMemo(() => tabs.find(tab => tab.id === activeTab), [activeTab]);
  // 标记当前标签页是否已加载
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    // 切换到当前标签时，标记为已加载
    setIsLoaded(true);
  }, [activeTab]);

  if (!activeTabData) return null;

  return (
    <UITabContent key={activeTabData.id} value={activeTabData.id} activeTabNum={activeTab}>
      {isLoaded ? <FieldRenderContent fields={activeTabData.fieldsList} /> : <div>加载中...</div>}
    </UITabContent>
  );
};

6. 优化useMemo的依赖数组 #

由于FORM_LIST是组件外部的常量，其引用不会变化，因此TabContent中useMemo的依赖可以只保留activeTab，避免不必要的重新计算：

const activeTabData = useMemo(() => tabs.find(tab => tab.id === activeTab), [activeTab]);

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