الفرق بين المراجعتين لصفحة: «ReactNative/optimizing flatlist configuration»

المراجعة الحالية بتاريخ 13:44، 9 أكتوبر 2021

تعرف على المصطلحات التالية:

VirtualizedList: وهو المكوّن الكامن وراء FlatList (تنفيذ إطار عمل React Native لمفهوم القائمة الافتراضية Virtual List).
استهلاك الذاكرة Memory consumption: مقدار المعلومات المخزَّنة في قائمتك ضمن الذاكرة، مما قد يؤدي إلى تعطّل التطبيق.
الاستجابة Responsiveness: قدرة التطبيق على الاستجابة للتفاعلات، فالاستجابة المنخفضة مثلًا هي عندما تلمس أحد المكوّنات وتنتظر هذا المكون قليلًا ليستجيب، بدلًا من الاستجابة الفورية كما هو متوقَّع.
المناطق الفارغة Blank areas: يمكنك إدخال جزء من قائمتك بمكونات غير مصيَّرة وظاهرة كمنطقة فارغة، عندما يتعذّر على القائمة VirtualizedList تصيير render العناصر الخاصة بك بالسرعة الكافية.
إطار العرض Viewport: المنطقة المرئية من المحتوى التي تُصيَّر إلى بكسلات.
النافذة Window: هي المنطقة التي يجب تحميل العناصر فيها، والتي تكون أكبر بكثير من إطار العرض Viewport.

الخاصيات

سنعرض فيما يلي قائمة بالخاصيات التي يمكن أن تساعد في تحسين أداء المكون 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}
  />

  // ...
}

مصادر

صفحة Optimizing Flatlist Configuration في توثيق React Native الرسمي.

@@ سطر 1: / سطر 1: @@
-== تحسين إعداد قائمة مسطحة Flatlist ==
+<noinclude>{{DISPLAYTITLE:تحسين إعداد المكون Flatlist في React Native}}</noinclude>
+تعرف على المصطلحات التالية:
+*'''[[ReactNative/virtualizedlist|<code>VirtualizedList</code>]]''': وهو المكوّن الكامن وراء <code>FlatList</code> (تنفيذ إطار عمل React Native لمفهوم القائمة الافتراضية <code>[https://bvaughn.github.io/react-virtualized/#/components/List Virtual List]</code>).
+*'''استهلاك الذاكرة Memory consumption''': مقدار المعلومات المخزَّنة في قائمتك ضمن الذاكرة، مما قد يؤدي إلى تعطّل التطبيق.
+*'''الاستجابة Responsiveness''': قدرة التطبيق على الاستجابة للتفاعلات، فالاستجابة المنخفضة مثلًا هي عندما تلمس أحد المكوّنات وتنتظر هذا المكون قليلًا ليستجيب، بدلًا من الاستجابة الفورية كما هو متوقَّع.
+*'''المناطق الفارغة Blank areas''': يمكنك إدخال جزء من قائمتك بمكونات غير مصيَّرة وظاهرة كمنطقة فارغة، عندما يتعذّر على القائمة <code>VirtualizedList</code> تصيير render العناصر الخاصة بك بالسرعة الكافية.
+*'''إطار العرض Viewport''': المنطقة المرئية من المحتوى التي تُصيَّر إلى بكسلات.
+*'''النافذة Window''': هي المنطقة التي يجب تحميل العناصر فيها، والتي تكون أكبر بكثير من إطار العرض Viewport.
-=== مصطلحات ===
+== الخاصيات ==
+سنعرض فيما يلي قائمة بالخاصيات التي يمكن أن تساعد في تحسين أداء المكون <code>FlatList</code>:
-* '''VirtualizedList''': وهو المكوّن الكامن وراء <code>FlatList</code> (تنفيذ إطار React Native لمفهوم القائمة الافتراضية <code>[https://bvaughn.github.io/react-virtualized/#/components/List Virtual List]</code>).
+=== <code>removeClippedSubviews</code> ===
-* '''استهلاك الذاكرة Memory consumption''': مقدار المعلومات المخزَّنة في قائمتك ضمن الذاكرة، مما قد يؤدي إلى تعطّل التطبيق.
-* '''الاستجابة Responsiveness''': قدرة التطبيق على الاستجابة للتفاعلات، فالاستجابة المنخفضة مثلًا هي عندما تلمس أحد المكوّنات وينتظر هذا المكون قليلًا ليستجيب، بدلًا من الاستجابة الفورية كما هو متوقَّع.
-* '''المناطق الفارغة Blank areas''': يمكنك إدخال جزء من قائمتك بمكونات غير مصيَّرة وظاهرة كمنطقة فارغة، عندما يتعذّر على القائمة <code>VirtualizedList</code> تصيير render العناصر الخاصة بك بالسرعة الكافية.
-* '''إطار العرض Viewport''': المنطقة المرئية من المحتوى التي تُصيَّر إلى بكسلات.
-* '''النافذة Window''': هي المنطقة التي يجب تحميل العناصر فيها، والتي تكون أكبر بكثير من إطار العرض Viewport.
-=== الخاصيات Props ===
-سنعرض فيما يلي قائمة بالخاصيات التي يمكن أن تساعد في تحسين أداء القائمة <code>FlatList</code>:
-==== removeClippedSubviews ====
 {| class="wikitable"
 !النوع
 !القيمة الافتراضية
 |-
-|Boolean
+|قيمة منطقية Boolean
 |False
 |}
@@ سطر 25: / سطر 23: @@
 '''الإيجابيات''': يعمل ذلك على تقليل الوقت المُستغرَق في الخيط thread الرئيسي، وبالتالي يقلل من مخاطر إسقاط الإطارات، عن طريق استبعاد العروض الموجودة خارج إطار العرض من التصيير الأصيل ورسم عمليات العبور traversals.
-'''السلبيات''': يجب أن تدرك أن هذا التنفيذ قد يحتوي على أخطاء، مثل المحتوى المفقود (المُلاحَظ بصورة أساسية على نظام iOS)، خاصةً إذا تنفيذ بأشياء معقدة باستخدام تحويلات و / أو تحديد الموضع المطلق. لاحظ أيضًا أن ذلك لا يوفّر ذاكرةً كبيرة بسبب عدم إلغاء تخصيص deallocated العروض، وإنما فصلها detached فقط.
+'''السلبيات''': يجب أن تدرك أن هذا التطبيق قد يحتوي على أخطاء، مثل المحتوى المفقود (المُلاحَظ بصورة أساسية على نظام iOS)، خاصةً إذا نفّذت أشياء معقدة باستخدام تحويلات و / أو تحديد الموضع المطلق. لاحظ أيضًا أن ذلك لا يوفّر ذاكرةً كبيرة بسبب عدم إلغاء تخصيص deallocated العروض، وإنما فصلها detached فقط.
-==== maxToRenderPerBatch ====
+=== <code>maxToRenderPerBatch</code> ===
 {| class="wikitable"
 !النوع
 !القيمة الافتراضية
 |-
-|Number
+|عدد Number
 |10
 |}
-وهي خاصية <code>VirtualizedList</code> التي يمكن تمريرها عبر قائمة <code>FlatList</code>. تتحكم هذه الخاصية في مقدار العناصر المُصيَّرة لكل دفعة، وهي القطعة التالية من العناصر المُصيَّرة في كل تمرير scroll.
+وهي خاصية <code>VirtualizedList</code> التي يمكن تمريرها عبر المكوّن <code>FlatList</code>. تتحكم هذه الخاصية في مقدار العناصر المُصيَّرة لكل دفعة، وهي القطعة التالية من العناصر المُصيَّرة في كل تمرير scroll.
 '''الإيجابيات''':  يعني ضبطُ عدد أكبر تقليلَ المناطق الفارغة المرئية عند التمرير (أي يزيد من معدّل التعبئة).
-'''السلبيات''': يعني المزيد من العناصر لكل دفعة فتراتٍ أطول لتنفيذ شيفرة JavaScript الذي يحتمل أن يوقف معالجة الأحداث الأخرى -مثل الضغط presses- مما يضر بالاستجابة.
+'''السلبيات''': يعني المزيد من العناصر لكل دفعة فتراتٍ أطول لتنفيذ شيفرة JavaScript التي يحتمل أن توقف معالجة الأحداث الأخرى -مثل الضغط presses- مما يضرّ بالاستجابة.
-==== updateCellsBatchingPeriod ====
+=== <code>updateCellsBatchingPeriod</code> ===
 {| class="wikitable"
 !النوع
 !القيمة الافتراضية
 |-
-|Number
+|عدد Number
 |50
 |}
-تعطينا الخاصية <code>maxToRenderPerBatch</code> مقدار العناصر التي المُصيَّرة لكل دفعة، بينما يعطي إعداد الخاصية <code>updateCellsBatchingPeriod</code> القائمة <code>VirtualizedList</code> الخاصة بك التأخيرَ مقدرًا بالميلي ثانية بين عمليات تصيير الدُفعات (أي عدد المرات التي سيصيّر فيها المكون العناصر المعروضة في النوافذ).
+تعطينا الخاصية <code>maxToRenderPerBatch</code> مقدار العناصر المُصيَّرة لكل دفعة، بينما يعطي إعداد الخاصية <code>updateCellsBatchingPeriod</code> القائمة <code>VirtualizedList</code> الخاصة بك التأخيرَ مقدرًا بالميلي ثانية بين عمليات تصيير الدفعات (أي عدد المرات التي سيصيّر فيها المكون العناصر المعروضة في النوافذ).
 '''الإيجابيات''': يمنحك الجمع بين هذه الخاصية مع الخاصية <code>maxToRenderPerBatch</code> القدرة على تصيير المزيد من العناصر في دفعة أقل تكرارًا على سبيل المثال، أو تصيير عناصر أقل في دفعة أكثر تكرارًا.
@@ سطر 55: / سطر 53: @@
 '''السلبيات''': قد تتسبب الدُفعات الأقل تكرارًا في وجود مناطق فارغة، وقد تتسبب الدفعات الأكثر تكرارًا في حدوث مشكلات في الاستجابة.
-==== initialNumToRender ====
+=== <code>initialNumToRender</code> ===
 {| class="wikitable"
 !النوع
 !القيمة الافتراضية
 |-
-|Number
+|عدد Number
 |10
 |}
@@ سطر 69: / سطر 67: @@
 '''السلبيات''': قد يؤدي تعيين قيمة منخفضة للخاصية <code>initialNumToRender</code> إلى ظهور مناطق فارغة، وخاصةً إن كانت صغيرة جدًا بحيث لا تغطي إطار العرض عند التصيير الأولي.
-==== windowSize ====
+=== <code>windowSize</code> ===
 {| class="wikitable"
 !النوع
 !القيمة الافتراضية
 |-
-|Number
+|عدد Number
 |21
 |}
-الرقم الذي نمرّره هو وحدة قياس، حيث يكافئ الرقم 1 ارتفاع إطار العرض viewport. القيمة الافتراضية هي 21 (أي 10 إطارات عرض في الأعلى، و 10 في الأسفل، وواحد بينهما).
+العدد الذي نمرّره هو وحدة قياس، حيث يكافئ الرقم 1 ارتفاع إطار العرض viewport. القيمة الافتراضية هي 21 (أي 10 إطارات عرض في الأعلى، و 10 في الأسفل، وواحد بينهما).
-'''الإيجابيات''': سينتج عن حجم النافذة <code>windowSize</code> الأكبر فرصة أقل لرؤية منطقة فارغة أثناء التمرير، بينما سيؤدي حجم النافذة <code>windowSize</code> الأصغر إلى عدد أقل من العناصر المُحمَّلة في الوقت ذاته، مما يوفّر من الذاكرة.
+'''الإيجابيات''': سينتج عن حجم النافذة <code>windowSize</code> الأكبر فرصةٌ أقل لرؤية منطقة فارغة أثناء التمرير، بينما سيؤدي حجم النافذة <code>windowSize</code> الأصغر إلى عدد أقل من العناصر المُحمَّلة في الوقت ذاته، مما يوفّر من الذاكرة.
 '''السلبيات''': سيكون لديك استهلاك ذاكرة أكبر بالنسبة لحجم نافذة <code>windowSize</code> أكبر، بينما سيكون لديك فرصة أكبر لرؤية مناطق فارغة بالنسبة لحجم نافذة <code>windowSize</code> منخفض.
-=== عناصر القائمة ===
+== عناصر القائمة ==
 سنعرض فيما يلي بعض النصائح حول مكونات عناصر القائمة، فهذه العناصر هي أساس قائمتك، لذلك يجب أن تكون سريعة.
+=== استخدام المكونات الأساسية ===
+كلما كانت مكوناتك أكثر تعقيدًا، كلما كان تصييرها أبطأ، لذلك حاول تجنب الكثير من المنطق والتداخل بين عناصر قائمتك. إن أردت إعادة استخدام مكون عنصر القائمة كثيرًا في تطبيقك، فأنشئ مكونًا فقط لقوائمك الكبيرة واجعلها تحتوي أقل قدر ممكن من المنطق والتداخل.
+=== استخدم المكونات الخفيفة ===
+كلما كانت مكوناتك أثقل، كلما كان تصييرها أبطأ. تجنّب استخدام الصور الثقيلة (استخدم نسخة مقصوصة أو صورة مصغَّرة لعناصر القائمة، واجعلها أصغر ما يمكن). تحدّث إلى فريق التصميم الخاص بك، واستخدم أقل قدر ممكن من التأثيرات والتفاعلات والمعلومات في قائمتك، ولكن أظهرها في تفاصيل عنصرك.
+=== استخدام التابع shouldComponentUpdate ===
+طبّق تحققًا من تحديث مكوناتك. يطبّق الصنف <code>PureComponent</code> الخاص بمكتبة  React التابع <code>[[React/react component#shouldComponentUpdate.28.29|shouldComponentUpdate]]</code> بمقارنة ضئيلة. وهذا مكلف لأنه يحتاج إلى فحص جميع خاصياتك. إن أردت أداءً جيدًا على مستوى البت، فأنشئ القواعد الأكثر صرامة لمكونات عناصر القائمة مع فحص العناصر التي يمكن أن تتغير فقط. إذا كانت قائمتك أساسية بما يكفي، فيمكنك استخدام ما يلي:<syntaxhighlight lang="javascript">
+shouldComponentUpdate() {
+  return false
+}
+</syntaxhighlight>
+=== استخدام الصور المحسَّنة والمخزَّنة مؤقتًا ===
+يمكنك استخدام حزم المجتمع (مثل [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 ===
+إن كانت جميع مكونات عناصر القائمة لديك لها نفس الارتفاع (أو العرض في قائمة أفقية)، فإن توفير الخاصية [[ReactNative/flatlist#getItemLayout|getItemLayout]] يزيل الحاجة إلى المكون <code>FlatList</code> لإدارة حسابات التخطيط غير المتزامن، وهذه تقنية تحسين مرغوبة للغاية.
+إن كانت مكوناتك ذات حجم ديناميكي وأنت بحاجة أداء أفضل، فاسأل فريق التصميم الخاص بك عن التفكير في إعادة التصميم من أجل الحصول على أداء أفضل.
+=== استخدام المفتاح keyExtractor أو key ===
+يمكنك ضبط المفتاح [[ReactNative/flatlist#keyExtractor|<code>keyExtractor</code>]] للمكوّن <code>FlatList</code> الخاص بك، حيث تُستخدَم هذه الخاصية للتخزين المؤقت caching وكمفتاح React لتتبّع إعادة ترتيب العناصر. يمكنك أيضًا استخدام خاصيّة المفتاح <code>key</code> في مكوّن العنصر الخاص بك.
+=== تجنب الدالة المجهولة anonymous function في renderItem ===
+انقل الدالة <code>renderItem</code> إلى خارج دالة التصيير، لذلك لن تعيد إنشاء نفسها في كل استدعاء لدالة التصيير.<syntaxhighlight lang="javascript">
+renderItem = ({ item }) => (<View key={item.key}><Text>{item.title}</Text></View>);
+render(){
+  // ...
+  <FlatList
+    data={items}
+    renderItem={renderItem}
+  />
+  // ...
+}
+</syntaxhighlight>
+== مصادر ==
+* [https://reactnative.dev/docs/optimizing-flatlist-configuration صفحة Optimizing Flatlist Configuration في توثيق React Native الرسمي.]
+[[تصنيف:ReactNative]]
+[[تصنيف:React Native Docs]]