无需使用react-ang，如何高效将Angular组件集成到React？

针对你的需求，以下是几种不依赖react-ang的集成方案，重点关注性能表现：

1. 封装为Web Component（性能最优） #

将Angular组件编译为原生Web Component，React可直接调用，完全基于浏览器标准，避免第三方库的额外抽象开销。

实现步骤 #

• 在Angular项目中启用Web Component支持：借助@angular/elements包，将目标组件转换为自定义元素，示例代码：

  import { createCustomElement } from '@angular/elements';
  import { MyAngularComponent } from './my-angular.component';
  import { Injector } from '@angular/core';
  
  // 创建自定义元素
  const MyAngularElement = createCustomElement(MyAngularComponent, { injector: this.injector });
  // 注册到浏览器自定义元素注册表
  customElements.define('my-angular-comp', MyAngularElement);
  

• 编译打包Angular组件为独立的JS文件，在React项目中引入该文件。
• 在React组件中直接使用自定义元素：

  function ReactWrapper() {
    const handleAngularEvent = (e) => {
      console.log('Angular组件事件触发:', e.detail);
    };
  
    return (
      <my-angular-comp 
        prop1="react传递的属性"
        onAngularEvent={handleAngularEvent}
      />
    );
  }
  

性能优化要点 #

• Angular组件启用OnPush变更检测策略，减少不必要的重渲染。
• React传递props时遵循自定义元素命名规范（驼峰属性转短横线式），避免属性冗余传递。
• 尽量将Angular组件的依赖打包为tree-shakable的资源，减小体积。

2. 手动挂载Angular实例（性能可控，定制性强） #

直接在React组件中初始化Angular组件实例，挂载到指定DOM节点，完全控制生命周期和状态同步，避免第三方库的额外开销。

实现示例 #

import { useEffect, useRef, useCallback } from 'react';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './path-to-angular/app.module';
import { MyAngularComponent } from './path-to-angular/my-angular.component';

function AngularWrapper({ prop1, onComponentEvent }) {
  const containerRef = useRef(null);
  let angularComponent = null;
  let moduleRef = null;

  // 初始化Angular组件
  useEffect(() => {
    platformBrowserDynamic().bootstrapModule(AppModule)
      .then(ref => {
        moduleRef = ref;
        const componentFactory = ref.componentFactoryResolver.resolveComponentFactory(MyAngularComponent);
        angularComponent = componentFactory.create(ref.injector, [], containerRef.current);
        
        // 监听Angular组件输出事件
        angularComponent.instance.componentEvent.subscribe(data => {
          onComponentEvent(data);
        });
        
        angularComponent.changeDetectorRef.detectChanges();
      });

    // 卸载时清理资源
    return () => {
      if (angularComponent) angularComponent.destroy();
      if (moduleRef) moduleRef.destroy();
    };
  }, []);

  // 同步React props到Angular组件
  useEffect(() => {
    if (angularComponent) {
      angularComponent.instance.prop1 = prop1;
      // 若用OnPush策略，手动触发变更检测
      angularComponent.changeDetectorRef.markForCheck();
    }
  }, [prop1]);

  return <div ref={containerRef}></div>;
}

性能优化要点 #

• 必须在React组件卸载时销毁Angular实例和模块引用，防止内存泄漏。
• 对props做浅比较后再同步到Angular，避免频繁触发变更检测。
• 复用Angular的injector和模块实例，减少重复初始化开销。

3. iframe隔离（性能折中，隔离性最优） #

将Angular组件部署为独立微应用，通过iframe嵌入到React中，完全隔离两个框架的运行环境，避免状态冲突和变更检测干扰。

实现要点 #

• 将Angular组件打包为独立的静态资源（HTML/CSS/JS）并部署，React中通过iframe嵌入：

  function IframeAngularWrapper() {
    const iframeRef = useRef(null);
  
    // React向Angular传递数据
    const sendDataToAngular = useCallback((data) => {
      iframeRef.current?.contentWindow.postMessage(
        { type: 'UPDATE_PROP', payload: data },
        'https://your-angular-app-domain.com'
      );
    }, []);
  
    // 监听Angular返回的事件
    useEffect(() => {
      const handleMessage = (e) => {
        if (e.origin === 'https://your-angular-app-domain.com') {
          if (e.data.type === 'COMPONENT_EVENT') {
            console.log('Angular事件:', e.data.payload);
          }
        }
      };
      window.addEventListener('message', handleMessage);
      return () => window.removeEventListener('message', handleMessage);
    }, []);
  
    return (
      <iframe
        ref={iframeRef}
        src="https://your-angular-app-domain.com/my-component"
        frameBorder="0"
        width="100%"
        loading="lazy"
      />
    );
  }
  

性能优化要点 #

• 给iframe设置loading="lazy"实现延迟加载，减少首屏开销。
• 批量传递数据，降低postMessage的调用频率，减少通信延迟。
• 优化Angular微应用的加载速度（比如开启gzip、使用CDN）。

方案性能对比 #

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