القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة.
هل سبق لك أن صادفت موقعًا إلكترونيًا أو تطبيقًا يقوم بتحميل وعرض المزيد من المحتوى أثناء التمرير؟ هذا ما نسميه باللفافة اللانهائية.
يعد التمرير اللانهائي أسلوبًا شائعًا يقلل من عدد مرات تحميل الصفحة. يمكن أن يوفر أيضًا تجربة مستخدم أكثر سلاسة ، خاصة على الأجهزة المحمولة.
هناك عدة طرق مختلفة يمكنك من خلالها تنفيذ التمرير اللانهائي في React.js. تتمثل إحدى الطرق في استخدام مكتبة مثل مكون التمرير التفاعلي اللانهائي. توفر هذه المكتبة مكونًا سيطلق حدثًا عندما يقوم المستخدم بالتمرير إلى أسفل الصفحة. يمكنك بعد ذلك استخدام هذا الحدث لتحميل المزيد من المحتوى.
هناك طريقة أخرى لتنفيذ التمرير اللانهائي وهي استخدام الوظائف المضمنة التي توفرها React. إحدى هذه الوظائف هي "componentDidMount" الذي تستدعيه React عند تثبيت المكوِّن لأول مرة.
يمكنك استخدام هذه الوظيفة لتحميل الدفعة الأولى من البيانات ثم استخدام وظيفة "componentDidUpdate" لتحميل المزيد من البيانات عندما يقوم المستخدم بالتمرير لأسفل. بامكانك ايضا استخدام خطافات React لإضافة ميزة تمرير لا نهائية.
لاستخدام مكون رد الفعل اللانهائي ، عليك تثبيته أولاً باستخدام npm:
npm ثَبَّتَ رد فعل لانهائي-التمرير-عنصر --يحفظبعد ذلك ، يمكنك استيراده إلى مكون React الخاص بك.
يستورد تتفاعل من 'تتفاعل'
يستورد التدرج اللانهائي من "تفاعل-لانهائي-عنصر التمرير"فصلبرنامجيمتدتتفاعل.عنصر{
البناء() {
ممتاز()
هذا.state = {
أغراض: [],
لديه اكثر: حقيقي
}
}componentDidMount () {
هذا.ابحث عن المعلومة(1)
}fetchData = (صفحة) => {
مقدار ثابت newItems = []ل (يترك أنا = 0; أنا < 100; أنا ++) {
عناصر جديدة.يدفع(أنا )
}إذا (الصفحة 100) {
هذا.setState({ لديه اكثر: خطأ شنيع })
}هذا.setState({ أغراض: [... this.state.items،... newItems]})
}يجعل() {
يعود (
<شعبة>
<h1>التدرج اللانهائي</h1>
<التدرج اللانهائي
dataLength = {هذا.state.items.length}
التالي = {هذا.ابحث عن المعلومة}
لديه المزيد = {هذا.state.hasMore}
محمل = {<h4>تحميل...</h4>}
endMessage = {
<نمط p = {{textAlign: 'مركز' }}>
<ب>ياي! لقد رأيت كل شيء</ب>
</ ص>
}
>
{هذا.state.items.map ((عنصر ، فهرس) => (
<مفتاح div = {index}>
{غرض}
</div>
))}
</InfiniteScroll>
</div>
)
}
}
يصدّرتقصير برنامج
يبدأ هذا الكود باستيراد React ومكوِّن InfiniteScroll من مكتبة مكونات التمرير اللانهائية المتفاعلة. ثم يقوم بإنشاء مكون ذي حالة وتهيئة الحالة بفارغ أغراض مجموعة وأ لديه اكثر ضبط العلم على "صواب".
في طريقة دورة حياة componentDidMount ، يمكنك استدعاء ملف ابحث عن المعلومة طريقة مع صفحة معلمة 1. تقوم طريقة fetchData باستدعاء API للحصول على بعض البيانات. هذا المثال يولد فقط بعض البيانات الوهمية. ثم يقوم بإنشاء مجموعة من 100 عنصر.
إذا كانت معلمة الصفحة هي 100 ، فلا يوجد المزيد من العناصر ، لذا اضبط علامة hasMore على false. سيؤدي هذا إلى إيقاف مكون InfiniteScroll من إجراء المزيد من استدعاءات API. أخيرًا ، اضبط الحالة باستخدام البيانات الجديدة.
تستخدم طريقة التصيير مكون InfiniteScroll وتمرر في بعض الخاصيات. يتم تعيين الخاصية dataLength على طول مصفوفة العناصر. يتم تعيين الخاصية التالية على طريقة fetchData. تم تعيين الخاصية hasMore على علامة hasMore. يتسبب عنصر التحميل في قيام المكون بعرض محتوياته كمؤشر تحميل. وبالمثل ، سيتم عرض خاصية endMessage كرسالة عند انتهاء تحميل جميع البيانات.
هناك أيضًا دعائم أخرى يمكنك تمريرها إلى مكون InfiniteScroll ، ولكن هذه هي العناصر التي ستستخدمها كثيرًا.
استخدام وظائف مدمجة
تحتوي React أيضًا على بعض الطرق المضمنة التي يمكنك استخدامها لتنفيذ التمرير اللانهائي.
الطريقة الأولى هي المكون. تستدعي React هذه الطريقة بعد تحديث مكونها. يمكنك استخدام هذه الطريقة للتحقق مما إذا كان المستخدم قد انتقل إلى أسفل الصفحة ، وإذا كان الأمر كذلك ، فقم بتحميل المزيد من البيانات.
الطريقة الثانية هي التمرير، والتي تستدعي رد فعل عندما يقوم المستخدم بالتمرير. يمكنك استخدام هذه الطريقة لتتبع موضع التمرير. إذا قام المستخدم بالتمرير إلى أسفل الصفحة ، يمكنك بعد ذلك تحميل المزيد من البيانات.
فيما يلي مثال على كيفية استخدام هذه الطرق لتنفيذ التمرير اللانهائي:
يستورد React ، {useState ، useEffect} من 'تتفاعل'وظيفةبرنامج() {
مقدار ثابت [items، setItems] = useState ([])
مقدار ثابت [hasMore، setHasMore] = useState (حقيقي)
مقدار ثابت [page، setPage] = useState (1)useEffect (() => {
fetchData (صفحة)
}, [صفحة])مقدار ثابت fetchData = (صفحة) => {
مقدار ثابت newItems = []ل (يترك أنا = 0; أنا < 100; أنا ++) {
عناصر جديدة.يدفع(أنا)
}إذا (الصفحة 100) {
مجموعةخطأ شنيع)
}مجموعة([... عناصر ،... عناصر جديدة])
}مقدار ثابت onScroll = () => {
مقدار ثابت انتقل أعلى = وثيقة.documentElement.scrollTop
مقدار ثابت انتقل الارتفاع = وثيقة.documentElement.scrollHeight
مقدار ثابت ارتفاع العميل = وثيقة.documentElement.clientHeightإذا كان (scrollTop + clientHeight >= scrollHeight) {
setPage (صفحة + 1)
}
}useEffect (() => {
window.addEventListener ('التمرير'، onScroll)
عودة () => window.removeEventListener ('التمرير'، onScroll)
}, [أغراض])يعود (
<شعبة>
{items.map ((item، index) => (
<مفتاح div = {index}>
{غرض}
</div>
))}
</div>
)
}
يصدّرتقصير برنامج
يستخدم هذا الرمز الخطاف useState و useEffect لإدارة الحالة والآثار الجانبية.
في الخطاف useEffect ، يستدعي طريقة fetchData بالصفحة الحالية. تقوم طريقة fetchData باستدعاء API للحصول على بعض البيانات. في هذا المثال ، تقوم فقط بإنشاء بعض البيانات الوهمية لإثبات التقنية.
تملأ حلقة for المصفوفة newItems بـ 100 عدد صحيح. إذا كانت معلمة الصفحة هي 100 ، فاضبط علامة hasMore على false. سيؤدي هذا إلى إيقاف مكون InfiniteScroll من إجراء المزيد من استدعاءات API. أخيرًا ، اضبط الحالة بالبيانات الجديدة.
تتعقب طريقة onScroll موضع التمرير. إذا قام المستخدم بالتمرير إلى أسفل الصفحة ، يمكنك تحميل المزيد من البيانات.
يضيف الخطاف useEffect مستمع حدث لحدث التمرير. عندما يبدأ حدث التمرير ، فإنه يستدعي طريقة onScroll.
هناك إيجابيات وسلبيات لاستخدام التمرير اللانهائي. يمكن أن يساعد في تحسين واجهة المستخدم ، مما يجعل تجربة أكثر سلاسة ، خاصة على الأجهزة المحمولة. ومع ذلك ، يمكن أن يؤدي أيضًا إلى فقد المستخدمين للمحتوى حيث قد لا يتم التمرير لأسفل بما يكفي لرؤيته.
من المهم تقييم الإيجابيات والسلبيات من تقنية التمرير اللانهائي قبل تنفيذه على موقع الويب أو التطبيق الخاص بك.
يمكن أن تساعد إضافة التمرير اللانهائي إلى موقع أو تطبيق React.js على تحسين تجربة المستخدم. باستخدام التمرير اللانهائي ، لا يتعين على المستخدمين النقر لمشاهدة المزيد من المحتوى. يمكن أن يساعد استخدام Infinite Scroll في تطبيق React.js أيضًا في تقليل عدد تحميلات الصفحات ، مما قد يؤدي إلى تحسين الأداء.
يمكنك أيضًا بسهولة نشر تطبيق React على صفحات Github مجانًا.
