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

الخطافات الإضافية التي ستتعلمها هي الاستخدام و useMemo.

الاستخدام

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

ال الاستخدام يحتوي الخطاف على خاصية واحدة فقط: .تيار. لا تعيد React تصيير الصفحة عندما يتغير عنصرها. ولا يتم إعادة تصيير إذا قمت بتغيير قيمة ملف.تيار خاصية. دعونا نفهم استخدام هذا الخطاف بمثال:

import React، {useState، useRef} من 'رد فعل'؛
تصدير تطبيق الوظيفة الافتراضية () {
عدد const = useRef (خالية) ؛
const [number، setNumber] = useState (0) ،
const checkNumber = () => {





instagram viewer


إذا (count.current.value <10) {
count.current.style.backgroundColor = "أحمر" ؛
} آخر {
count.current.style.backgroundColor = "أخضر" ؛
}
};
إرجاع (


أدخل رقمًا أكبر من 10

المرجع = {عدد}
اكتب = "نص"
القيمة = {number}
onChange = {(e) => setNumber (e.target.value)}
/>
 checkNumber ()}> انقر



);
}

في الكود أعلاه ، يتغير لون عنصر الإدخال وفقًا للرقم الذي تدخله في مربع الإدخال. أولاً ، يقوم بتعيين النتيجة من useRef () ربط إلى عدد عامل. هناك عنصران: الإدخال والزر. عنصر الإدخال له قيمة عدد و ال المرجع خاصية علامة الإدخال هي عدد لتتناسب مع المتغير.

عندما تضغط على الزر ، فإن ملف رقم الشيك() يتم استدعاء الوظيفة. تتحقق هذه الوظيفة لمعرفة ما إذا كانت قيمة ملف عدد أكبر من 10. بعد ذلك يحدد لون الخلفية من عنصر الإدخال باستخدام count.current.style.backgroundColor خاصية.

متعلق ب: أساسيات CSS: العمل باستخدام الألوان

useMemo

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

بناء جملة useMemo الخطاف على النحو التالي:

const memoizedValue = useMemo (() => computeExpensiveValue (a)، [a]) ؛

لفهم أفضل ، دعنا نفكر في مثال. يقوم الكود أدناه بتبديل ألوان عنوانين. يستدعي ال useState ربط لتتبع قيمهم. توضح الوظيفة ما إذا كان اللون ساخنًا أم باردًا وفقًا لقيمته. قبل إعادة حالة اللون ، هناك حلقة while التي تتوقف مؤقتًا لمدة ثانية واحدة تقريبًا. هذا لأغراض العرض ، لشرح فائدة useMemo صنارة صيد.

import React، {useState، useMemo} من 'رد فعل'؛
تصدير تطبيق الوظيفة الافتراضية () {
const [color1، setColor1] = useState ("blue") ؛
const [color2، setColor2] = useState ("أخضر") ؛
const toggleColor1 = () => {
إرجاع color1 "أزرق"؟ setColor1 ("أحمر"): setColor1 ("أزرق") ؛
};
const toggleColor2 = () => {
color2 "أخضر"؟ setColor2 ("برتقالي"): setColor2 ("أخضر") ؛
};
عرض const displayColor = () => {
var now = new Date (). getTime () ؛
while (new Date (). getTime () إرجاع color1 "أزرق"؟ "بارد حار"؛
};
إرجاع (


لون النص 1: {color1}

إنه لون {displayColor ()}

تبديل اللون
لون النص 2: {color2}

تبديل اللون



);
}

عند النقر فوق تبديل زر 1، يجب أن تلاحظ تأخيرًا طفيفًا أثناء تغيير الحالة. لاحظ أن هناك أيضًا تأخيرًا عند النقر فوق زر التبديل 2. لكن هذا لا ينبغي أن يحدث ، لأن التوقف لمدة ثانية واحدة يحدث في شاشة العرض. في هذه الصفحة ، يجب أن تكون الأزرار قادرة على العمل بشكل مستقل. لتحقيق ذلك ، يمكنك استخدام useMemo صنارة صيد.

تحتاج إلى التفاف شاشة العرض تعمل في useMemo ربط وتمرير اللون 1 في مصفوفة التبعية.

const displayColor = useMemo (() => {
var now = new Date (). getTime () ؛
while (new Date (). getTime () إرجاع color1 "أزرق"؟ "بارد حار"؛
} ، [color1]) ؛

ال useMemo يأخذ hook وظيفة والتبعيات كمعلمات. ال useMemo سيتم عرض الخطاف فقط عندما تتغير إحدى تبعياته. إنه مفيد في المواقف التي يتعين عليك فيها الجلب من واجهة برمجة التطبيقات.

ماذا تفعل بعد تعلم الخطافات

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

هناك خطافات متقدمة أخرى مثل useReducer, useLayoutEffect، و useDebugValue. يمكنك التعرف عليها بالرجوع إلى وثائق React الرسمية.

أوناتي بامانيا (10 مقالات منشورة)

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

المزيد من Unnati Bamania