组件存入state变量时的渲染机制及子组件状态更新疑问

我想通过在state里存储组件的方式，避免在组件return中写大量条件渲染逻辑，按需更新组件。但我有两个疑问：

1. 存入state的组件（比如示例里的SomeComponent），它的渲染输出是不是从调用setCurrentComponent开始就保持静态？
2. 如果SomeComponent内部的state发生变化，会不会触发相关组件的重渲染？

示例代码：

export const Component = (): JSX.Element => {
  let [currentComponent, setCurrentComponent] = useState<JSX.Element>(<SomeComponent />)

  return (
    <div>
      {currentComponent}
    </div>
  )
}

问题解答： #

• 存入state的组件输出会保持静态：当你把<SomeComponent />赋值给state时，这行代码会立即生成一个React元素对象（相当于组件的“快照”）。之后除非你调用setCurrentComponent传入新的React元素，否则state里的这个对象不会改变，SomeComponent的渲染输出也会停留在生成快照时的状态。哪怕SomeComponent内部的state发生变化，页面上也不会更新——因为React不会再去重新渲染这个已经存在state里的固定元素。

• 子组件内部state变化不会触发预期的重渲染：如果SomeComponent自己的state更新，它会尝试重渲染，但因为它的元素是存在父组件的state快照里，父组件没有重新生成这个元素，所以页面上看不到变化。只有当父组件调用setCurrentComponent更新state时，父组件才会重渲染，此时才会渲染新的组件实例（但旧实例的状态会直接丢失）。

正确的替代方案 #

不要直接存JSX元素，而是存组件的标识（比如字符串、枚举），在渲染时根据标识动态生成组件：

方式一：switch判断

type ComponentKey = 'some' | 'other';

export const ParentComponent = (): JSX.Element => {
  const [currentKey, setCurrentKey] = useState<ComponentKey>('some');

  const renderComponent = () => {
    switch(currentKey) {
      case 'some':
        return <SomeComponent />;
      case 'other':
        return <OtherComponent />;
      default:
        return null;
    }
  };

  return (
    <div>
      {renderComponent()}
      {/* 切换按钮示例 */}
      <button onClick={() => setCurrentKey(currentKey === 'some' ? 'other' : 'some')}>
        切换组件
      </button>
    </div>
  );
}

方式二：对象映射（更简洁）

type ComponentKey = 'some' | 'other';

const componentMap: Record<ComponentKey, JSX.Element> = {
  some: <SomeComponent />,
  other: <OtherComponent />
};

export const ParentComponent = (): JSX.Element => {
  const [currentKey, setCurrentKey] = useState<ComponentKey>('some');

  return (
    <div>
      {componentMap[currentKey]}
      <button onClick={() => setCurrentKey(currentKey === 'some' ? 'other' : 'some')}>
        切换组件
      </button>
    </div>
  );
}

这种方式下，每次父组件渲染时都会动态生成对应的JSX元素，React会正常跟踪组件的内部状态，子组件的state变化会自动触发重渲染，同时也能避免return里堆满条件判断的问题。

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