当前位置：首页 > 文章列表 > 文章 > 前端 > Preact与React如何协同集成使用

Preact与React如何协同集成使用

2025-07-14 20:45:32 0浏览收藏

本篇文章向大家介绍《Preact 与 React 如何共存集成》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

在同一项目中集成 Preact 和 React

本文旨在介绍如何在大型 React 项目中逐步迁移部分组件到 Preact，同时保持与现有 React 代码的兼容性。通过使用 preact/compat 库，可以在无需引入微前端架构的情况下，实现 Preact 和 React 组件的共存和无缝通信。本文将详细介绍配置步骤，并讨论在无法使用 preact/compat 时，如何通过微前端技术进行集成。

使用 preact/compat 实现 React 和 Preact 共存

在大型 React 项目中，如果希望尝试将部分组件迁移到 Preact，同时又不想完全重写整个项目，preact/compat 提供了一种便捷的解决方案。它通过一个轻量级的兼容层（仅 2kB），使得 React 组件能够与 Preact 代码无缝协作。

配置步骤

以下是在项目中使用 preact/compat 的步骤：

卸载 React 相关依赖：
首先，需要从需要迁移到 Preact 的 package 中卸载 react 和 react-dom。
```
npm uninstall react react-dom
# 或者
yarn remove react react-dom
```

安装 Preact：

然后，安装 preact 和 preact/compat。

npm install preact preact/compat
# 或者
yarn add preact preact/compat

配置构建工具别名：

为了让现有的 import react from 'react' 和 import ReactDOM from 'react-dom' 语句能够正常工作，需要配置构建工具（如 Webpack、Rollup 或 Parcel）的别名，将 react 和 react-dom 指向 preact/compat。

Webpack 配置示例：

在 webpack.config.js 文件中添加以下配置：

module.exports = {
  // ...
  resolve: {
    alias: {
      'react': 'preact/compat',
      'react-dom/test-utils': 'preact/test-utils',
      'react-dom': 'preact/compat',
      'react/jsx-runtime': 'preact/jsx-runtime'
    }
  }
};

Vite 配置示例：

对于使用 Vite 的项目，可以使用 @preact/preset-vite 插件。

npm install -D @preact/preset-vite
# 或者
yarn add -D @preact/preset-vite

然后在 vite.config.js 文件中配置：

import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [preact()]
})

组件嵌套的平滑通信

preact/compat 的一个重要优势是它能够处理 React 和 Preact 组件之间的嵌套关系，例如：

<ReactComponent>
  <PreactComponent>
    <ReactComponent/>
  </PreactComponent>
</ReactComponent>

在这种情况下，preact/compat 会确保组件之间的数据传递和事件处理能够正常进行，从而实现平滑的通信。

项目结构示例

假设项目结构如下：

ProjectName
| - packages
|   | - package1 (React)
|   |   |- package.json
|   | - package2  (Preact)
|   |   |- package.json
|   | - package3  (React)
|   |   |- package.json
| - package.json

如果希望将 package2 中的 React 组件迁移到 Preact，只需在 package2 中执行上述配置步骤即可。其他 package (例如 package1 和 package3) 仍然可以使用 React，而无需进行任何修改。

使用微前端技术进行集成

如果由于某些原因无法使用 preact/compat，则可以考虑使用微前端技术来集成 Preact 和 React 组件。微前端允许将不同的应用程序（或 package）独立开发、测试和部署，然后将它们组合成一个更大的整体。

以下是一些使用微前端技术集成 Preact 和 React 组件的方法：

Web Components：
将 Preact 组件打包成 Web Components，然后在 React 应用程序中使用这些 Web Components。
IFrame：
将 Preact 组件嵌入到 IFrame 中，然后在 React 应用程序中使用 IFrame 来显示 Preact 组件。
JS Package 手动挂载：
将 Preact 组件打包成 JS Package，然后在 React 应用程序中手动将其挂载到 HTML 元素上。

每种方法都有其优缺点，选择哪种方法取决于具体的项目需求和约束。

总结

在大型 React 项目中集成 Preact 组件，preact/compat 是一种简单有效的解决方案。通过配置构建工具别名，可以实现 React 和 Preact 组件的共存和无缝通信。如果无法使用 preact/compat，则可以考虑使用微前端技术进行集成。选择哪种方法取决于具体的项目需求和约束。在迁移过程中，建议逐步进行，并进行充分的测试，以确保项目的稳定性和兼容性。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~