React：如何在元素未渲染时保留DOM Element并后续复用？

我需要根据用户操作隐藏和显示页面元素，出于效率考虑，想了解是否可以保存实际的HTMLElement，并在元素重新显示（且渲染属性未变更）时让React复用/重新插入这些元素。假设这些元素渲染成本极高——例如服务器禁止缓存的大型img标签。

常规实现方式如下：

{ this.props.showImage && <img src="very-large-non-cachable-image.png"/> }

其中showImage会根据用户输入切换状态。问题在于每次隐藏再重新显示图片时，浏览器都必须重新下载图片（因为服务器禁止缓存）。

显然我可以使用ref获取img对应的HTMLElement，但能否让React在元素被移除后重新渲染时复用该HTMLElement？换句话说，能否直接将保存/缓存的HTMLElement重新插入DOM中？

补充说明：我知道这个场景有些特殊，显然可以用display:none替代完全移除img元素，但请假设我必须采用上述方式；实际场景过于复杂无法详细描述，只需知道这些元素每次隐藏/显示时重新渲染成本极高，且我不希望它们在不可见时存在于DOM中（无论是虚拟DOM还是实际DOM），因此display:none并非可行方案。

可以通过手动DOM操作结合React生命周期实现缓存和复用HTMLElement，核心思路是在元素被移除前保存真实DOM节点，重新显示时跳过React的常规渲染流程，直接将缓存节点插入DOM。

方法一：基于Ref和原生DOM API的实现 #

这是生产环境最稳妥的方案，完全依靠React基础API和原生DOM操作，没有依赖不稳定特性：

1. 缓存DOM节点：用组件实例变量保存需要复用的HTMLElement，首次渲染后通过ref获取并缓存。
2. 控制显示/隐藏逻辑：
   • 显示时：若有缓存节点，直接插入到占位容器；若无则让React正常渲染，渲染完成后缓存节点。
   • 隐藏时：从DOM中移除节点并保存到缓存，只留空的占位容器供后续插入。
3. 处理属性变更：如果元素属性（如src）发生变化，清空缓存让React重新渲染新元素。

示例代码：

class CachedImage extends React.Component {
  constructor(props) {
    super(props);
    this.containerRef = React.createRef();
    // 用于缓存真实DOM节点
    this.cachedElement = null;
  }

  componentDidUpdate(prevProps) {
    const { showImage } = this.props;
    const container = this.containerRef.current;

    // 从隐藏切换到显示
    if (showImage && !prevProps.showImage) {
      if (this.cachedElement) {
        // 复用缓存的节点
        container.appendChild(this.cachedElement);
      }
    } 
    // 从显示切换到隐藏
    else if (!showImage && prevProps.showImage) {
      if (container.firstChild) {
        // 保存节点到缓存并从DOM移除
        this.cachedElement = container.removeChild(container.firstChild);
      }
    }
    // 属性变更时清空缓存（比如src变化）
    else if (prevProps.src !== this.props.src) {
      this.cachedElement = null;
    }
  }

  componentDidMount() {
    // 首次渲染完成后缓存节点
    if (this.props.showImage) {
      this.cachedElement = this.containerRef.current.firstChild;
    }
  }

  componentWillUnmount() {
    // 组件卸载时清空缓存，避免内存泄漏
    this.cachedElement = null;
  }

  render() {
    const { showImage, src } = this.props;
    return (
      <div ref={this.containerRef}>
        {/* 只有没有缓存时才让React渲染新元素 */}
        {showImage && !this.cachedElement && (
          <img src={src} alt="Large non-cacheable image" />
        )}
      </div>
    );
  }
}

方法二：使用React不稳定API（不推荐生产环境） #

React提供了unstable_renderSubtreeIntoContainer，可以直接将组件渲染到指定DOM节点并保留已有DOM。但该API标记为不稳定，未来可能被移除或修改，仅适合临时场景测试。

关键注意事项 #

• 避免React与手动DOM冲突：一旦手动缓存节点，要确保React不会再对该节点进行渲染更新，否则会导致DOM不一致。
• 内存泄漏防范：组件卸载时必须清空缓存的DOM节点，避免残留引用。
• 属性变更处理：若元素属性发生变化，必须清空缓存，让React重新渲染新元素，否则会显示旧内容。

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