خطافات React هي وظائف تتيح لك "ربط" حالة React وميزات دورة الحياة من المكونات الوظيفية. تتيح لك الخطافات، التي تم تقديمها في React 16.8، استخدام الحالة وميزات React الأخرى دون كتابة مكون فئة.

دعونا نحلل المفاهيم الأساسية وراء الخطافات:

1. لماذا خطافات التفاعل؟

قبل الخطافات، كان من الممكن تنفيذ منطق الحالة فقط في مكونات الفصل. كانت المكونات الوظيفية عديمة الحالة، مما يجعلها أقل تنوعًا. تم تقديم الخطافات إلى:

• السماح بمنطق الحالة في المكونات الوظيفية.
• مشاركة المنطق الخاص بالحالة عبر المكونات بسهولة.
• تجنب التعليمات البرمجية المعيارية (على سبيل المثال، أساليب دورة الحياة في مكونات الفصل).
• تحسين إعادة استخدام المكونات ونمطيتها.

2. القواعد الأساسية للخطافات

هناك قاعدتان أساسيتان يجب اتباعهما عند استخدام الخطافات:

• استدعاء الخطافات في المستوى الأعلى فقط: يجب استدعاء الخطافات في أعلى الوظيفة، وليس داخل الحلقات أو الشروط أو الوظائف المتداخلة. يضمن هذا أن تقوم React باستدعاء الخطافات بنفس الترتيب في كل مرة يتم فيها عرض المكون.
• استدعاء الخطافات فقط من وظائف React: يمكنك استخدام الخطافات في المكونات الوظيفية أو الخطافات المخصصة، ولكن ليس في وظائف JavaScript العادية.

3. خطافات رد فعل مدمجة

دعونا نستكشف بعض الخطافات الرئيسية المضمنة في React:

حالة الاستخدام
يتيح لك useState إضافة حالة إلى مكون وظيفي.

بناء الجملة:

const [state, setState] = useState(initialState);

• الحالة: قيمة الحالة الحالية.
• setState: الوظيفة التي تسمح لك بتحديث الحالة.
• initialState: القيمة الأولية للحالة.

تأثير الاستخدام
useEffect هو الخطاف المستخدم للتعامل مع الآثار الجانبية في المكونات الوظيفية. يمكن أن يشمل ذلك جلب البيانات أو الاشتراكات أو التفاعل المباشر مع DOM.

بناء الجملة:

useEffect(() => {
  // Side effect code
  return () => {
    // Cleanup (optional)
  };
}, [dependencies]);

• الوسيطة الأولى هي وظيفة حيث يمكنك وضع منطق التأثير الجانبي الخاص بك.
• الوسيطة الثانية هي مصفوفة اختيارية من التبعيات. إذا تغير أي من هذه التبعيات، فسيتم تشغيل التأثير مرة أخرى.

4. خطافات مفيدة أخرى

useMemo: لحفظ القيمة المحسوبة لتجنب إعادة الحساب في كل عرض.
useCallback: يحفظ دالة لتجنب إعادة إنشائها في كل عرض.
useLayoutEffect: مشابه لـ useEffect، لكن يتم تشغيله بشكل متزامن بعد كل طفرات DOM.

فوائد السنانير

• رمز المنظف: الخطافات تجعل المكونات أسهل في القراءة والفهم.
• قابلية إعادة الاستخدام: تسمح لك الخطافات بمشاركة المنطق بين المكونات بدون المكوّنات ذات الترتيب الأعلى أو عرض الدعائم.
• إدارة أفضل للحالة: تحكم أكثر دقة في الحالة والآثار الجانبية.
• مزايا المكونات الوظيفية: تمكن من الاستخدام الكامل للبرمجة الوظيفية في مكونات React.

أحدثت الخطافات ثورة في الطريقة التي نكتب بها مكونات React، حيث ابتعدنا عن المكونات القائمة على الفئات ونحو نهج أكثر وظيفية وإيجازًا وقابلية لإعادة الاستخدام لإدارة الحالة والآثار الجانبية.