يمكن أن يؤدي ترقيم الصفحات المخصص مع تحميل البيانات الديناميكي إلى تحسين الأداء وتجربة المستخدم الإجمالية لتطبيقك.
يشير ترقيم الصفحات إلى نظام تقسيم كميات كبيرة من البيانات إلى أجزاء أو صفحات أصغر وأكثر قابلية للإدارة لتحسين الأداء وسهولة الاستخدام. يمكن أن يوفر ترقيم الصفحات المخصص ، إذا تم تنفيذه بشكل صحيح ، تجربة مستخدم أفضل. تعرف على كيفية إنشاء حل مخصص لتقسيم الصفحات في React Native يسمح لك بتحميل البيانات ديناميكيًا.
فهم ترقيم الصفحات المخصص
باستخدام ترقيم الصفحات المخصص ، يمكن للمطورين إنشاء آلية ترقيم الصفحات تلائم المتطلبات المحددة لتطبيقهم. يمكن أن يتضمن ترقيم الصفحات المخصص تصميم واجهة مستخدم فريدة للتنقل بين الصفحات وتنفيذ خوارزميات لـ جلب البيانات من قاعدة بيانات أو API، أو دمج ميزات مثل التمرير اللانهائي أو التحميل البطيء.
مزايا ترقيم الصفحات المخصص
يمكن أن يوفر إنشاء نظام ترقيم صفحات مخصص لتطبيقات الأجهزة المحمولة React Native بعض المزايا:
- يمكنه تحسين قابلية تطبيقك للتوسع ، مما يسمح له بمعالجة كميات أكبر من البيانات بشكل أكثر كفاءة. هذا مهم بشكل خاص للتطبيقات التي تتعامل مع مجموعات البيانات الكبيرة.
- يمكن أن يؤدي ترقيم الصفحات المخصص إلى تحسين أداء تطبيقك عن طريق تقسيم البيانات إلى أجزاء أصغر وأكثر قابلية للإدارة. هذا سوف يقلل من وقت التحميل.
- باستخدام ترقيم الصفحات المخصص ، ستتمتع بمرونة وتحكم أكبر في تقديم البيانات والوصول إليها داخل تطبيقك.
تنفيذ التحميل الديناميكي باستخدام ترقيم الصفحات المخصص
عندما يقوم تطبيق React Native الخاص بك بتحميل البيانات الضرورية التي يحتاجها فقط لتحميلها في ذلك الوقت ، يُشار إليه بالتحميل الديناميكي. لتنفيذ التحميل الديناميكي باستخدام ترقيم الصفحات المخصص ، يمكنك اتباع الخطوات العامة التالية:
- حدد طريقة ترقيم الصفحات: حدد طريقة ترقيم الصفحات التي تناسب المحتوى الخاص بك بشكل أفضل. هذا يمكن أن يكون تقليديا على أساس الصفحة نظام ترقيم الصفحات ، حيث ينقر المستخدمون لتحميل الصفحة التالية ، أو ملف التدرج اللانهائي النظام ، حيث يتم تحميل المزيد من المحتوى أثناء قيام المستخدم بالتمرير لأسفل الصفحة.
- اكتب الكود من جانب الخادم والعميل: ستكتب رمزًا من جانب الخادم للتعامل مع طلبات ترقيم الصفحات لصفحات معينة من البيانات وإرجاع البيانات لتلك الصفحة فقط. ستكتب بعد ذلك رمزًا من جانب العميل للاستماع إلى إجراءات المستخدم التي تؤدي إلى طلبات المزيد من البيانات ، مثل النقر فوق ملف تحميل المزيد زر أو التمرير إلى أسفل الصفحة.
- تنفيذ تحميل البيانات: عندما يبدأ المستخدم طلبًا للحصول على مزيد من البيانات ، يجب أن يرسل التطبيق طلبًا إلى جانب الخادم للصفحة التالية من البيانات. يجب أن يعرض جانب الخادم بيانات تلك الصفحة فقط ، والتي يمكن للتطبيق استخدامها لتحديث الصفحة.
- قم بتحديث الصفحة: أخيرًا ، ستقوم بتحديث الصفحة بالبيانات التي تم تحميلها حديثًا. قد يتضمن ذلك إلحاق البيانات الجديدة بقائمة عناصر موجودة أو استبدال القائمة بأكملها بالبيانات الجديدة.
إعداد مصدر البيانات
تتمثل الخطوة الأولى في تنفيذ ترقيم الصفحات المخصص في React Native في إعداد مصدر بياناتك. يتضمن هذا عادةً جلب البيانات من واجهة برمجة تطبيقات أو قاعدة بيانات وتخزينها في متغير حالة. يعتبر واجهة برمجة تطبيقات REST بسيطة يقوم بإرجاع قائمة الكتب.
فيما يلي مثال على الشكل الذي قد تبدو عليه استجابة واجهة برمجة التطبيقات:
{
"بيانات": [
{
"بطاقة تعريف": 1,
"عنوان": "الحارس في حقل الشوفان",
"مؤلف": "جي دي سالينجر"
},
{
"بطاقة تعريف": 2,
"عنوان": "لقتل الطائر المحاكي",
"مؤلف": "هاربر لي"
},
// ...
],
"صفحة": 1,
"إجمالي الصفحات": 5
}
لجلب هذه البيانات في تطبيق React Native الخاص بنا ، يمكننا استخدام ملحق أحضر وظيفة ، والتي تُرجع ملف يعد التي يتم حلها مع الاستجابة من REST API.
إنشاء وظيفة ترقيم الصفحات المخصصة
دعنا ننتقل إلى إنشاء وظيفة من شأنها جلب البيانات من واجهة برمجة التطبيقات وتحديث الحالة بالبيانات المستلمة حديثًا. ستحدد هذه الوظيفة ما سيتم عرضه على شاشة تطبيق React Native.
حسنًا حدد هذه الوظيفة كدالة غير متزامنة يأخذ معلمة الصفحة ويعيد وعدًا يحل البيانات التي تم جلبها.
مقدار ثابت PAGE_SIZE = 10;
مقدار ثابت fetchBooks = غير متزامن (صفحة) => {
يحاول {
مقدار ثابت استجابة = انتظر أحضر(` https://myapi.com/books? الصفحة =$ {صفحة}& pageSize ={PAGE_SIZE} دولار`);
مقدار ثابت json = انتظر response.json () ؛
يعود json.data ؛
} يمسك (خطأ) {
وحدة التحكم. Error (error)؛
يعود [];
}
}
في كتلة التعليمات البرمجية أعلاه ، ملف جلب الكتب تأخذ الوظيفة أ صفحة وإرجاع التعهد الذي يحل البيانات من تلك الصفحة. هنا ، مقاس الصفحه ثابت يستخدم للحد من عدد الكتب التي يتم جلبها لكل صفحة.
تنفيذ التحميل الديناميكي بمساعدة وظيفة ترقيم الصفحات المخصصة
مع تحديد وظيفة ترقيم الصفحات المخصصة ، يمكنك الآن استخدامها لتنفيذ التحميل الديناميكي في التطبيق. للقيام بذلك ، استخدم ملف قائمة مسطحة المكون ، وهو مكون عالي الأداء لعرض قوائم كبيرة من البيانات في React Native.
أولاً ، قم بإعداد ملف قائمة مسطحة مكون مع بعض الحالة الأولية:
يستورد React ، {useState ، useEffect} من'تتفاعل';
يستورد {FlatList، View، Text} من"رد فعل أصلي";مقدار ثابت التطبيق = () => {
مقدار ثابت [books، setBooks] = useState ([])؛
مقدار ثابت [currentPage، setCurrentPage] = useState (1);useEffect (() => {
// إحضار الصفحة الأولية من البيانات
fetchBooks (currentPage). ثم (بيانات => setBooks (البيانات)) ؛
}, []);مقدار ثابت RenderItem = ({ غرض }) => {
يعود (حجم الخط: 18 }}> {item.title} </Text> حجم الخط: 14 }}> {item.author} </Text>
</View>
);
};يعود (
البيانات = {كتب}
renderItem = {renderItem}
keyExtractor = {item => item.id.toString ()}
/>
);
}
يصدّرتقصير برنامج؛
يقوم هذا الرمز بإعداد مكون FlatList بقطعتين من الحالة ، وهما الكتب و الصفحه الحاليه. نحن نستخدم ال useEffect () ربط لجلب الصفحة الأولية للبيانات عند تشغيل التطبيق لأول مرة.
بعد ذلك ، نحدد ملف عنصر الوظيفة التي تأخذ عنصرًا من ملف الكتب صفيف وإرجاع أ منظر يحتوي على عنوان الكتاب والمؤلف.
أخيرًا ، لقد اجتزنا الكتب مجموعة ل بيانات دعامة من قائمة مسطحةجنبًا إلى جنب مع عنصر وظيفة و keyExtractor.
علينا الآن التأكد من أن القائمة المسطحة الخاصة بنا يمكن أن تكتشف متى يقوم المستخدم بالتمرير إلى نهاية القائمة. في هذه المرحلة ، يجب أن يشرع في جلب البيانات الجديدة وتحميلها وعرضها.
للقيام بذلك ، سنستخدم ملف onEndReached الدعامة المقدمة إلى قائمة مسطحة، وهو رد اتصال يسمى عندما يقوم المستخدم بالتمرير إلى نهاية القائمة. يجب علينا أيضًا تحديث الصفحه الحاليه الدولة لتتبع الصفحة التي نتواجد فيها حاليًا.
إليك الكود المحدث الذي ينفذ كل هذا:
يستورد React ، {useState ، useEffect} من'تتفاعل';
يستورد {FlatList، View، Text} من"رد فعل أصلي";مقدار ثابت التطبيق = () => {
مقدار ثابت [books، setBooks] = useState ([])؛
مقدار ثابت [currentPage، setCurrentPage] = useState (1);
مقدار ثابت [isLoading، setIsLoading] = useState (خطأ شنيع);useEffect (() => {
fetchBooks (currentPage). ثم (بيانات => setBooks (البيانات)) ؛
}, []);مقدار ثابت جلب المزيد = غير متزامن () => {
لو (هو التحميل) يعود;setIsLoading (حقيقي);
مقدار ثابت nextPage = currentPage + 1;
مقدار ثابت newData = انتظر fetchBooks (nextPage) ؛setCurrentPage (nextPage) ،
setIsLoading (خطأ شنيع);
مجموعة كتب (prevData => [... prevData،... newData])؛
};مقدار ثابت RenderItem = ({ غرض }) => {
يعود (حشوة: 16 }}> حجم الخط: 18 }}> {item.title} </Text> حجم الخط: 14 }}> {item.author} </Text>
</View>
);
};يعود (
البيانات = {كتب}
renderItem = {renderItem}
keyExtractor = {item => item.id.toString ()}
onEndReached = {fetchMore}
onEndReachedThreshold = {0.1}
/>
);
}
يصدّرتقصير برنامج؛
هنا أضفنا حالتين جديدتين تسمى تحميل و onEndReachedThreshold. تحميل يتتبع ما إذا كنا نجلب البيانات حاليًا ، و onEndReachedThreshold حرائق onEndReached رد الاتصال عندما يقوم المستخدم بالتمرير إلى حدود 10٪ من نهاية القائمة.
أنشأنا وظيفة جديدة تسمى جلب المزيد الذي يعمل متى onEndReached مطرود من العمل. إنه يتحقق مما إذا كنا نقوم بالفعل بتحميل البيانات ، وإذا لم يكن الأمر كذلك ، فإنه يجلب الصفحة التالية من البيانات ويحدّث قائمتنا.
أخيرًا ، أضفنا الدعائم الضرورية الجديدة إلى قائمة مسطحة عنصر. ال قائمة مسطحة المكون الآن بشكل ديناميكي تحميل البيانات بينما يقوم المستخدم بالتمرير إلى نهاية القائمة.
تحسين أداء تطبيقك باستخدام ترقيم الصفحات المخصص
لقد تعلمت كيفية تحميل البيانات ديناميكيًا في React Native باستخدام نظام ترقيم الصفحات المخصص الخاص بك. تمنحك هذه الطريقة مزيدًا من المرونة والتحكم عند التعامل مع كميات كبيرة من البيانات في تطبيقك. تذكر تخصيص ترقيم الصفحات بحيث يتناسب مع أسلوب التطبيق واحتياجاته. يمكنك تخصيصه بشكل أكبر لتحقيق الشكل والوظيفة المطلوبين. بشكل عام ، سيساعدك بالتأكيد على تحسين أداء تطبيقك.
