rn-performance
تحسين أداء React Native
تعاني تطبيقات React Native غالباً من تقطع التمرير، وإعادة العرض غير الضرورية، وبطء أداء القوائم. توفر هذه المهارة أنماطاً مُثبتة لتحسين FlatList، والحفظ المؤقت، وإدارة الحالة التي تزيل عوائق الأداء.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「rn-performance」。 قائمة FlatList الخاصة بي تحتوي على 1000 عنصر وتتمرر بشكل سيء وتسبب تقطعاً
預期結果:
- إضافة keyExtractor مع useCallback للمفاتيح الثابتة
- استخدام getItemLayout للعناصر ذات الارتفاع الثابت لتجاوز القياس
- حفظ renderItem مؤقتاً باستخدام useCallback
- تفعيل removeClippedSubviews لإلغاء تحميل العناصر خارج الشاشة
- تعيين maxToRenderPerBatch={10} و windowSize={5}
- النظر في FlashList للقوائم التي تحتوي على أكثر من 1000 عنصر
正在使用「rn-performance」。 كيف أمنع إعادة العرض غير الضرورية في عناصر القائمة الخاصة بي
預期結果:
- لف مكونات عناصر القائمة بـ React.memo
- استخدام useCallback لأي callbacks تُمرر كخصائص
- تجنب تمرير مراجع كائنات جديدة كخصائص
- استخدام المقارنة السطحية لكائنات الخصائص المعقدة
- الحفاظ على مصفوفات التبعيات بحد أدنى وثابتة
正在使用「rn-performance」。 مخزن Zustand الخاص بي يتسبب في إعادة عرض شاملة
預期結果:
- استبدال تحديد المخزن بالكامل بمحددات محددة
- استخدام useShallow من zustand/react لقيم متعددة
- الاشتراك فقط في قيم الحالة التي يحتاجها مكونك
- تقسيم المخازن حسب المجال لتقليل نطاق إعادة العرض
安全審計
安全All 56 static findings are FALSE POSITIVES. This is a pure documentation skill containing only markdown with TypeScript code examples. The scanner incorrectly flagged TypeScript template literals (backticks) as shell execution, metadata URL as network exfiltration, and React terminology as C2 indicators. No executable code, network calls, file access, or system modifications exist.
風險因素
🌐 網路存取 (1)
⚙️ 外部命令 (40)
品質評分
你能建構什麼
إصلاح تقطع التمرير
تحسين أداء FlatList في تطبيقات React Native التي تعاني من انخفاض الإطارات أثناء التمرير.
تقليل إعادة العرض
تنفيذ أنماط الحفظ المؤقت لمنع تحديثات المكونات غير الضرورية وتحسين استجابة واجهة المستخدم.
تحسين تحميل الصور
تكوين expo-image مع التخزين المؤقت والتحميل الأولوي لعرض أكثر سلاسة للصور في القوائم.
試試這些提示
قائمة FlatList الخاصة بي في React Native تتمرر ببطء. أرني كيفية إضافة keyExtractor مع useCallback، و getItemLayout للعناصر ذات الارتفاع الثابت، وحفظ دالة renderItem مؤقتاً.
ساعدني في تطبيق React.memo و useCallback على مكون عنصر قائمة. أرني كيفية إنشاء callback ثابت واستخدام المقارنة السطحية للخصائص المعقدة.
مخزن Zustand الخاص بي يتسبب في إعادة عرض جميع المكونات عند تغيير أي حالة. أرني كيفية استخدام المحددات مع useShallow لإعادة العرض فقط عند تغيير قيم محددة.
ساعدني في إعداد why-did-you-render في مشروع React Native الخاص بي واستخدام React DevTools Profiler لتحديد المكونات التي يتم عرضها بشكل غير ضروري.
最佳實務
- قم دائماً بلف renderItem الخاص بـ FlatList مع useCallback لمنع مراجع الدوال الجديدة في كل عملية عرض
- استخدم getItemLayout للقوائم ذات العناصر بارتفاع ثابت للتخلص من عبء القياس
- طبق المحددات السطحية في Zustand للاشتراك فقط في قيم الحالة المحددة التي يحتاجها مكونك
避免
- استخدام دوال السهم المضمنة لـ keyExtractor أو renderItem (ينشئ دوالاً جديدة في كل عملية عرض)
- تحديد مخزن Zustand بالكامل بدلاً من محددات محددة (يتسبب في إعادة عرض شاملة)
- حفظ الوصول إلى الخصائص البدائية البسيطة مؤقتاً حيث يتجاوز العبء الفائدة