如何避免条件切换场景下Child组件的不必要重渲染？

问题根源 #

当condition切换时，React会把两种场景下的<Child/>视为完全不同的组件实例：一个是直接挂载的独立组件，另一个是被<Parent>包裹的子组件。React会卸载旧实例、挂载新实例，这就触发了完整的重渲染——哪怕Child的props/state完全没变化，React.memo也起不到作用，因为它只针对同一实例下的props变化做优化。

可行解决方案 #

方案1：使用React Portal保持Child实例稳定

无需改动Parent组件，核心是让Child始终作为同一个实例存在，仅根据condition切换它挂载的DOM节点：

1. 在HTML入口文件（如index.html）中添加一个额外的DOM容器：

<div id="child-portal-container"></div>

2. 在组件中创建稳定的Child实例，通过Portal切换挂载目标：

import ReactDOM from 'react-dom';

const stableChild = <Child />;
const portalContainer = document.getElementById('child-portal-container');

function YourComponent() {
  if (condition) {
    return ReactDOM.createPortal(stableChild, portalContainer);
  }

  return (
    <Parent>
      {stableChild}
    </Parent>
  );
}

这样无论condition如何变化，Child都是同一个实例，不会被卸载重建，自然避免了不必要的重渲染。

方案2：用useMemo固定Child实例

如果不想额外添加DOM容器，可以用useMemo将Child的实例固定，确保condition切换时引用不变：

import { useMemo } from 'react';

function YourComponent() {
  // 用useMemo创建稳定的Child实例，空依赖数组表示仅初始化一次
  // 若Child依赖外部props，需将对应props加入依赖数组
  const stableChild = useMemo(() => <Child />, []);

  return condition ? stableChild : <Parent>{stableChild}</Parent>;
}

这个方案要求Child的props不会无规律变化（或变化时能正确更新依赖数组），以此保证React复用同一个Child实例，避免卸载重建。

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