تعلم React 19: الدليل الكامل لتطبيقات الويب الحديثة/

...

/

الخطافات المخصصة: إعادة استخدام المنطق عبر المكونات

الخطافات المخصصة: إعادة استخدام المنطق عبر المكونات

اكتشف كيف تقوم الخطافات المخصصة بتجميع المنطق المتعلق بالحالة في وظائف قابلة لإعادة الاستخدام حتى تظل مكوناتك نظيفة ومتسقة.

سنغطي ما يلي...

في التطبيقات المتنامية، غالبًا ما نكرر أنماط الحالة والتأثير نفسها عبر مكونات متعددة، مثل جلب البيانات، والمزامنة مع التخزين المحلي، وتبديل حالات واجهة المستخدم، أو منع ارتداد المدخلات. قد يبدو النسخ واللصق سهلًا في البداية، لكنه سرعان ما يؤدي إلى منطق مكرر، وإصلاحات غير متسقة، وقاعدة بيانات هشة يصعب صيانتها.

فهم الخطافات المخصصة

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

الخطاف المخصص هو وظيفة يبدأ اسمها بـuse (إنه حسب الاتفاقية، على سبيل المثال،useToggle ) التي تستخدم React Hooks داخليًا (useState ،useEffect ، إلخ) لتنفيذ سلوك يمكننا إعادة استخدامه.

بناء الجملة

هذا هو الهيكل العام لخطاف مخصص يدير الحالة الداخلية ويعرض API بسيطة.

Javascript (babel-node)
import { useState } from "react";
export function useSomething(initialValue) {
  const [value, setValue] = useState(initialValue);
  function updateValue(newValue) {
    setValue(newValue);
  }
  return { value, updateValue };
}

  • الخط 3: تتبع الخطافات المخصصةuse اتفاقية التسمية ويمكنها قبول معلمات مثل القيم الأولية أو التكوينات.

  • السطر 4: تعتمد الخطافات عادةً على الخطافات المضمنة في React (useState ،useEffect ، إلخ) داخليًا.

  • الأسطر 6-8: تعمل وظائف المساعدة الداخلية على التعامل مع التحديثات أو المنطق المتعلق بغرض الخطاف.

  • السطر 10: يقوم Hook بإرجاع كائن أو مجموعة تحتوي على البيانات والوظائف التي يمكن للمكون المستهلك استخدامها.

مثال على الاستخدام

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

  • السطر 1: يدعو المكونuseSomet ...