如何实现React组件在切换展示逻辑时保持挂载不卸载？

我写了以下代码：

{condition ? (
  <Bar/>
) : (
  <Foo/>
)}

<Bar/>组件内部实现：

return (
  <>
   <A/>
   <B/>
   <Foo/> 
   <C/>
  </>
)

实际需求只是在<Foo/>前后添加一组平级组件，但切换condition时，整个<Foo/>都会被卸载重新挂载。我尝试了下面的写法但没成功：

{condition ? (
  <Bar>
   {memoizedFoo}
  </Bar>
) : (
  memoizedFoo
)}

这正是我想要的效果但无法实现。请问该如何实现或重构代码？注意：<Bar/>包含大量副作用与Promise逻辑，且仅向<Foo/>传递一个prop。

方案1：重构Bar为插槽式组件（推荐） #

直接把Bar改成接收children的组件，保留原有副作用与Promise逻辑，同时把需要传给Foo的prop通过React.cloneElement注入到子组件上。这样Foo作为子组件传入，切换condition时不会被卸载重构。

修改后的Bar组件：

function Bar({ children, fooRequiredProp }) {
  // 保留原有的副作用、Promise逻辑

  return (
    <>
      <A/>
      <B/>
      {/* 注入需要传递给Foo的prop */}
      {React.cloneElement(children, { requiredProp: fooRequiredProp })}
      <C/>
    </>
  )
}

使用时的代码：

{condition ? (
  <Bar fooRequiredProp={yourPropValue}>
    <Foo />
  </Bar>
) : (
  <Foo />
)}

这种方式完全解耦Bar和Foo的硬编码关系，Foo始终是同一个实例，切换condition时不会触发卸载，同时保留了Bar的所有原有逻辑。

方案2：用固定key+React.memo维持Foo实例 #

如果暂时不想修改Bar的结构，可以给两个分支里的Foo设置相同的key，并用React.memo包裹Foo，让React识别为同一个组件实例。

const MemoizedFoo = React.memo(Foo);

// 渲染部分
{condition ? (
  <Bar />
) : (
  <MemoizedFoo key="fixed-foo-instance" />
)}

// 同时修改Bar内部的Foo，加上相同的key
function Bar() {
  // 原有副作用、Promise逻辑
  return (
    <>
      <A/>
      <B/>
      <MemoizedFoo key="fixed-foo-instance" />
      <C/>
    </>
  )
}

这种方式的局限性在于Bar和Foo仍有耦合，后续如果Foo有变更，Bar也需要同步修改，仅适合临时快速修复场景。

方案3：通过显式控制显示状态保留Foo挂载 #

如果Bar的结构完全无法修改，可以让Foo始终保持挂载，通过样式或prop控制显示/隐藏：

function FooContainer() {
  const [condition, setCondition] = useState(false);

  return (
    <>
      {/* 外部Foo：condition为false时显示，true时隐藏 */}
      <Foo style={condition ? { display: 'none' } : {}} />
      {/* Bar：condition为true时显示，内部Foo隐藏 */}
      {condition && (
        <Bar>
          {/* 需要给Bar内部的Foo添加隐藏逻辑，比如通过prop控制 */}
          <Foo hide />
        </Bar>
      )}
    </>
  )
}

// 同时修改Foo组件，支持hide prop控制显示
function Foo({ hide }) {
  if (hide) return null;
  // 原有Foo逻辑
}

这种方式Foo始终处于挂载状态，只是通过视觉或逻辑隐藏，适合无法重构Bar的极端场景，但会增加不必要的渲染开销，需根据业务场景判断是否适用。

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