Ionic React 公告

今天，我们非常高兴地宣布 Ionic React 正式发布。它是 Ionic 框架的原生 React 版本，让您能够轻松地以渐进式 Web 应用的形式构建 iOS、Android、桌面和 Web 应用。所有这些都基于统一的代码库、标准的 React 开发模式，并充分利用了react-domWeb 平台的标准库和庞大的生态系统。

Ionic React 代表了 Ionic Framework 历史上最重大的变革，并将 Ionic Framework 推向了全新的用户群体。因此，我们想简单介绍一下 Ionic React 的发展历程、构建它的原因以及它的目标用户（如果您只想看代码，请直接跳到文章末尾，我不会介意的😅）。

为什么选择 React？

对于那些从早期就关注 Ionic 的人来说，听到我们现在支持的不仅仅是 Angular，还有 React 可能会感到惊讶！

当我们启动 Ionic Framework 时，我们的使命是让 Web 开发人员能够利用他们现有的 Web 开发技能构建高质量的应用程序，并专注于围绕 Web 平台和 Web 技术的庞大生态系统。

我们设想能够构建丰富的 JavaScript 控件，并将它们以简单的 HTML 标签形式发布，让任何 Web 开发者都能轻松组装成出色的应用。然而，我们意识到，在浏览器中直接实现这一目标还为时过早。因此，我们转而投身于新兴的前端框架领域，全力投入 AngularJS 及其强大的指令系统。从那时起，我们就以专注于 Angular 的应用框架而闻名。

快进到 2019 年，前端生态系统与 2013 年完全不同。开发人员可以使用大量出色的前端框架选项，但很少有像 React 一样受欢迎和成功的。

我们重新审视了最初的愿景，意识到为 React 构建一个 Ionic 框架版本非常合理。再加上多年来 Ionic 团队中涌现出许多 React 爱好者（以及许多超级粉丝，包括我本人！），我们内部强烈希望 Ionic 框架也能支持 React。

因此，我们开始构建一个我们认为 React 开发人员会喜欢使用的 Ionic Framework 的原生 React 版本。

但是 React Native 怎么样？

您可能想知道，既然 React Native 已经拥有出色的移动选项，为什么我们还要构建 Ionic React。

我们也问过自己这个问题。我们当然不想投入大量时间去构建一个能与 React Native 媲美的东西。我们宁愿把我们的创造力投入到那些能解决别人还没解决的问题的技术上。

然而，当我们退一步思考时，我们意识到 Ionic React 为 React 生态系统带来了一些非常独特的东西，并且对应用程序开发的未来有着非常不同的愿景。

我们不想在 iOS 和 Android 原生 UI 控件之上构建抽象，而是想构建一个 DOM 原生的东西，它能够使用标准react-dom库和所有开箱即用的库，以及数十年来围绕浏览器的现有成果。当我们比较 2019 年的安装量时react-dom，react-native我们清楚地发现，在浏览器中和 DOM 之上进行的 React 开发远远多于在原生 iOS 或 Android UI 系统之上进行的开发（实际上是 16 倍！）。这进一步证实了我们的信念：“Web 开发者想要 Web 开发者”，并利用他们在 DOM 上构建的经验和现有功能库。

除此之外，开发者对渐进式 Web 应用 (PWA) 的兴趣日益浓厚，尤其是在企业级领域。PWA 在 React Native 生态系统中充其量只是事后诸葛亮（实际上，它并未获得官方支持）。相比之下，Ionic 框架是领先的 PWA 解决方案之一，并且在整个 Web 生态系统中拥有最佳的 PWA 性能，这部分归功于我们在 Stencil项目上所做的工作，我们使用 Stencil 在底层生成高效的组件。

我们还听到许多开发人员表示，他们希望在现有的 React Native 应用中使用 Ionic React，通过在他们的应用中使用原生 WebView 框架（使用Capacitor，稍后会详细介绍）构建更多屏幕，以便更快地移动或使传统的 Web 开发人员能够与现有的原生和 React Native 开发团队协同工作。

最后，在 React Rally 等会议上与许多 React 开发人员交谈后，很明显，React 生态系统中存在一个 Ionic 可以填补的空白，同时他们也渴望一种比生态系统中现有的更简单的移动和渐进式 Web 应用程序开发解决方案。

这不是你父亲的科尔多瓦

如果您上次使用以 Web 为中心的移动开发平台是使用 Cordova，我们理解您没有获得很好的体验并且可能不愿意再使用。

虽然 Ionic 仍然支持 Cordova，但新的 Ionic 应用将运行在我们内部构建的全新跨平台引擎Capacitor上。Capacitor 采用了现代 JS 和浏览器功能，并支持将一个应用以渐进式 Web 应用 (PWA) 的形式部署到 iOS、Android、Electron 和 Web 平台上。

事实上，渐进式 Web 应用程序支持是 Capacitor 的一个主要目标，许多 Capacitor API 都具有强大的 PWA 支持，例如 Camera，它具有自定义 UI 体验，可用于为您的 PWA 添加原生质量的相机功能。

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

从已经转换的 Ionic 开发人员那里，我们听说体验更受欢迎，并且感觉与 Cordova 有很大不同。

如今，电容器已在一些相当大的应用程序中得到使用，其中包括一些您可能会作为各种全球快餐店的消费者使用的应用程序。😅

我们相信您会喜欢 Ionic React 和 Capacitor 的组合。

不仅仅是开源

Ionic 为 React 和跨平台生态系统带来了一些不同的东西：一个完全支持的、企业级的产品，它为那些需要比通过社区支持的选项所能获得的更多功能的团队提供服务、咨询、工具和支持的本机功能。

Ionic 是 Ionic Framework 背后的公司，与数百家大中型公司和企业合作，为他们构建业务关键型应用程序提供所需的高级支持和软件。我们的网站上提供了更多相关信息。

此外，我们的Appflow服务可用于实时执行远程应用更新，或作为 CI/CD 工作流程的一部分构建 iOS 和 Android 二进制文件。

如果您想了解有关 Ionic Framework 背后公司的更多信息，请查看我们的2019 年业务更新。

入门

注意：Ionic React 的第一个正式版本是 v4.11。

背景故事说得够多了，那么你实际上是如何开始使用 Ionic React 进行构建的呢？

Ionic React 入门非常简单。首先，如果你还没有安装最新的 Ionic CLI，请先安装：

npm i -g ionic 

已经有 React 应用了吗？添加 Ionic React 非常简单。

然后，创建一个新项目：

ionic start my-react-app

CLI 会先询问几个问题，引导你完成设置过程。第一个问题是你想使用什么框架，当然选择 React 啦！

接下来，CLI 会询问您想要使用哪个入门模板。我们提供了一些不同的入门模板，帮助您快速上手。请先选择此演示所需的选项卡：

CLI 现在将创建你的应用并安装所有依赖项。完成后，进入目录并启动应用：

ionic serve

在幕后，该ionic serve命令使用Create React App (CRA) 项目来编译您的应用程序，启动开发服务器，并在新浏览器窗口中打开您的应用程序。

完成后，您将看到启动应用程序启动并运行：

接下来，让我们了解一下股票 Ionic React 应用程序的组成部分。

在您常用的代码编辑器中打开项目并保持ionic serve命令运行。我们所做的任何更改都将自动重新编译并在浏览器中刷新应用。

Ionic React 项目就是一个 React 项目，其设置与 CRA 应用的设置类似。您可能注意到的一个区别是我们使用了 TypeScript。

在 Ionic，我们是 TypeScript 的忠实拥趸，并且我们相信在 React 中使用 TypeScript 能够带来出色且高效的体验。但是，如果您想使用纯 JavaScript，请将文件重命名为使用.js扩展名，并删除文件中的任何类型注释，这样您的 Ionic React 应用就变成了 JavaScript 应用！

该src文件夹包含应用程序的所有代码。主入口点是该App.tsx文件。让我们分解一下这个文件中发生的事情。

在顶部，我们有典型的 React 和 React Router 导入，然后是一系列来自 的导入@ionic/react。我们的每个 Ionic 组件都导出为独立的 React 组件。本质上，Ionic React 是对 Ionic Core 项目中 Web 组件的包装，但导出方式让 React 开发人员感觉它们是原生的。我们对 Ionic Core 进行的任何更新和增强都将自动在 Ionic React 中使用。

接下来，我们导入一系列核心 CSS 文件。之后，还有一个variables.css文件可用于自定义应用的主题。有关应用主题的更多信息，请参阅我们相关的文档。

接下来，我们创建了主 App 组件。请注意，在启动器中，我们完全使用了函数式组件。我们很喜欢这种方式，但如果您更喜欢基于类的组件，它们也同样适用。

每个 Ionic 应用都以IonApp组件作为基础容器，用于设置屏幕，使其在移动设备和桌面设备上都能流畅运行。接下来，该IonReactRouter组件是 React Router 库BrowserRouter组件的包装器。为了实现类似原生的页面过渡效果，并在您浏览应用时保持页面状态，我们为 React Router 添加了额外的功能。访问我们的导航和路由指南，了解更多关于 Ionic React 中路由工作原理的信息。

我们的标签页启动器的大部分内容现在都包含在IonTabs组件中。它IonRouterOutlet包含一系列用于标签页界面中每个页面的路由（来自 React Router）。

接下来，该IonTabBar组件包含底部标签栏，每个页面都有一个按钮，用于跳转到文件夹中的Tab1、Tab2和Tab3组件src/pages。Tab1和Tab2页面提供了一些 Ionic 常用组件的使用示例，但该Tab3页面相对简陋。让我们来改变一下现状。

我们将把空白选项卡设置为显示员工列表的页面，并从UIFaces项目中提取一些演示数据。

首先，让我们更新 App.tsx 中的标签栏以显示新的标签和图标：

<IonTabButton tab="tab3" href="/tab3">
    <IonIcon icon={people} />
    <IonLabel>Employees</IonLabel>
</IonTabButton>

该people图标是从“ionicons/icons”导入的

打开Tab3.tsx，并将文件内容替换为：

import { IonAvatar, IonContent, IonHeader, IonItem, IonLabel, IonList, IonPage, IonTitle, IonToolbar, useIonViewWillEnter } from '@ionic/react';
import React, { useState } from 'react';

interface Person {
  name: string;
  email: string;
  position: string;
  photo: string;
}

const Tab3Page: React.FC = () => {

  const [people, setPeople] = useState<Person[]>([]);

  useIonViewWillEnter(async () => {
    const result = await fetch('https://uifaces.co/api?limit=25', {
      headers: { 'x-API-KEY': '873771d7760b846d51d025ac5804ab' }
    });
    const data = await result.json();
    setPeople(data);
  });

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Employees</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          {people.map((person, idx) => <EmployeeItem key={idx} person={person} />)}
        </IonList>
      </IonContent>
    </IonPage>
  );
};

const EmployeeItem: React.FC<{ person: Person }> = ({ person }) => {
  return (
    <IonItem >
      <IonAvatar slot="start">
        <img src={person.photo} />
      </IonAvatar>
      <IonLabel>
        <h2>{person.name}</h2>
        <p>{person.position}</p>
      </IonLabel>
    </IonItem>
  );
}

export default Tab3Page;

首先，我们为 Person 定义一个 TypeScript 接口，这将在稍后使用员工时为我们提供一些类型安全性和代码完成。

在顶部，我们导入了几个 React hooks 来使用。第一个是useState，它允许我们在函数组件中使用状态；第二个是，它是 Ionic 提供的生命周期方法，每次视图出现时都会触发。点击此处useIonViewWillEnter了解更多关于 Ionic 生命周期方法的信息。

我们为钩子提供了一个函数，useIonViewWillEnter该函数将在触发时调用 UIFaces API（使用 fetch API）并返回一个包含 25 个人的列表。当 fetch 请求完成后，我们会调用该函数setPeople来更新 people 状态变量。

在 JSX 中，我们有一个“IonList”组件，其中包含EmployeeItem每个人的对应信息。我们将 EmployeeItem 分离到它自己的组件中（定义在稍后）。

通过对 Tab3 进行更新，我们现在可以获取员工列表：

这就是 Ionic React 应用的入门基础知识！如需更深入的教程，请查看我们的入门指南。

当您准备为原生移动设备（iOS 和 Android）构建时，请查看我们的原生应用运行时Capacitor 。

谢谢

我们对 Ionic React 充满期待，迫不及待地想看到您用它构建的成果。我们为 Ionic React 制定了诸多计划，请在下方评论区告诉我们您希望我们涵盖哪些类型的内容。您也可以在 Twitter 上关注我们：@ionicframework！

直到下一次。