Ionic React - 初探

Ionic 现已正式支持 React 作为一流的目标和框架

Ionic 是一个面向 Web 开发人员的应用程序开发平台，它使您能够使用一个共享代码库和开放的 Web 标准构建混合跨平台移动、Web 和桌面应用程序

Ionic 过去仅使用 Cordova 作为 API 与原生 API 交互，但现在同时支持 Cordova 和 Capacitor，后者是 Ionic 内部构建的新型跨平台引擎。

摘自他们的介绍性博客文章：

虽然 Capacitor 的设计灵感源自 Cordova，但在实际开发体验上却截然不同。Capacitor 以现代 JS API 的形式提供，可直接导入您的应用。它拥有易于使用的 API，涵盖文件管理、地理位置定位、应用间共享、推送和本地通知等各种功能。此外，将新的原生 SDK 暴露给 Capacitor 也非常简单，只需编写少量封装代码，即可在 iOS 上提供对 Swift 的一流支持（在 Android 上则支持 Java）。

多年来，Ionic 仅支持 Angular，但截至 10 月 14 日，React 支持已发布 Beta 版本（并且他们的文档显示 Beta Vue 版本也已可用）。

现在，当您初始化新项目时，您可以选择使用 React 或 Angular：

$ npm i -g ionic

$ ionic start myapp

Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the
--type option.

? Framework: (Use arrow keys)
  Angular | https://angular.io
❯ React   | https://reactjs.org

您将获得一些有关您想要执行的启动项目类型的选项：

? Starter template: (Use arrow keys)
  blank      | A blank starter project
  sidemenu   | A starting project with a side menu with navigation in the content area
❯ tabs       | A starting project with a simple tabbed interface
  conference | A kitchen-sink application that shows off all Ionic has to offer

从那里，CLI 将下载基础项目以及所有依赖项，然后您就可以对其进行测试了：

ionic serve

TypeScript

Ionic 将使用并支持开箱即用的 TypeScript 来构建应用程序，但如果您想使用 JavaScript，您可以删除任何 TypeScript 并将文件重命名为.js使用 JavaScript。

造型

如果您一直在使用 React Native 甚至只是 React，那么您可能已经习惯了 JS 中的 CSS。Ionic 结合了常规 CSS、预定义样式的组件以及一个包含基础主题的主题文件，可以轻松配置样式。

组件/文档

使用 Ionic 的核心价值之一是其内置的组件库。浏览组件时，您会注意到所有组件现在都有可用的 React 版本，并且与其他平台的组件一起提供了文档：

要使用任何组件，您现在只需从以下位置导入@ionic/react：

import { IonItem, IonLabel, IonDatetime, IonContent } from '@ionic/react';

React Native 与 Ionic 对比

您的用户很可能实际上并不关心。

您可能会想“当我可以使用 Expo 或 React Native 时，为什么我要使用 Ionic”，反之亦然。

答案很简单（这只是我的观点）：React Native 旨在创建具有真正原生体验的应用（如果您更喜欢 RN，还可以创建您想要发布到应用商店的其他内容），而 Ionic 可以用于构建您想要构建的任何其他类型的移动应用/PWA。我还认为，目前使用 Ionic 比使用 React Native 更容易上手。

Ionic 能像 React Native 那样接近真正的原生吗？可能不行，但我不确定，因为我最近没试过。由于它仍然在使用 Web 技术、Web 视图，以及底层的 DOM，所以它在所有 API 和交互方面与 React Native 旗鼓相当的可能性很小。

React Native 也会让你几乎像真正的原生一样接近原生，但真正的原生总是会至少稍微提高一点性能（因为 RN 毕竟只是对真正的原生的抽象）。

答案并不在于哪个框架能够提供原始的原生体验、原生、React Native 还是 Ionic，我认为更重要的是提供更高的性价比、开发人员的速度，并最终交付高质量的应用程序。

就像原生平台不断改进并添加更多更好的 API，以及 React Native 不断改进变得越来越好一样，Web 平台也在不断改进。

对于大多数应用程序来说，你很可能使用 React Native、Ionic 或原生框架来构建你的下一个应用，而普通用户可能难以分辨出它们之间的区别。真正的关键在于你团队中开发人员的类型和质量，以及你为最终应用的完善所付出的努力。

如果您想要更“原生”的体验，但您的团队中只有 JavaScript 开发人员，或者正在努力提高开发人员的速度和跨平台解决方案，请查看 React Native。

如果您正在构建 PWAs，正在努力提高开发人员的速度和跨平台解决方案，或者团队中的开发人员可能无法在更原生的环境中很好地工作，那么请查看 Ionic。

如果您热衷于构建跨平台并更喜欢 React Native API，那么 Expo web 的发布使我们能够在 Web + 移动之间进行构建。

如果您是一家价值数十亿美元的公司，并且可以投入资金并聘请开发人员在两个平台上构建原生平台，那么就选择原生平台。

哦，别忘了我们还有 Flutter 可供选择。谷歌在过去几年里付出了巨大的努力，为我们提供另一个跨平台选项，虽然不如 React Native 成熟，但只要你能用 Dart 编写下一个应用，它也能提供类似的解决方案。

总而言之，现在是成为开发者的最佳时机。我们拥有无数的工具和库，它们让我们的生活更加轻松，而且每天都在不断改善。选择最适合你的。