如何在多页面复用同一React组件实例（仅初始化一次）

针对你需要复用地图组件实例、跨页面保留状态的需求，以下是两种可行的实现思路：

方案1：全局单例容器 + 状态控制显示 #

核心思路是把需要复用的组件在App最外层初始化一次，通过全局状态控制它的显示位置与可见性，全程复用同一个实例。

实现步骤 #

1. 创建全局上下文管理组件实例与显示状态

// MapSingletonContext.js
import React, { createContext, useContext, useState, useRef } from 'react';
import MapComponent from './MapComponent';

const MapSingletonContext = createContext();

export function MapSingletonProvider({ children }) {
  // 保存唯一的地图组件实例
  const mapRef = useRef(null);
  // 控制地图的显示配置：可见性、尺寸、位置
  const [mapConfig, setMapConfig] = useState({
    visible: false,
    containerStyle: {}
  });

  return (
    <MapSingletonContext.Provider value={{ mapRef, mapConfig, setMapConfig }}>
      {/* 全局挂载地图组件，默认隐藏，通过样式控制显示逻辑 */}
      <MapComponent 
        ref={mapRef} 
        style={[
          { position: 'absolute', pointerEvents: mapConfig.visible ? 'auto' : 'none' },
          mapConfig.containerStyle,
          !mapConfig.visible && { opacity: 0 }
        ]} 
      />
      {children}
    </MapSingletonContext.Provider>
  );
}

export function useMapSingleton() {
  return useContext(MapSingletonContext);
}

2. 在App入口包裹全局Provider

// App.js
import { MapSingletonProvider } from './MapSingletonContext';
import Navigation from './Navigation';

export default function App() {
  return (
    <MapSingletonProvider>
      <Navigation />
    </MapSingletonProvider>
  );
}

3. 在目标页面中控制地图显示

// Screen1.js
import { useMapSingleton } from './MapSingletonContext';
import { useLayoutEffect, useRef } from 'react';
import { View } from 'react-native';

export default function Screen1() {
  const { setMapConfig } = useMapSingleton();
  const mapContainerRef = useRef(null);

  useLayoutEffect(() => {
    // 页面挂载时，设置地图显示在当前页面的指定位置
    setMapConfig({
      visible: true,
      containerStyle: {
        width: '100%',
        height: 400,
        top: 100, // 根据页面布局调整位置
        left: 0
      }
    });

    // 页面卸载时隐藏地图，由下一个页面接管显示
    return () => {
      setMapConfig(prev => ({ ...prev, visible: false }));
    };
  }, []);

  return (
    <View style={{ flex: 1, padding: 20 }}>
      {/* 地图会覆盖在这个容器的位置上 */}
      <View ref={mapContainerRef} style={{ width: '100%', height: 400, backgroundColor: '#eee' }} />
      {/* 其他页面内容 */}
    </View>
  );
}

这种方式下，地图组件仅初始化一次，所有页面通过修改样式控制它的显示状态，完全复用原有实例的状态与渲染内容。

方案2：修复react-native-portal的用法 #

如果你之前尝试过react-native-portal但无效，大概率是因为在每个页面重新创建了组件实例。正确的做法是把复用的组件全局挂载，页面仅引用而不重新创建。

实现步骤 #

1. 全局挂载复用组件到PortalHost

// App.js
import { PortalHost, Portal } from '@gorhom/portal';
import Navigation from './Navigation';
import MapComponent from './MapComponent';

// 仅创建一次地图组件实例
const sharedMap = <MapComponent />;

export default function App() {
  return (
    <>
      <Navigation />
      <PortalHost>
        {/* 给全局组件分配唯一标识 */}
        <Portal name="shared-map">{sharedMap}</Portal>
      </PortalHost>
    </>
  );
}

2. 在页面中引用全局Portal内容

// Screen2.js
import { Portal } from '@gorhom/portal';
import { View } from 'react-native';

export default function Screen2() {
  return (
    <View style={{ flex: 1 }}>
      {/* 直接引用全局的shared-map组件，复用同一实例 */}
      <Portal name="shared-map" />
      {/* 其他页面内容 */}
    </View>
  );
}

这种方式相当于把同一个组件实例“移动”到当前页面的位置显示，不会重新初始化，状态完全保留。

为什么之前的方法无效？ #

• useContext/useMemo：useContext仅传递状态，组件本身仍会在每个页面重新实例化；useMemo只能缓存渲染结果，页面切换时组件会被卸载，重新挂载时仍会创建新实例。
• react-navigation传实例：导航参数会被序列化，无法传递组件实例这类复杂对象，导致失效。
• react-native-portal误用：如果在每个页面内渲染Portal内容，会重复创建实例，正确做法是全局挂载内容，页面仅引用。

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