什么是 Ionic React？
Ionic 是一个高级的 HTML5 移动端应用框架，也是一个开发混合移动应用的前端框架，旨在让 Web 开发者更轻松地构建、测试、部署和监控跨平台应用。Ionic 基于 Angular 语法，以前一直不支持 Vue 和 React 。
开发团队表示，之因此作出这个决定是由于他们对 10000 多名 Ionic 用户进行了调查，结果发现2018 年 React 和 Vue 的使用率排名很高，并且预计 2019 年还将保持上涨趋势。所以，但愿提供 React 和 Vue 的支持，让开发者有更多选择。
Ionic React 是今年新出的版本
官网 https://ionicframework.com/docs/react
开始以前
在咱们建立一个无限滚动项目以前，咱们须要一个 Ionic + React 的应用。
安装过程查看官网文档或者 https://www.npmjs.com/package/@ionic/react 来查看
使用如下命令来建立一个项目
ionic start infiniteScroll tabs --type react
正式开始
Ionic 中用于建立新应用的入门工具包中包括三个标签，三个页面。它们本就是React的功能组件。为了方便起见，咱们将分别在每一个文件的第一个标签中实现解决的方案.
./src/pages/Tab1.tsx
当咱们要实现无限滚动并所以要显示一个列表时，咱们要作的第一件事情就是添加一个应包含项目的Stateful Value.
为此，咱们使用了 useState React Hook 。此外，咱们正在使用卡片来渲染它们，并为它们添加了另一个状态，当没有其余须要迭代的状态时，这将会实现中止滚动条的功能。
import { IonContent, IonHeader, IonPage, IonTitle, IonCard, IonToolbar} from '@ionic/react';import React, {useState} from 'react';const Tab1: React.FC = () => { const [items, setItems] = useState<string[]>([]); const [disableInfiniteScroll, setDisableInfiniteScroll] = useState<boolean>(false); return ( <IonPage> <IonHeader> <IonToolbar> <IonTitle>Tab One</IonTitle> </IonToolbar> </IonHeader> <IonContent> {items.map((item: string, i: number) => { return <IonCard key={`${i}`}><img src={item}/> </IonCard> })} </IonContent> </IonPage> );};
Fetch API
数据的列表，也就是项目的列表，咱们须要一个API来获取到数据并将它显示到咱们的项目中，这里我将使用 DOG API 来获取到数据。
这个API是免费并且开源的，不须要任何的key信息，并且支持CORS的请求
async function fetchData() { const url: string = 'https://dog.ceo/api/breeds/image/random/10';
const res: Response = await fetch(url); res .json() .then(async (res) => { if (res && res.message && res.message.length > 0) { setItems([...items, ...res.message]); setDisableInfiniteScroll(res.message.length < 10); } else { setDisableInfiniteScroll(true); } }) .catch(err => console.error(err));}
须要注意的是，这个API并不包括分页，仅仅只是10个随机的数据中有10条狗罢了。因此，在使用的过程当中，颇有可能会有重复的“狗狗”。
加载初始数据
Ionic 提供了咱们能够在应用程序中使用的多个生命周期事件，它不只为标准组件库提供了这类事件，也一样为功能组件提供了相似事件。
要在显示页面的时候获取数据，咱们能够连接到ionViewWillEnter 组件Router即将要动画化到视图中时触发的数据。
import {useIonViewWillEnter} from '@ionic/react';const Tab1: React.FC = () => { useIonViewWillEnter(async () => { await fetchData(); });};
无限滚动
因此如今，咱们要来实现无限滚动，首先，添加一个新的功能，该功能将帮助咱们获取新的数据而且告诉滚动器该操做已经完成了。
async function searchNext($event: CustomEvent<void>) { await fetchData(); ($event.target as HTMLIonInfiniteScrollElement).complete();}
最后，咱们将Ionic的无限滚动组件导入。
import {IonInfiniteScroll, IonInfiniteScrollContent} from '@ionic/react';
而且，在页面中渲染：
<IonInfiniteScroll threshold="100px" disabled={disableInfiniteScroll} onIonInfinite={(e: CustomEvent<void>) => searchNext(e)}> <IonInfiniteScrollContent loadingText="Loading more good doggos..."> </IonInfiniteScrollContent></IonInfiniteScroll>
完整的代码
为了方便，我将代码放在Github上 https://github.com/peterpeterparker/infiniteScroll/blob/master/src/pages/Tab1.tsx
运行
使用命令 ionic serve 来启动咱们的项目。
本文摘自medium ，内容采用意译而非机译。javascript
https://medium.com/better-programming/infinite-scroll-with-ionic-react-dc3e5e63b56e
本文分享自微信公众号 - 壹前端（yiqianduan）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。前端