什麼是 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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。前端