在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

ionic-team/ionic-framework

菜单

框架集成

相关源文件

Ionic Framework 提供了与主流 JavaScript 框架的集成，使开发人员能够使用熟悉的工具和范例构建跨平台应用程序。本文档介绍了 Ionic 的核心 Web 组件如何适应 Angular、React 和 Vue 的使用，包括这些集成的架构、特定于框架的功能以及常见模式。

概述

Ionic 的框架集成层允许核心 Web 组件（使用 Stencil 构建）在 Angular、React 和 Vue 应用程序中无缝使用。这些集成提供了特定于框架的包装器、指令和实用程序，使 Ionic 组件在保持一致的底层实现的同时，感觉就像原生于每个框架一样。

来源： packages/angular/README.md1-15 core/src/index.ts1-34 packages/react/src/components/index.ts1-153 packages/vue/src/index.ts1-130

架构

Ionic Framework 遵循分层架构，框架集成构建在核心 Web 组件库之上。

来源： core/src/index.ts1-34 packages/react/src/components/index.ts1-153 packages/vue/src/index.ts1-130

组件包装模式

每个框架集成都采用类似的模式来包装核心 Ionic Web 组件。

来源： packages/react/src/components/proxies.ts1-151 packages/vue/src/index.ts1-130

支持的框架

Ionic 8 支持以下最低框架版本

框架支持版本
Angular16+
React17+
Vue3.0.6+

来源： BREAKING.md52-58

Angular 集成

Angular 集成由 `@ionic/angular` 包提供，该包提供了 Ionic 组件的 Angular 特定实现、用于覆盖组件的服务以及与 Angular Router 的集成。

项目结构

Angular 集成组织在三个主要目录下

  1. common - 懒加载和独立组件之间的共享逻辑
  2. standalone - 独立组件实现
  3. src - 懒加载组件实现

来源： packages/angular/README.md56-74

设置和配置

Angular 应用程序可以通过安装 `@ionic/angular` 包并导入所需的模块来集成 Ionic。

Angular 特定功能

  • 懒加载支持：与 Angular 的懒加载系统集成，用于优化组件加载
  • 基于指令的组件：Angular 指令包装 Ionic Web 组件
  • 覆盖组件的服务：用于管理覆盖组件的 Angular 服务，如 `ModalController`
  • 生命周期事件：用于页面导航的 Angular 特定生命周期事件

来源： packages/angular/README.md1-75 BREAKING.md285-293

React 集成

React 集成由 `@ionic/react` 包提供，该包提供 React 组件包装器、用于控制器的钩子以及与 React Router 的集成。

组件代理

React 组件使用 `createReactComponent` 函数从 Ionic Web 组件创建，该函数处理 React 的渲染系统与 Ionic Web 组件之间的桥接。

来源： packages/react/src/components/proxies.ts1-151 packages/react/src/components/index.ts1-153

设置与初始化

React 应用程序使用 `setupIonicReact` 函数初始化 Ionic。

来源： packages/react/src/components/index.ts137-152

React 特定功能

  • React Hooks API：用于控制器和实用程序的自定义钩子
    • `useIonActionSheet`、`useIonAlert`、`useIonToast` 等
  • JSX 组件：支持 JSX 的 React 组件包装器
  • React Router 集成：通过 `IonReactRouter` 与 React Router 的集成

来源： packages/react/src/components/index.ts128-136

Vue 集成

Vue 集成由 `@ionic/vue` 包提供，该包提供 Vue 组件包装器、组合式 API 钩子以及与 Vue Router 的集成。

组合式 API 钩子

Vue 3 的组合式 API 被用来提供一系列用于 Ionic 功能的钩子。

  • 生命周期钩子：`onIonViewWillEnter`、`onIonViewDidEnter` 等
  • 路由器钩子：用于导航控制的 `useIonRouter`
  • 其他钩子：`useBackButton`、`useKeyboard` 等

来源： packages/vue/src/hooks/lifecycle.ts1-57 packages/vue/src/hooks/router.ts1-63 packages/vue/src/hooks/back-button.ts1-21 packages/vue/src/hooks/keyboard.ts1-42

设置与初始化

Vue 应用程序通过安装 `IonicVue` 插件来初始化 Ionic。

来源： packages/vue/src/index.ts1-130

Vue 特定功能

  • Vue Router 集成：与 Vue Router 无缝集成
  • 控制器：用于覆盖组件的 Vue 特定控制器实现
  • Ionic 生命周期在 Vue 中： Ionic 页面生命周期在 Vue 组件中的应用

来源： packages/vue/src/index.ts27-35 packages/vue/src/utils.ts1-74

常见集成模式

所有框架集成都实现了若干通用模式。

覆盖层系统

覆盖层系统（模态框、弹出框、通知等）已针对每个框架进行了适配，并使用了特定于框架的 API。

来源： packages/react/src/components/index.ts95-104 packages/vue/src/index.ts27-35

每个框架集成都为导航提供了专门的组件和实用程序。

  • Router Outlets：ion-router-outlet (Angular)、IonRouterOutlet (React)、IonRouterOutlet (Vue)
  • Router Integrations：分别与 Angular Router、React Router 和 Vue Router 集成。
  • Navigation Components：Tab 栏、Nav 等，针对每个框架进行了适配。

来源： packages/react/src/components/index.ts109-119 packages/vue/src/index.ts15-19

生命周期管理

每个框架集成都将 Ionic 的页面生命周期事件（willEnter、didEnter、willLeave、didLeave）适配到与框架的生命周期模型相匹配。

来源： packages/vue/src/hooks/lifecycle.ts1-57 core/src/index.ts16-22 packages/vue/src/utils.ts18-29

浏览器和平台支持

Ionic Framework 的集成确保了所有框架在浏览器和平台支持上保持一致。

浏览器/平台最低版本
Chrome89+
Safari15+
Firefox75+
Edge89+
iOS15+
Android5.1+ (Chromium 89+)

来源： BREAKING.md40-64

结论

Ionic Framework 的集成层使开发人员能够使用他们选择的框架来使用 Ionic 组件，同时保持一致的底层实现。每个集成都提供了特定于框架的适配，使 Ionic 组件感觉像是框架的原生组件，包括组件包装器、导航集成以及用于覆盖层和生命周期管理等通用功能的 API。

有关特定组件的更多详细信息，请参阅 核心组件文档。