الفرق بين المراجعتين ل"ReactNative/optimizing flatlist configuration"
(أنشأ الصفحة ب'== تحسين إعداد قائمة مسطحة Flatlist == === مصطلحات === * '''VirtualizedList''': وهو المكوّن الكامن وراء <code>FlatList</...') |
جميل-بيلوني (نقاش | مساهمات) ط |
||
| (4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
| − | + | <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>: | ||
| − | + | === <code>removeClippedSubviews</code> === | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!القيمة الافتراضية | !القيمة الافتراضية | ||
|- | |- | ||
| − | |Boolean | + | |قيمة منطقية Boolean |
|False | |False | ||
|} | |} | ||
| سطر 25: | سطر 23: | ||
'''الإيجابيات''': يعمل ذلك على تقليل الوقت المُستغرَق في الخيط thread الرئيسي، وبالتالي يقلل من مخاطر إسقاط الإطارات، عن طريق استبعاد العروض الموجودة خارج إطار العرض من التصيير الأصيل ورسم عمليات العبور traversals. | '''الإيجابيات''': يعمل ذلك على تقليل الوقت المُستغرَق في الخيط thread الرئيسي، وبالتالي يقلل من مخاطر إسقاط الإطارات، عن طريق استبعاد العروض الموجودة خارج إطار العرض من التصيير الأصيل ورسم عمليات العبور traversals. | ||
| − | '''السلبيات''': يجب أن تدرك أن هذا | + | '''السلبيات''': يجب أن تدرك أن هذا التطبيق قد يحتوي على أخطاء، مثل المحتوى المفقود (المُلاحَظ بصورة أساسية على نظام iOS)، خاصةً إذا نفّذت أشياء معقدة باستخدام تحويلات و / أو تحديد الموضع المطلق. لاحظ أيضًا أن ذلك لا يوفّر ذاكرةً كبيرة بسبب عدم إلغاء تخصيص deallocated العروض، وإنما فصلها detached فقط. |
| − | === | + | === <code>maxToRenderPerBatch</code> === |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!القيمة الافتراضية | !القيمة الافتراضية | ||
|- | |- | ||
| − | |Number | + | |عدد Number |
|10 | |10 | ||
|} | |} | ||
| − | وهي خاصية <code>VirtualizedList</code> التي يمكن تمريرها عبر | + | وهي خاصية <code>VirtualizedList</code> التي يمكن تمريرها عبر المكوّن <code>FlatList</code>. تتحكم هذه الخاصية في مقدار العناصر المُصيَّرة لكل دفعة، وهي القطعة التالية من العناصر المُصيَّرة في كل تمرير scroll. |
'''الإيجابيات''': يعني ضبطُ عدد أكبر تقليلَ المناطق الفارغة المرئية عند التمرير (أي يزيد من معدّل التعبئة). | '''الإيجابيات''': يعني ضبطُ عدد أكبر تقليلَ المناطق الفارغة المرئية عند التمرير (أي يزيد من معدّل التعبئة). | ||
| − | '''السلبيات''': يعني المزيد من العناصر لكل دفعة فتراتٍ أطول لتنفيذ شيفرة JavaScript | + | '''السلبيات''': يعني المزيد من العناصر لكل دفعة فتراتٍ أطول لتنفيذ شيفرة JavaScript التي يحتمل أن توقف معالجة الأحداث الأخرى -مثل الضغط presses- مما يضرّ بالاستجابة. |
| − | === | + | === <code>updateCellsBatchingPeriod</code> === |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!القيمة الافتراضية | !القيمة الافتراضية | ||
|- | |- | ||
| − | |Number | + | |عدد Number |
|50 | |50 | ||
|} | |} | ||
| − | تعطينا الخاصية <code>maxToRenderPerBatch</code> مقدار العناصر | + | تعطينا الخاصية <code>maxToRenderPerBatch</code> مقدار العناصر المُصيَّرة لكل دفعة، بينما يعطي إعداد الخاصية <code>updateCellsBatchingPeriod</code> القائمة <code>VirtualizedList</code> الخاصة بك التأخيرَ مقدرًا بالميلي ثانية بين عمليات تصيير الدفعات (أي عدد المرات التي سيصيّر فيها المكون العناصر المعروضة في النوافذ). |
'''الإيجابيات''': يمنحك الجمع بين هذه الخاصية مع الخاصية <code>maxToRenderPerBatch</code> القدرة على تصيير المزيد من العناصر في دفعة أقل تكرارًا على سبيل المثال، أو تصيير عناصر أقل في دفعة أكثر تكرارًا. | '''الإيجابيات''': يمنحك الجمع بين هذه الخاصية مع الخاصية <code>maxToRenderPerBatch</code> القدرة على تصيير المزيد من العناصر في دفعة أقل تكرارًا على سبيل المثال، أو تصيير عناصر أقل في دفعة أكثر تكرارًا. | ||
| سطر 55: | سطر 53: | ||
'''السلبيات''': قد تتسبب الدُفعات الأقل تكرارًا في وجود مناطق فارغة، وقد تتسبب الدفعات الأكثر تكرارًا في حدوث مشكلات في الاستجابة. | '''السلبيات''': قد تتسبب الدُفعات الأقل تكرارًا في وجود مناطق فارغة، وقد تتسبب الدفعات الأكثر تكرارًا في حدوث مشكلات في الاستجابة. | ||
| − | === | + | === <code>initialNumToRender</code> === |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!القيمة الافتراضية | !القيمة الافتراضية | ||
|- | |- | ||
| − | |Number | + | |عدد Number |
|10 | |10 | ||
|} | |} | ||
| سطر 69: | سطر 67: | ||
'''السلبيات''': قد يؤدي تعيين قيمة منخفضة للخاصية <code>initialNumToRender</code> إلى ظهور مناطق فارغة، وخاصةً إن كانت صغيرة جدًا بحيث لا تغطي إطار العرض عند التصيير الأولي. | '''السلبيات''': قد يؤدي تعيين قيمة منخفضة للخاصية <code>initialNumToRender</code> إلى ظهور مناطق فارغة، وخاصةً إن كانت صغيرة جدًا بحيث لا تغطي إطار العرض عند التصيير الأولي. | ||
| − | === | + | === <code>windowSize</code> === |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!القيمة الافتراضية | !القيمة الافتراضية | ||
|- | |- | ||
| − | |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> منخفض. | ||
| − | + | == عناصر القائمة == | |
سنعرض فيما يلي بعض النصائح حول مكونات عناصر القائمة، فهذه العناصر هي أساس قائمتك، لذلك يجب أن تكون سريعة. | سنعرض فيما يلي بعض النصائح حول مكونات عناصر القائمة، فهذه العناصر هي أساس قائمتك، لذلك يجب أن تكون سريعة. | ||
| + | |||
| + | === استخدام المكونات الأساسية === | ||
| + | كلما كانت مكوناتك أكثر تعقيدًا، كلما كان تصييرها أبطأ، لذلك حاول تجنب الكثير من المنطق والتداخل بين عناصر قائمتك. إن أردت إعادة استخدام مكون عنصر القائمة كثيرًا في تطبيقك، فأنشئ مكونًا فقط لقوائمك الكبيرة واجعلها تحتوي أقل قدر ممكن من المنطق والتداخل. | ||
| + | |||
| + | === استخدم المكونات الخفيفة === | ||
| + | كلما كانت مكوناتك أثقل، كلما كان تصييرها أبطأ. تجنّب استخدام الصور الثقيلة (استخدم نسخة مقصوصة أو صورة مصغَّرة لعناصر القائمة، واجعلها أصغر ما يمكن). تحدّث إلى فريق التصميم الخاص بك، واستخدم أقل قدر ممكن من التأثيرات والتفاعلات والمعلومات في قائمتك، ولكن أظهرها في تفاصيل عنصرك. | ||
| + | |||
| + | === استخدام التابع 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]] | ||
المراجعة الحالية بتاريخ 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}
/>
// ...
}