如何传递组件作为属性，使传入的组件不会在每次重渲染时重新初始化？

首先得把问题的根源理清楚：

• 你的LegacyComponent期望customComponent接收的是组件类/函数（因为它内部会把CustomComponent当作组件直接渲染：<CustomComponent />），但你直接传<MyCustomComponent prop1={...} />是一个React元素（本质是对象），这就会触发类型错误。
• 而传箭头函数() => <MyCustomComponent .../>时，每次父组件重渲染都会生成一个全新的函数，React会把这个新函数识别成新组件，因此会卸载旧组件、重新挂载新的，导致组件每次都要重新初始化。

要解决这个矛盾，我们需要同时满足两个要求：给LegacyComponent传一个稳定的组件类型，同时让这个组件能动态获取最新的props并自然更新，不会重新初始化。我推荐用React Context来实现，这是最符合React设计模式的方案，步骤如下：

1. 创建Context存储动态props #

首先定义一个Context，用来传递MyCustomComponent需要的动态参数：

import React, { createContext, useMemo, useContext } from 'react';

// 创建一个Context，初始值可以设为空对象
const MyCustomComponentContext = createContext({});

2. 生成记忆化的稳定包装组件 #

用useMemo创建一个不会被重复创建的包装组件，它会从Context中读取最新的props并渲染MyCustomComponent：

const ParentComponent = ({ prop1, prop2 }) => {
  // 用useMemo记忆这个组件，空依赖数组保证它永远不会被重新创建
  const MemoizedCustomComponent = useMemo(() => {
    return function WrappedComponent() {
      // 从Context中获取最新的props
      const componentProps = useContext(MyCustomComponentContext);
      return <MyCustomComponent {...componentProps} />;
    };
  }, []);

  // ... 其他逻辑
};

3. 用Context.Provider传递最新props #

最后用Context的Provider包裹LegacyComponent，把最新的prop1和prop2传进去：

const ParentComponent = ({ prop1, prop2 }) => {
  // ... 上面的MemoizedCustomComponent代码

  return (
    <MyCustomComponentContext.Provider value={{ prop1, prop2 }}>
      <LegacyComponent customComponent={MemoizedCustomComponent} />
    </MyCustomComponentContext.Provider>
  );
};

为什么这个方案能解决问题？ #

• 组件稳定不重新初始化：MemoizedCustomComponent通过useMemo记忆化，空依赖数组保证它不会因为父组件重渲染而被重新创建，所以LegacyComponent每次拿到的都是同一个组件函数，React不会卸载旧组件。
• props变化时自然更新：当prop1或prop2变化时，Context的value会更新，WrappedComponent会通过useContext自动获取到最新的props，让MyCustomComponent自然重渲染，而不是重新初始化。

其他可选方案（不推荐） #

如果你不想用Context，也可以用useRef结合forceUpdate的方式，但这种写法比较绕，需要手动管理状态更新，不如Context优雅。比如：

const ParentComponent = ({ prop1, prop2 }) => {
  const propsRef = useRef({ prop1, prop2 });
  const [, setDummy] = useState(0);
  const forceUpdate = () => setDummy(prev => prev + 1);

  // 当props变化时更新ref并触发包装组件更新
  useEffect(() => {
    propsRef.current = { prop1, prop2 };
    forceUpdate();
  }, [prop1, prop2]);

  const MemoizedCustomComponent = useMemo(() => {
    return function WrappedComponent() {
      const [, setLocalDummy] = useState(0);
      
      // 监听父组件的更新信号，触发本地重渲染（这里需要手动绑定逻辑，很繁琐）
      useEffect(() => {
        const updateLocal = () => setLocalDummy(prev => prev + 1);
        updateLocal();
        return () => {};
      }, []);
      
      return <MyCustomComponent {...propsRef.current} />;
    };
  }, []);

  return <LegacyComponent customComponent={MemoizedCustomComponent} />;
};

这种方法需要手动处理更新逻辑，容易出问题，所以还是优先用Context方案。

总结 #

核心思路就是：给LegacyComponent传递一个稳定的组件类型（通过useMemo记忆化），同时用Context来传递动态props，让组件能获取到最新参数并自然更新，避免每次都重新初始化。

备注：内容来源于stack exchange，提问作者user29124046