使用switch case渲染组件为何会反复卸载与重新挂载？

核心原因 #

你遇到的组件无故卸载重挂载问题，根源在于内部定义的SwitchComponent组件引用不稳定：

• 你把SwitchComponent定义在了父组件的渲染函数内部，每次父组件重新渲染（比如store中cardValue变化、父组件自身状态更新），这个函数都会被重新创建。React会将每次创建的SwitchComponent视为完全不同的组件类型，因此每次都会卸载旧的组件实例，再重新挂载新的——哪怕里面返回的子组件（比如ComponentA）没有变化，也会被强制卸载重挂载。
• 而直接用JSX条件判断的方式，是在父组件的JSX中直接返回元素，React会通过元素的类型和key做diff对比：只有当条件变化导致返回的组件类型改变时，才会触发卸载重挂载；如果条件不变，父组件其他渲染触发时，子组件只会做内部更新，不会被卸载。

解决方法 #

方法1：将SwitchComponent移到父组件外部定义 #

让它成为独立组件，避免每次父组件渲染时重新创建函数引用：

// 移到父组件外部，确保组件引用稳定
function SwitchComponent({ cardValue }) {
  switch (cardValue) {
    case 'A':
      return <ComponentA />;
    case 'B':
      return <ComponentB />;
    default:
      return null;
  }
}

// 父组件
function ParentComponent() {
  const cardValue = useSelector(state => state.object.value);
  
  return (
    <SwitchComponent cardValue={cardValue} />
  );
}

方法2：用立即执行函数替代内部组件 #

如果不想拆分组件，可以用IIFE在JSX中直接执行switch逻辑，避免创建新的组件类型：

function ParentComponent() {
  const cardValue = useSelector(state => state.object.value);
  
  return (
    <>
      {(() => {
        switch (cardValue) {
          case 'A':
            return <ComponentA />;
          case 'B':
            return <ComponentB />;
          default:
            return null;
        }
      })()}
    </>
  );
}

方法3：确保useSelector选择器精准 #

如果修改store中object的其他属性时父组件也触发了渲染，说明你的选择器可能订阅了整个state.object而非仅value字段。要保持选择器精准，只订阅需要的字段，避免不必要的父组件渲染：

// 正确：仅订阅value字段，只有value变化时才触发父组件渲染
const cardValue = useSelector(state => state.object.value);

// 错误：订阅整个object，object的任意属性变化都会触发父组件渲染
// const cardValue = useSelector(state => state.object).value;

额外说明 #

如果是不同组件类型的切换（比如ComponentA和ComponentB之间切换），卸载重挂载是React的正常行为，因为它们是完全不同的组件；但如果是同一组件类型仅props变化时出现卸载重挂载，就需要检查组件引用是否稳定、key是否正确。

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