ابنِ تطبيقات React و Next.js أسرع باستخدام أنماط الأداء المجربة. توفر هذه المهارة إرشادات عملية من Vercel Engineering للقضاء على مشاكل waterfalls، وتقليل حجم الحزمة، وتحسين العرض.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“vercel-react-best-practices”。 مكون مع fetches useEffect متسلسلة
预期结果:
المشكلة: ثلاثة hooks useEffect تجلب البيانات بشكل متسلسل، مما يسبب render waterfall. الحل: اجمع عمليات الجلب في useEffect واحدة مع Promise.all() أو حول الأب إلى مكون خادم.
正在使用“vercel-react-best-practices”。 عبارة import تسحب مكتبة lodash كاملة
预期结果:
المشكلة: import _ from lodash يضيف 72KB إلى الحزمة. الحل: استخدم عمليات استيراد قابلة لـ tree-shaking مثل import debounce from lodash/debole أو انتقل إلى lodash-es لتحسين أفضل للحزمة.
正在使用“vercel-react-best-practices”。 مكون يعيد حساب قيمة مكلفة في كل عرض
预期结果:
المشكلة: الحساب المكلف يعمل في كل عرض. الحل: لفه في useMemo مع التبعيات المناسبة، أو استخراجه إلى مكون memo منفصل يعيد العرض فقط عندما تتغير المدخلات.
安全审计
安全Static analysis detected 911 pattern matches across 51 files (4901 lines), but all findings are FALSE POSITIVES. The skill is a documentation-only repository containing React/Next.js performance optimization guidelines in markdown format. Detected patterns (shell commands, dynamic imports, fetch calls, storage access) exist solely as code examples within documentation, not as executable code. No actual security risks identified.
质量评分
你能构建什么
بناء ميزات React الجديدة
مطورو React الذين يبنون ميزات جديدة يكتبون مكونات بأداء أمثل من البداية، مع اتباع أنماط Vercel المعتمدة لجلب البيانات والعرض وتحسين الحزمة
مراجعة طلبات السحب
الفرق التي تراجع طلبات السحب تتحقق من الكود من أنماط الأداء السيئة قبل الدمج، وتكتشف waterfalls وإعادة العرض غير الضرورية وتضخم الحزمة مبكراً في التطوير
الانتقال إلى Next.js App Router
المهندسون الذين ينتقلون إلى Next.js App Router يحولون أنماط جانب العميل إلى بنية مكونات الخادم، ويتعلمون الاستخدام الصحيح لتخزين الخادم المؤقت وحدود التسلسل وجلب البيانات المتوازي
试试这些提示
راجع مكون React هذا من مشاكل الأداء. حدد أي render waterfalls أو إعادة عرض غير ضرورية أو فرص تحسين الحزمة. اقترح تحسينات محددة بناءً على أفضل ممارسات Vercel.
يجلب هذا المكون البيانات بشكل متسلسل. أعد هيكلته للجلب ��التوازي باستخدام Promise.all() أو أعد هيكلته كمكونات خادم. اشرح أي نهج أفضل لحالة الاستخدام هذه.
حلل جلب البيانات لمكون الخادم هذا. أوصي باستراتيجية تخزين مؤقت باستخدام React.cache() لإلغاء التكرار لكل طلب أو تخزين مؤقت LRU للتحسين عبر الطلبات. اinclude اعتبارات إبطال التخزين المؤقت.
صمم لوحة معلومات مع 10+ أدوات تعرض البيانات الفورية والتاريخية. حدد: 1) حدود مكونات الخادم والعميل، 2) استراتيجية جلب البيانات والتخزين المؤقت، 3) حالات التحميل مع Suspense، 4) تحسين الحزمة لمكتبات الرسم البيانية التابعة لجهات خارجية.
最佳实践
- ابدأ الوعود مبكراً وأنتظر متأخراً - ابدأ جلب البيانات قبل الحاجة إليها، وأجل await حتى تصبح القيمة مطلوبة
- استخدم مكونات الخادم افتراضياً - أضف 'use client' فقط عندما تكون مطلوب APIs المتصفح أو التفاعلية
- فضل SWR أو React Query لجلب بيانات العميل - تخزين مؤقت مدمج، وإلغاء التكرار، وإعادة التحقق
避免
- جلب البيانات المتسلسل في hooks useEffect منفصلة - يسبب render waterfalls
- استيراد مكتبات أدوات كاملة - حزم منتفخة، استخدم استيرادات محددة بدلاً من ذلك
- استخدام && للعرض الشرطي للمكونات التي تعرض '0' - استخدم عامل ثلاثي