خبير React و Next.js

مراجعة كود بالذكاء الاصطناعي لـ React

يفهم diffray React. قواعد Hooks وأنماط المكونات وتحسين الأداء وإمكانية الوصول — مراجعة بالذكاء الاصطناعي لتطبيقات React الحديثة.

React18+
Next.js13+ App Router
Remix2.x
Gatsby5.x
Vite + React5.x

مصمم لمطوري React

وكلاء ذكاء اصطناعي يفهمون أنماط React وhooks وأفضل الممارسات الحديثة.

Hooks والحالة

اكتشف انتهاكات React hooks والإغلاقات القديمة وأخطاء إدارة الحالة.

  • تبعيات useEffect
  • Hooks شرطية
  • تحديثات الحالة في الحلقات

الأداء

حدد عمليات إعادة الرسم غير الضرورية والتخزين المؤقت المفقود وتضخم الحزمة.

  • useMemo/useCallback
  • تحسين الرسم
  • تقسيم الكود

إمكانية الوصول

تأكد من أن المكونات قابلة للوصول مع ARIA ودعم لوحة المفاتيح المناسب.

  • سمات ARIA
  • التنقل بلوحة المفاتيح
  • إدارة التركيز

تصميم المكونات

تحقق من أنماط المكونات والـ props وأفضل ممارسات التركيب.

  • أنواع Props
  • تركيب المكونات
  • استخدام key

مشاكل React الشائعة التي نكتشفها

تبعيات useEffect المفقودة
بيانات قديمة، حلقات لا نهائية، حالات سباق
وكيل Bugs يتحقق من مصفوفات التبعيات
عمليات إعادة رسم غير ضرورية
واجهة بطيئة، موارد مهدرة، تجربة مستخدم سيئة
وكيل Performance يجد التخزين المؤقت المفقود
XSS عبر dangerouslySetInnerHTML
ثغرة أمنية، سرقة بيانات
وكيل Security يحدد حقن HTML غير الآمن
ملصقات إمكانية الوصول المفقودة
غير قابل للاستخدام لقارئات الشاشة، مخاطر قانونية
فحوصات إمكانية الوصول على العناصر التفاعلية

قواعد مخصصة لـ React Stack الخاص بك

فرض أنماط React لفريقك. اطلب استخدام hook محدد أو هياكل مكونات أو معايير إمكانية الوصول.

  • فرض useCallback لمعالجات الأحداث
  • طلب error boundaries في المسارات
  • التحقق من إمكانية الوصول في النماذج
  • التحقق من حالات التحميل المناسبة
.diffray/rules/react.yaml
rules:
  - id: react_use_error_boundary
    agent: bugs
    title: Routes need error boundaries
    description: All route components should
      have error boundaries for resilience
    importance: 8
    match:
      file_glob:
        - 'app/**/page.tsx'
        - 'pages/**/*.tsx'
    checklist:
      - Verify ErrorBoundary wraps component
      - Check for error fallback UI
      - Ensure errors are logged
    tags:
      - react
      - reliability
      - next-js

الأسئلة الشائعة عن React

ابنِ تطبيقات React أفضل

انضم إلى فرق React التي تستخدم diffray لمراجعة كود خبيرة بالذكاء الاصطناعي.

التحقق من Hooks
فحوصات الأداء
تدقيق إمكانية الوصول