如何向组件外的HOC动态传值并避免重复初始化引发的模板重渲染

现有实现问题分析 #

现有代码存在两个核心问题：

1. 全局初始化的Template组件是固定的，既无法响应组件内部selectedTemplate的切换逻辑，也无法接收组件内的动态数据
2. 如果直接把TemplateLoader（HOC）调用放到组件内部，每次渲染都会生成全新的组件实例，导致不必要的全量重渲染

实现方案 #

1. 基础方案（固定模板，仅需传递动态数据） #

如果不需要切换模板，只是要给固定模板传递组件内的动态数据，直接通过props传参即可，无需重复调用HOC，配合memo规避无效重渲染：

import { useState, memo } from 'react';

const templateName = 'product-edit.panel.general-details';
// HOC仅在模块初始化时调用一次，生成的组件原生支持接收props
const Template = memo(TemplateLoader(templateName, true));

const Settings = (): JSX.Element => {
  const [selectedTemplate, setSelectedTemplate] = useState('product-edit.panel.general-details');
  // 自定义动态数据
  const [dynamicData, setDynamicData] = useState({});

  return (
    <Layout
      className='product-edit-page-edit-view'
      siderLeft={
        <NavigationTreeWrapper>
          <NavigationTree selectedItem={selectedTemplate} onItemClicked={setSelectedTemplate} />
        </NavigationTreeWrapper>
      }
      {/* 直接通过props传递动态数据，memo会在props无变化时跳过重渲染 */}
      content={<Template data={dynamicData} customProp="xxx" />}
    />
  );
};

export default Settings;

2. 进阶方案（支持切换模板，缓存已加载模板） #

如果需要根据selectedTemplate切换不同模板，新增全局缓存层，避免相同模板重复初始化HOC：

import { useState, useMemo, memo } from 'react';

// 全局缓存已初始化的模板组件，同一个模板只会调用一次HOC
const templateCache: Record<string, React.ComponentType> = {};
const getTemplate = (templateName: string) => {
  if (!templateCache[templateName]) {
    templateCache[templateName] = memo(TemplateLoader(templateName, true));
  }
  return templateCache[templateName];
};

const Settings = (): JSX.Element => {
  const [selectedTemplate, setSelectedTemplate] = useState('product-edit.panel.general-details');
  const [dynamicData, setDynamicData] = useState({});

  // 仅当selectedTemplate变化时才会重新获取模板组件
  const CurrentTemplate = useMemo(() => {
    return getTemplate(selectedTemplate);
  }, [selectedTemplate]);

  return (
    <Layout
      className='product-edit-page-edit-view'
      siderLeft={
        <NavigationTreeWrapper>
          <NavigationTree selectedItem={selectedTemplate} onItemClicked={setSelectedTemplate} />
        </NavigationTreeWrapper>
      }
      content={<CurrentTemplate data={dynamicData} />}
    />
  );
};

export default Settings;

方案优势 #

• 同一个模板对应的HOC只会调用一次，不会重复初始化
• 动态数据通过props传递，完全响应组件内部状态变化
• 配合memo和useMemo，仅当模板标识/传递给模板的props发生变化时才会触发重渲染，无额外性能损耗

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