问题描述
我正在使用 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)