Ionic React 太慢，无法在 IonCard 组件中呈现包含 100 多个对象的 JSON 文件

如何解决Ionic React 太慢，无法在 IonCard 组件中呈现包含 100 多个对象的 JSON 文件

我正在使用 Ionic React 创建一个移动应用程序。我使用来自本地 JSON 文件的动态数据渲染多个 IonCard。实际上，我正在通过 JSON 文件进行映射。一切顺利。但是渲染所有卡片需要几秒钟。我想尽量减少加载时间。请帮助我了解如何优化应用程序的渲染时间和整体性能。代码如下：

//imports...
import data from "../db/data.json";

const Products: React.FC = (filterText) => {
const [searchText,setSearchText] = useState("");
const categories = vocabTopics
//filtering CATEGORIES
.filter((topic) => {return topic.title.toLowerCase().indexOf(searchText.toLowerCase()) >= 0;})
.map((topic) => {
return (
<IonCol size="12" key={topic.id}>
<IonCard mode="md" routerLink={topic.route} className="except-home-screen-card no-margin no-radius-card">
<div className="flex">
<div className="card-img">
<img src={topic.thumbnail}></img>
</div>
<div className="flex-justify-space-b-w">
<div>
<IonCardSubtitle className="except-home-screen-card-subtitle">{topic.subtitle}</IonCardSubtitle>
<IonCardTitle className="except-home-screen-card-title">{topic.title}</IonCardTitle>
</div>
<div>
<IonIcon icon={chevronForwardOutline} className="card-right-icon"/>
</div>
</div>
</div>
</IonCard>
</IonCol>
);
});

return (
<IonPage>
<IonHeader className="ion-no-border">
<IonToolbar className="top-header">
<IonButtons slot="start" className="top-header-icons color-primary">
<IonBackButton defaultHref="home" /></IonButtons>
<div className="top-title-container">
<IonTitle className="ion-text-center v-center">Products</IonTitle>
</div>
</IonToolbar>
</IonHeader>
<IonContent fullscreen className="bg-style">
<div className="center padding-y">
<h1 className="lg-text ion-no-margin equal-padding">Products Categories</h>
<p className="ion-text-center ion-no-margin subtitle">70+ CATEGORIES</p>
</div>

<IonGrid className="my-grid ion-no-padding">
<IonSearchbar spellcheck={true} autocorrect="on" className="searchbar" value={searchText} mode="ios" onIonChange={(e) => setSearchText(e.detail.value!)}></IonSearchbar>

<IonRow className="center-padding">
<div className="card-container fluid">

{categories}

</div>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
);
};

export default Products;

解决方法

我认为 100 张卡片在单个“视图”中不会同时可见，因此唯一的解决方案是“无限滚动”并仅在它们应该可见时才显示/创建它们。 （例如：https://forum.ionicframework.com/t/infinite-scrolling-of-data-from-the-api/172933）