React هو إطار عمل JavaScript للواجهة الأمامية. في حين أن إنشاء صفحات HTML وإدارتها يمكن أن يصبح مملاً ، فإن React تجعل الأمور أسهل عن طريق تقسيم العناصر التي تظهر على الشاشة ومنطقها إلى مكونات.

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

ما هي الخطافات في ReactJS؟

الخطاف هو مفهوم جديد تم تقديمه في React لإدارة الحالة وغيرها ميزات React. باستخدام الخطافات في React ، يمكنك تجنب كتابة تعليمات برمجية طويلة قد تستخدم الفئات بخلاف ذلك. يوضح المثال التالي مثالاً على useState صنارة صيد.

const [متغير ، setVariable] = useState (القيمة الأولية) ؛

هنا عامل هي الدولة و تعيين متغير هي الوظيفة التي تحدد الدولة. useState هو الخطاف الذي يحمل القيمة الأولية لمتغير الحالة. لا تقلق إذا لم يكن هذا منطقيًا بالنسبة لك. بنهاية هذا البرنامج التعليمي ، سيكون لديك فهم قوي للخطافات.

هناك نوعان من الخطافات:

• الخطافات الأساسية
  1. useState
  2. useEffect
  3. useContext
• خطافات إضافية
  1. استخدم
  2. useMemo
  3. useReducer

useState ()

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

يمكنك الرجوع إلى المثال السابق للحصول على صيغة خطافات React. أبسط مثال للتوضيح useState () هو مثال متغير العد:

استيراد {useState} من "رد فعل" ؛
وظيفة التطبيق () {
const [count، setCount] = useState (0) ،
إرجاع (


مثال الخطافات

{عدد}

setCount (count + 1)}> إضافة
setCount (count-1)}> طرح



);
}

ال useState يحتوي الخطاف على متغير وطريقة تستخدم لتعيين قيمة المتغير. ال useState يقبل الخطاف القيمة الأولية للدولة كمعامل. يمكنك تعيين أي قيمة لمتغير العد باستخدام setCount طريقة.

يوجد زران في الكود أعلاه لزيادة وتقليل قيمة عدد عامل. أثناء الزيادة ، يمكنك إضافة +1 إلى حالة العد الحالية و -1 لتقليل العدد بمقدار 1.

useEffect

ال useEffect يقوم hook بتحديث الحالة على صفحة الويب بعد كل تغيير في الحالة. ال useEffect تم إدخال الخطاف لإزالة الآثار الجانبية للمكونات الطبقية. قبل إدخال المكونات المستندة إلى الوظيفة ، تم تتبع التغييرات في الحالة باستخدام مكونات دورة الحياة: المكون و المكون ال useEffect يقبل الخطاف مصفوفة التبعية. يتم تتبع جميع التغييرات في متغيرات الحالة المذكورة في مصفوفة التبعية وعرضها باستخدام useEffect صنارة صيد.

مثال كلاسيكي على استخدام useEffect هو الخطاف جلب البيانات من API أو حساب الإعجابات أو الاشتراكات على منشور.

useEffect (() => {
// الشفرة
} ، [مصفوفة التبعية]) ؛

النظر في المثال أعلاه

استيراد {useState، useEffect} من "رد فعل"؛
وظيفة التطبيق () {
const [count، setCount] = useState (0) ،
useEffect (() => {
document.title = `لقد نقرت $ {count} مرة`؛
}، [عدد])؛
إرجاع (


مثال الخطافات

{عدد}

 setCount (count + 1)}> إضافة



);
}

عند تمرير عدد متغير الحالة في useEffect مصفوفة التبعية ، تتحقق مما إذا كانت الحالة قد تغيرت أم لا. ثم يقوم بتعيين عنوان المستند إلى متغير العد.

useContext

ال useContext يساعد الخطاف في تمرير البيانات عبر المكون دون القيام بذلك يدويًا عبر الدعائم. يجعل استخدام Context API سريعًا وسهلاً. سيكون لديك فهم أفضل بعد المرور بمثال.

أولاً ، افهم كيف تبدو الشفرة بدون استخدام السياق. كما ترى ، يجب عليك تمرير النص عبر الدعائم إلى المكون الفرعي. لتجنب التعقيدات ، يمكنك استخدام useContext صنارة صيد.

تصدير تطبيق الوظيفة الافتراضية () {
اسمح للنص = "مرحبًا ، مرحبًا بك في MUO" ؛
إرجاع (






);
}
const ChildComponent = ({text}) => {
إرجاع 
{نص}
;
};

أولاً ، قم بإنشاء موفر في ملفك الرئيسي (App.js).

سياق const = React.createContext (خالية) ؛

ال تطبيق المكون هو مكون المستوى الأعلى أو المكون "الأصل". تحتاج إلى التفاف المكون بأكمله في ملف وتمرير الكائن أو البيانات التي تريد عرضها على المكون الفرعي.

تصدير تطبيق الوظيفة الافتراضية () {
اسمح للنص = "مرحبًا ، مرحبًا بك في MUO" ؛
إرجاع (








);
}

الآن ، أنشئ مكونًا فرعيًا وقم بالوصول إلى خاصيّة النص باستخدام useContext صنارة صيد. مرر ال مفهوم متغير باستخدام إنشاء المحتوى.

const ChildComponent = () => {
اسمح للنص = useContext (السياق) ؛
console.log (نص) ؛
إرجاع 
{نص}
;
};

متعلق ب: أطر عمل جافا سكريبت تستحق التعلم​​​​​

المزيد لاستكشافه مع React

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

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

كيفية استخدام الدعائم في ReactJS

إذا كنت تبحث عن نصائح حول كيفية استخدام الدعائم في ReactJS ، فأنت في المكان الصحيح.

اقرأ التالي

نبذة عن الكاتب