如何在ASP.Net Core应用中实现ReactJs与AngularJs 1.7共存并免Node/Webpack引入？

作为经手过AngularJS 1.x和React混合开发的开发者，我可以明确告诉你：AngularJS 1.7和React完全可以共存，而且不用Node或Webpack也能在你的ASP.NET Core Razor项目中快速引入React新模块。下面分两部分详细说明：

一、AngularJS 1.7 与 React 共存的可行性与实现思路 #

AngularJS 1.x是基于传统DOM操作和模块依赖的框架，React则是专注于虚拟DOM的组件化库，两者的运行机制没有本质冲突，只要做好以下两点，就能完美隔离且互不干扰：

• DOM挂载隔离：给React模块分配独立的DOM容器，比如在Razor页面中添加<div id="react-container"></div>，如果这个容器恰好处于AngularJS的指令作用范围内，记得加上ng-non-bindable属性阻止AngularJS解析它的内容。
• 模块间通信（按需）：如果需要和现有AngularJS模块交互，推荐用轻量的方式：
  • 自定义DOM事件：React组件通过dispatchEvent触发自定义事件，AngularJS控制器监听该事件；反之亦然，这样能避免直接依赖。
  • 全局共享状态：仅用于登录态这类必须共享的数据，比如用一个命名空间明确的全局对象window.AppShared来存储，避免全局污染。
  • 服务桥接（慎用）：如果必须调用AngularJS的共享服务，可以通过angular.element(document.body).injector().get('YourService')获取实例，但尽量少用，保持模块独立性。

二、ASP.NET Core中无需Node/Webpack引入React的步骤 #

不用构建工具的核心是通过CDN引入React生态，并在浏览器端完成JSX转译，直接在Razor页面中编写React代码：

1. 在CSHTML中引入CDN脚本 #

在页面的<body>末尾添加生产环境的CDN链接（开发环境可以替换成带调试信息的development.min.js版本）：

<!-- React核心库 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<!-- ReactDOM渲染库 -->
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- Babel独立版，用于浏览器端转译JSX -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

2. 编写React组件并挂载 #

在页面中添加React容器和组件代码，注意脚本类型要设为text/babel，让Babel自动转译JSX：

<!-- React模块专属容器 -->
<div id="react-new-module" ng-non-bindable></div>

<script type="text/babel">
  // 定义React函数组件
  function NewReactFeature() {
    const [data, setData] = React.useState([]);

    // 模拟异步数据请求（可以调用ASP.NET Core的API）
    React.useEffect(() => {
      fetch('/api/new-feature/data')
        .then(res => res.json())
        .then(result => setData(result));
    }, []);

    return (
      <div className="react-feature-wrapper">
        <h3>React新功能模块</h3>
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
        <!-- 示例：调用AngularJS的登录服务 -->
        <button onClick={() => {
          const authService = angular.element(document.body).injector().get('AuthService');
          alert('当前登录用户：' + authService.getUserName());
        }}>获取登录信息</button>
      </div>
    );
  }

  // 挂载组件到DOM容器
  const root = ReactDOM.createRoot(document.getElementById('react-new-module'));
  root.render(<NewReactFeature />);
</script>

3. 生产环境优化建议 #

• 预编译JSX：如果觉得浏览器端转译影响性能，可以用在线Babel工具把React组件代码转译成纯JS，然后直接引入转译后的JS文件，这样可以去掉@babel/standalone的依赖。
• 样式隔离：给React模块的根元素加唯一类名，编写样式时用这个类名做前缀，避免和现有AngularJS页面的样式冲突。
• 独立路由：如果React模块需要路由，可以用React Router的CDN版本，把路由容器挂载到独立DOM节点，和AngularJS的路由完全隔离。

内容的提问来源于stack exchange，提问作者r.net