الفرق بين المراجعتين لصفحة: «ReactNative/optimizing flatlist configuration»
لا ملخص تعديل |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
== تحسين إعداد | == تحسين إعداد المكوّن Flatlist == | ||
=== مصطلحات === | === مصطلحات === | ||
* '''VirtualizedList''': وهو المكوّن الكامن وراء <code>FlatList</code> (تنفيذ إطار React Native لمفهوم القائمة الافتراضية <code>[https://bvaughn.github.io/react-virtualized/#/components/List Virtual List]</code>). | * '''VirtualizedList''': وهو المكوّن الكامن وراء <code>FlatList</code> (تنفيذ إطار عمل React Native لمفهوم القائمة الافتراضية <code>[https://bvaughn.github.io/react-virtualized/#/components/List Virtual List]</code>). | ||
* '''استهلاك الذاكرة Memory consumption''': مقدار المعلومات المخزَّنة في قائمتك ضمن الذاكرة، مما قد يؤدي إلى تعطّل التطبيق. | * '''استهلاك الذاكرة Memory consumption''': مقدار المعلومات المخزَّنة في قائمتك ضمن الذاكرة، مما قد يؤدي إلى تعطّل التطبيق. | ||
* '''الاستجابة Responsiveness''': قدرة التطبيق على الاستجابة للتفاعلات، فالاستجابة المنخفضة مثلًا هي عندما تلمس أحد المكوّنات | * '''الاستجابة Responsiveness''': قدرة التطبيق على الاستجابة للتفاعلات، فالاستجابة المنخفضة مثلًا هي عندما تلمس أحد المكوّنات وتنتظر هذا المكون قليلًا ليستجيب، بدلًا من الاستجابة الفورية كما هو متوقَّع. | ||
* '''المناطق الفارغة Blank areas''': يمكنك إدخال جزء من قائمتك بمكونات غير مصيَّرة وظاهرة كمنطقة فارغة، عندما يتعذّر على القائمة <code>VirtualizedList</code> تصيير render العناصر الخاصة بك بالسرعة الكافية. | * '''المناطق الفارغة Blank areas''': يمكنك إدخال جزء من قائمتك بمكونات غير مصيَّرة وظاهرة كمنطقة فارغة، عندما يتعذّر على القائمة <code>VirtualizedList</code> تصيير render العناصر الخاصة بك بالسرعة الكافية. | ||
* '''إطار العرض Viewport''': المنطقة المرئية من المحتوى التي تُصيَّر إلى بكسلات. | * '''إطار العرض Viewport''': المنطقة المرئية من المحتوى التي تُصيَّر إلى بكسلات. | ||
| سطر 11: | سطر 11: | ||
=== الخاصيات Props === | === الخاصيات Props === | ||
سنعرض فيما يلي قائمة بالخاصيات التي يمكن أن تساعد في تحسين أداء | سنعرض فيما يلي قائمة بالخاصيات التي يمكن أن تساعد في تحسين أداء المكون <code>FlatList</code>: | ||
==== removeClippedSubviews ==== | ==== removeClippedSubviews ==== | ||
| سطر 18: | سطر 18: | ||
!القيمة الافتراضية | !القيمة الافتراضية | ||
|- | |- | ||
|Boolean | |قيمة منطقية Boolean | ||
|False | |False | ||
|} | |} | ||
| سطر 25: | سطر 25: | ||
'''الإيجابيات''': يعمل ذلك على تقليل الوقت المُستغرَق في الخيط thread الرئيسي، وبالتالي يقلل من مخاطر إسقاط الإطارات، عن طريق استبعاد العروض الموجودة خارج إطار العرض من التصيير الأصيل ورسم عمليات العبور traversals. | '''الإيجابيات''': يعمل ذلك على تقليل الوقت المُستغرَق في الخيط thread الرئيسي، وبالتالي يقلل من مخاطر إسقاط الإطارات، عن طريق استبعاد العروض الموجودة خارج إطار العرض من التصيير الأصيل ورسم عمليات العبور traversals. | ||
'''السلبيات''': يجب أن تدرك أن هذا | '''السلبيات''': يجب أن تدرك أن هذا التطبيق قد يحتوي على أخطاء، مثل المحتوى المفقود (المُلاحَظ بصورة أساسية على نظام iOS)، خاصةً إذا نفّذت أشياء معقدة باستخدام تحويلات و / أو تحديد الموضع المطلق. لاحظ أيضًا أن ذلك لا يوفّر ذاكرةً كبيرة بسبب عدم إلغاء تخصيص deallocated العروض، وإنما فصلها detached فقط. | ||
==== maxToRenderPerBatch ==== | ==== maxToRenderPerBatch ==== | ||
| سطر 32: | سطر 32: | ||
!القيمة الافتراضية | !القيمة الافتراضية | ||
|- | |- | ||
|Number | |عدد Number | ||
|10 | |10 | ||
|} | |} | ||
وهي خاصية <code>VirtualizedList</code> التي يمكن تمريرها عبر | وهي خاصية <code>VirtualizedList</code> التي يمكن تمريرها عبر المكوّن <code>FlatList</code>. تتحكم هذه الخاصية في مقدار العناصر المُصيَّرة لكل دفعة، وهي القطعة التالية من العناصر المُصيَّرة في كل تمرير scroll. | ||
'''الإيجابيات''': يعني ضبطُ عدد أكبر تقليلَ المناطق الفارغة المرئية عند التمرير (أي يزيد من معدّل التعبئة). | '''الإيجابيات''': يعني ضبطُ عدد أكبر تقليلَ المناطق الفارغة المرئية عند التمرير (أي يزيد من معدّل التعبئة). | ||
'''السلبيات''': يعني المزيد من العناصر لكل دفعة فتراتٍ أطول لتنفيذ شيفرة JavaScript | '''السلبيات''': يعني المزيد من العناصر لكل دفعة فتراتٍ أطول لتنفيذ شيفرة JavaScript التي يحتمل أن توقف معالجة الأحداث الأخرى -مثل الضغط presses- مما يضرّ بالاستجابة. | ||
==== updateCellsBatchingPeriod ==== | ==== updateCellsBatchingPeriod ==== | ||
| سطر 46: | سطر 46: | ||
!القيمة الافتراضية | !القيمة الافتراضية | ||
|- | |- | ||
|Number | |عدد Number | ||
|50 | |50 | ||
|} | |} | ||
تعطينا الخاصية <code>maxToRenderPerBatch</code> مقدار العناصر | تعطينا الخاصية <code>maxToRenderPerBatch</code> مقدار العناصر المُصيَّرة لكل دفعة، بينما يعطي إعداد الخاصية <code>updateCellsBatchingPeriod</code> القائمة <code>VirtualizedList</code> الخاصة بك التأخيرَ مقدرًا بالميلي ثانية بين عمليات تصيير الدفعات (أي عدد المرات التي سيصيّر فيها المكون العناصر المعروضة في النوافذ). | ||
'''الإيجابيات''': يمنحك الجمع بين هذه الخاصية مع الخاصية <code>maxToRenderPerBatch</code> القدرة على تصيير المزيد من العناصر في دفعة أقل تكرارًا على سبيل المثال، أو تصيير عناصر أقل في دفعة أكثر تكرارًا. | '''الإيجابيات''': يمنحك الجمع بين هذه الخاصية مع الخاصية <code>maxToRenderPerBatch</code> القدرة على تصيير المزيد من العناصر في دفعة أقل تكرارًا على سبيل المثال، أو تصيير عناصر أقل في دفعة أكثر تكرارًا. | ||
| سطر 60: | سطر 60: | ||
!القيمة الافتراضية | !القيمة الافتراضية | ||
|- | |- | ||
|Number | |عدد Number | ||
|10 | |10 | ||
|} | |} | ||
| سطر 74: | سطر 74: | ||
!القيمة الافتراضية | !القيمة الافتراضية | ||
|- | |- | ||
|Number | |عدد Number | ||
|21 | |21 | ||
|} | |} | ||
العدد الذي نمرّره هو وحدة قياس، حيث يكافئ الرقم 1 ارتفاع إطار العرض viewport. القيمة الافتراضية هي 21 (أي 10 إطارات عرض في الأعلى، و 10 في الأسفل، وواحد بينهما). | |||
'''الإيجابيات''': سينتج عن حجم النافذة <code>windowSize</code> الأكبر | '''الإيجابيات''': سينتج عن حجم النافذة <code>windowSize</code> الأكبر فرصةٌ أقل لرؤية منطقة فارغة أثناء التمرير، بينما سيؤدي حجم النافذة <code>windowSize</code> الأصغر إلى عدد أقل من العناصر المُحمَّلة في الوقت ذاته، مما يوفّر من الذاكرة. | ||
'''السلبيات''': سيكون لديك استهلاك ذاكرة أكبر بالنسبة لحجم نافذة <code>windowSize</code> أكبر، بينما سيكون لديك فرصة أكبر لرؤية مناطق فارغة بالنسبة لحجم نافذة <code>windowSize</code> منخفض. | '''السلبيات''': سيكون لديك استهلاك ذاكرة أكبر بالنسبة لحجم نافذة <code>windowSize</code> أكبر، بينما سيكون لديك فرصة أكبر لرؤية مناطق فارغة بالنسبة لحجم نافذة <code>windowSize</code> منخفض. | ||
| سطر 87: | سطر 87: | ||
==== استخدام المكونات الأساسية ==== | ==== استخدام المكونات الأساسية ==== | ||
كلما كانت مكوناتك أكثر تعقيدًا، كلما كان تصييرها أبطأ، لذلك حاول تجنب الكثير من المنطق والتداخل بين عناصر قائمتك. إن | كلما كانت مكوناتك أكثر تعقيدًا، كلما كان تصييرها أبطأ، لذلك حاول تجنب الكثير من المنطق والتداخل بين عناصر قائمتك. إن أردت إعادة استخدام مكون عنصر القائمة كثيرًا في تطبيقك، فأنشئ مكونًا فقط لقوائمك الكبيرة واجعلها تحتوي أقل قدر ممكن من المنطق والتداخل. | ||
==== استخدم المكونات الخفيفة ==== | ==== استخدم المكونات الخفيفة ==== | ||
| سطر 100: | سطر 100: | ||
==== استخدام الصور المحسَّنة والمخزَّنة مؤقتًا ==== | ==== استخدام الصور المحسَّنة والمخزَّنة مؤقتًا ==== | ||
يمكنك استخدام حزم المجتمع (مثل [https://github.com/DylanVann/react-native-fast-image react-native-fast-image] لصاحبها [https://github.com/DylanVann DylanVann]) للحصول على صور ذات أداءً افضل. كل صورة في قائمتك هي نسخة من | يمكنك استخدام حزم المجتمع (مثل [https://github.com/DylanVann/react-native-fast-image react-native-fast-image] لصاحبها [https://github.com/DylanVann DylanVann]) للحصول على صور ذات أداءً افضل. كل صورة في قائمتك هي نسخة من <code>new Image()</code>. كلما وصلت إلى الخطاف <code>loaded</code> بصورة أسرع، كلما زادت سرعة تحرير خيط JavaScript مرة أخرى. | ||
==== استخدام الخاصية getItemLayout ==== | ==== استخدام الخاصية getItemLayout ==== | ||
إن كانت جميع مكونات عناصر القائمة لديك لها نفس الارتفاع (أو العرض في قائمة أفقية)، فإن توفير الخاصية [[ReactNative/flatlist#getItemLayout|getItemLayout]] يزيل الحاجة إلى | إن كانت جميع مكونات عناصر القائمة لديك لها نفس الارتفاع (أو العرض في قائمة أفقية)، فإن توفير الخاصية [[ReactNative/flatlist#getItemLayout|getItemLayout]] يزيل الحاجة إلى المكون <code>FlatList</code> لإدارة حسابات التخطيط غير المتزامن، وهذه تقنية تحسين مرغوبة للغاية. | ||
إن كانت مكوناتك ذات حجم ديناميكي وأنت بحاجة أداء أفضل، فاسأل فريق التصميم الخاص بك عن التفكير في إعادة التصميم من أجل الحصول على أداء أفضل. | إن كانت مكوناتك ذات حجم ديناميكي وأنت بحاجة أداء أفضل، فاسأل فريق التصميم الخاص بك عن التفكير في إعادة التصميم من أجل الحصول على أداء أفضل. | ||
| سطر 110: | سطر 110: | ||
يمكنك ضبط المفتاح [[ReactNative/flatlist#keyExtractor|<code>keyExtractor</code>]] للمكوّن <code>FlatList</code> الخاص بك، حيث تُستخدَم هذه الخاصية للتخزين المؤقت caching وكمفتاح React لتتبّع إعادة ترتيب العناصر. يمكنك أيضًا استخدام خاصيّة المفتاح <code>key</code> في مكوّن العنصر الخاص بك. | يمكنك ضبط المفتاح [[ReactNative/flatlist#keyExtractor|<code>keyExtractor</code>]] للمكوّن <code>FlatList</code> الخاص بك، حيث تُستخدَم هذه الخاصية للتخزين المؤقت caching وكمفتاح React لتتبّع إعادة ترتيب العناصر. يمكنك أيضًا استخدام خاصيّة المفتاح <code>key</code> في مكوّن العنصر الخاص بك. | ||
==== تجنّب الدالة المجهولة في renderItem ==== | ==== تجنّب الدالة المجهولة anonymous function في renderItem ==== | ||
انقل الدالة <code>renderItem</code> إلى خارج دالة التصيير، لذلك لن تعيد إنشاء نفسها في كل استدعاء لدالة التصيير.<syntaxhighlight lang="javascript"> | انقل الدالة <code>renderItem</code> إلى خارج دالة التصيير، لذلك لن تعيد إنشاء نفسها في كل استدعاء لدالة التصيير.<syntaxhighlight lang="javascript"> | ||
renderItem = ({ item }) => (<View key={item.key}><Text>{item.title}</Text></View>); | renderItem = ({ item }) => (<View key={item.key}><Text>{item.title}</Text></View>); | ||
مراجعة 23:11، 24 يونيو 2021
تحسين إعداد المكوّن Flatlist
مصطلحات
- VirtualizedList: وهو المكوّن الكامن وراء
FlatList(تنفيذ إطار عمل React Native لمفهوم القائمة الافتراضيةVirtual List). - استهلاك الذاكرة Memory consumption: مقدار المعلومات المخزَّنة في قائمتك ضمن الذاكرة، مما قد يؤدي إلى تعطّل التطبيق.
- الاستجابة Responsiveness: قدرة التطبيق على الاستجابة للتفاعلات، فالاستجابة المنخفضة مثلًا هي عندما تلمس أحد المكوّنات وتنتظر هذا المكون قليلًا ليستجيب، بدلًا من الاستجابة الفورية كما هو متوقَّع.
- المناطق الفارغة Blank areas: يمكنك إدخال جزء من قائمتك بمكونات غير مصيَّرة وظاهرة كمنطقة فارغة، عندما يتعذّر على القائمة
VirtualizedListتصيير render العناصر الخاصة بك بالسرعة الكافية. - إطار العرض Viewport: المنطقة المرئية من المحتوى التي تُصيَّر إلى بكسلات.
- النافذة Window: هي المنطقة التي يجب تحميل العناصر فيها، والتي تكون أكبر بكثير من إطار العرض Viewport.
الخاصيات Props
سنعرض فيما يلي قائمة بالخاصيات التي يمكن أن تساعد في تحسين أداء المكون FlatList:
removeClippedSubviews
| النوع | القيمة الافتراضية |
|---|---|
| قيمة منطقية Boolean | False |
إذا كانت قيمة هذه الخاصية true، فستُفصَل العروض الموجودة خارج إطار العرض عن هرمية العرض الأصيلة.
الإيجابيات: يعمل ذلك على تقليل الوقت المُستغرَق في الخيط thread الرئيسي، وبالتالي يقلل من مخاطر إسقاط الإطارات، عن طريق استبعاد العروض الموجودة خارج إطار العرض من التصيير الأصيل ورسم عمليات العبور traversals.
السلبيات: يجب أن تدرك أن هذا التطبيق قد يحتوي على أخطاء، مثل المحتوى المفقود (المُلاحَظ بصورة أساسية على نظام iOS)، خاصةً إذا نفّذت أشياء معقدة باستخدام تحويلات و / أو تحديد الموضع المطلق. لاحظ أيضًا أن ذلك لا يوفّر ذاكرةً كبيرة بسبب عدم إلغاء تخصيص deallocated العروض، وإنما فصلها detached فقط.
maxToRenderPerBatch
| النوع | القيمة الافتراضية |
|---|---|
| عدد Number | 10 |
وهي خاصية VirtualizedList التي يمكن تمريرها عبر المكوّن FlatList. تتحكم هذه الخاصية في مقدار العناصر المُصيَّرة لكل دفعة، وهي القطعة التالية من العناصر المُصيَّرة في كل تمرير scroll.
الإيجابيات: يعني ضبطُ عدد أكبر تقليلَ المناطق الفارغة المرئية عند التمرير (أي يزيد من معدّل التعبئة).
السلبيات: يعني المزيد من العناصر لكل دفعة فتراتٍ أطول لتنفيذ شيفرة JavaScript التي يحتمل أن توقف معالجة الأحداث الأخرى -مثل الضغط presses- مما يضرّ بالاستجابة.
updateCellsBatchingPeriod
| النوع | القيمة الافتراضية |
|---|---|
| عدد Number | 50 |
تعطينا الخاصية maxToRenderPerBatch مقدار العناصر المُصيَّرة لكل دفعة، بينما يعطي إعداد الخاصية updateCellsBatchingPeriod القائمة VirtualizedList الخاصة بك التأخيرَ مقدرًا بالميلي ثانية بين عمليات تصيير الدفعات (أي عدد المرات التي سيصيّر فيها المكون العناصر المعروضة في النوافذ).
الإيجابيات: يمنحك الجمع بين هذه الخاصية مع الخاصية maxToRenderPerBatch القدرة على تصيير المزيد من العناصر في دفعة أقل تكرارًا على سبيل المثال، أو تصيير عناصر أقل في دفعة أكثر تكرارًا.
السلبيات: قد تتسبب الدُفعات الأقل تكرارًا في وجود مناطق فارغة، وقد تتسبب الدفعات الأكثر تكرارًا في حدوث مشكلات في الاستجابة.
initialNumToRender
| النوع | القيمة الافتراضية |
|---|---|
| عدد Number | 10 |
تمثّل هذه الخاصية المقدار الأولي للعناصر المراد تصييرها.
الإيجابيات: تحديد عدد العناصر التي ستغطي الشاشة لكل جهاز بدقة، وبالتالي يمكن أن يكون هذا تعزيزًا كبيرًا لأداء التصيير الأولي.
السلبيات: قد يؤدي تعيين قيمة منخفضة للخاصية initialNumToRender إلى ظهور مناطق فارغة، وخاصةً إن كانت صغيرة جدًا بحيث لا تغطي إطار العرض عند التصيير الأولي.
windowSize
| النوع | القيمة الافتراضية |
|---|---|
| عدد Number | 21 |
العدد الذي نمرّره هو وحدة قياس، حيث يكافئ الرقم 1 ارتفاع إطار العرض viewport. القيمة الافتراضية هي 21 (أي 10 إطارات عرض في الأعلى، و 10 في الأسفل، وواحد بينهما).
الإيجابيات: سينتج عن حجم النافذة windowSize الأكبر فرصةٌ أقل لرؤية منطقة فارغة أثناء التمرير، بينما سيؤدي حجم النافذة windowSize الأصغر إلى عدد أقل من العناصر المُحمَّلة في الوقت ذاته، مما يوفّر من الذاكرة.
السلبيات: سيكون لديك استهلاك ذاكرة أكبر بالنسبة لحجم نافذة windowSize أكبر، بينما سيكون لديك فرصة أكبر لرؤية مناطق فارغة بالنسبة لحجم نافذة windowSize منخفض.
عناصر القائمة
سنعرض فيما يلي بعض النصائح حول مكونات عناصر القائمة، فهذه العناصر هي أساس قائمتك، لذلك يجب أن تكون سريعة.
استخدام المكونات الأساسية
كلما كانت مكوناتك أكثر تعقيدًا، كلما كان تصييرها أبطأ، لذلك حاول تجنب الكثير من المنطق والتداخل بين عناصر قائمتك. إن أردت إعادة استخدام مكون عنصر القائمة كثيرًا في تطبيقك، فأنشئ مكونًا فقط لقوائمك الكبيرة واجعلها تحتوي أقل قدر ممكن من المنطق والتداخل.
استخدم المكونات الخفيفة
كلما كانت مكوناتك أثقل، كلما كان تصييرها أبطأ. تجنّب استخدام الصور الثقيلة (استخدم نسخة مقصوصة أو صورة مصغَّرة لعناصر القائمة، واجعلها أصغر ما يمكن). تحدّث إلى فريق التصميم الخاص بك، واستخدم أقل قدر ممكن من التأثيرات والتفاعلات والمعلومات في قائمتك، ولكن أظهرها في تفاصيل عنصرك.
استخدام التابع shouldComponentUpdate
طبّق تحققًا من تحديث مكوناتك. يطبّق الصنف PureComponent الخاص بمكتبة React التابع shouldComponentUpdate بمقارنة ضئيلة. وهذا مكلف لأنه يحتاج إلى فحص جميع خاصياتك. إن أردت أداءً جيدًا على مستوى البت، فأنشئ القواعد الأكثر صرامة لمكونات عناصر القائمة مع فحص العناصر التي يمكن أن تتغير فقط. إذا كانت قائمتك أساسية بما يكفي، فيمكنك استخدام ما يلي:
shouldComponentUpdate() {
return false
}
استخدام الصور المحسَّنة والمخزَّنة مؤقتًا
يمكنك استخدام حزم المجتمع (مثل react-native-fast-image لصاحبها DylanVann) للحصول على صور ذات أداءً افضل. كل صورة في قائمتك هي نسخة من new Image(). كلما وصلت إلى الخطاف loaded بصورة أسرع، كلما زادت سرعة تحرير خيط JavaScript مرة أخرى.
استخدام الخاصية getItemLayout
إن كانت جميع مكونات عناصر القائمة لديك لها نفس الارتفاع (أو العرض في قائمة أفقية)، فإن توفير الخاصية getItemLayout يزيل الحاجة إلى المكون FlatList لإدارة حسابات التخطيط غير المتزامن، وهذه تقنية تحسين مرغوبة للغاية.
إن كانت مكوناتك ذات حجم ديناميكي وأنت بحاجة أداء أفضل، فاسأل فريق التصميم الخاص بك عن التفكير في إعادة التصميم من أجل الحصول على أداء أفضل.
استخدام المفتاح keyExtractor أو key
يمكنك ضبط المفتاح keyExtractor للمكوّن FlatList الخاص بك، حيث تُستخدَم هذه الخاصية للتخزين المؤقت caching وكمفتاح React لتتبّع إعادة ترتيب العناصر. يمكنك أيضًا استخدام خاصيّة المفتاح key في مكوّن العنصر الخاص بك.
تجنّب الدالة المجهولة anonymous function في renderItem
انقل الدالة renderItem إلى خارج دالة التصيير، لذلك لن تعيد إنشاء نفسها في كل استدعاء لدالة التصيير.
renderItem = ({ item }) => (<View key={item.key}><Text>{item.title}</Text></View>);
render(){
// ...
<FlatList
data={items}
renderItem={renderItem}
/>
// ...
}