مقدمة إلى React useCallBack ()

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

تساعدنا وظيفة useCallback() في React على تحقيق ذلك من خلال تذكر الوظائف التي نحددها وإعادة إنشائها فقط عند الضرورة.هذا يمكن أن يجعل موقع الويب أسرع وأكثر استجابة للمستخدمين. React هي مكتبة JavaScript الأمامية الأكثر شيوعًا ، وفقًا لاستطلاع Stack Overflow في نفس العام ، مما يشير إلى أن useCallback () من المرجح استخدامها على نطاق واسع في الصناعة.

في هذه المقالة ، سنشرح ما هو useCallBack () في React وكيفية استخدامه في كود React لتحسين الأداء.

ما هو useCallBack في React؟

useCallback () هي وظيفة ربط توفرها React وتستخدم لتذكير دالة. بمعنى آخر ، يساعد على تحسين أداء المكون عن طريق تجنب إعادة العرض غير المرغوب فيه.

في React ، عندما تتغير حالة المكون أو الخاصية ، يُعاد تصيير المكوِّن ليعكس القيم المحدَّثة. هذه العملية مكلفة من الناحية الحسابية ويمكن أن تقلل من أداء التطبيق إذا تم التعامل معها بشكل غير صحيح. هذا هو المكان الذي يكون فيه useCallback () مفيدًا.

باستخدام useCallback () ، يمكن للمستخدمين تذكير دالة ، مما يعني أنه يتم إعادة تعريفها فقط عندما تتغير تبعياتها. هذا يمنع إعادة عرض المكونات غير الضرورية ، وبالتالي تحسين أداء التطبيق.

هنا مثال -

const memoizedCallback = useCallback (

() => {

افعل شيئًا (أ ، ب) ؛

} ،

[أ ، ب] ،

) ؛

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

مزايا استخدام useCallBack ()

فيما يلي بعض مزايا استخدام React useCallBack () -

• يمكن أن يساعد useCallback () في تشغيل تطبيقات React بشكل أسرع عن طريق منع التحديثات غير الضرورية للمكونات.
• إذا قام أحد المكونات بجلب الكثير من البيانات وعرضها على شكل رسم بياني ، فيمكنه الاستفادة من useCallback ().
• إذا تم تحديث المكون الرئيسي للرسم البياني ، ولكن التغييرات لا تؤثر على الرسم البياني ، فلا داعي لتحديثه وجلب البيانات مرة أخرى.
• باستخدام useCallback () لحفظ وظيفة جلب البيانات ، يمكننا تجنب التحديثات غير الضرورية وجعل التطبيق أسرع وأكثر سلاسة.
• يمكن أن يؤدي هذا التحسين إلى تحسين تجربة المستخدم ، حيث سيعمل التطبيق بسرعة وكفاءة أكبر.

تحقق مندورات تطوير البرمجياتupGrad لتطوير مهاراتك.

بناء الجملة ومعلمات الاستخدام

const memoizedCallback = useCallback (

() => {

قم بعمل ما()؛

} ،

[التبعية 1 ، التبعية 2]

) ؛

في هذا المثال ، تُذكر وظيفة الخطاف useCallback () وظيفة doSomething ()، مما يعني أنها تخزن الإصدار الذي تم إنشاؤه مسبقًا. لن يتم استخدام الوظيفة المخزنة مؤقتًا إلا في عمليات العرض اللاحقة ما لم تتغير قيمةالتبعية 1 أو التبعية 2.

إذا تغير أي من هذه التبعيات ، فسيتم إنشاء إصدار جديد من وظيفةdoSomething () ، وسيتم استبدال النسخة المخزنة مؤقتًا بالإصدار الجديد.يساعد هذا في تحسين أداء التطبيق عن طريق منع عمليات إنشاء الوظائف غير الضرورية وإعادة عرضها.

الفرق بين useMemo () و useCallBack ()

useCallback و useMemo هما خطافات React التي يمكنها تحسين أداء تطبيق React عن طريق حفظ القيم. يأخذ كلا الخطافين وظيفة كوسيطة ويعيدان نسخة محفوظة من تلك الوظيفة.

إليك الفرق بين الاثنين:

سيناريوهات وقت استخدام useCallBack ()

فيما يلي السيناريوهات التي يمكن فيها استخدام useCallBack () -

مكونات الطفل الأمثل

تعمل useCallback React على تحسين المكونات الفرعية التي تعتمد على المساواة المرجعية لتجنب عمليات التصيير غير الضرورية ، خاصة عند تمرير عمليات الاسترجاعات إلى هذه المكونات الفرعية.

منع عمليات العرض غير الضرورية

يكون React useCallback مفيدًا بشكل خاص عندما يكون لديك مكون به عنصر فرعي يتم عرضه بشكل متكرر دون الحاجة إليه. يمكنك تمرير دالة رد نداء ومجموعة تبعية لاستخدام رد الاتصال لمنع عمليات العرض غير الضرورية.

استغل فرصتك لفهم وظيفة useCallBack () بالتفصيل بمساعدة الدورة التدريبية لمعسكر التدريب على تطوير برامج Full Stack من upGrad.

استكشف دوراتنا التدريبية الشهيرة في هندسة البرمجيات

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

فيما يلي بعض الأمثلة على كيفية تنفيذ الخطاف useCallBack ().

مثال useCallBack 1

عندما يقوم المكوِّن الرئيسي بتمرير دالة كعنصر خاص لمكوِّن فرعي ، يمكن أن تؤدي إعادة التصيير المتكررة للمكون الأب إلى إعادة تصيير المكون الفرعي دون داع. في مثل هذه الحالات ، استخدم useCallback لتذكير الوظيفة التي يمكن أن تساعد في منع عمليات إعادة العرض غير الضرورية هذه.

استيراد React ، {useCallback} من "رد فعل" ؛

دالة ParentComponent () {

const handleButtonClick = useCallback (() => {

console.log ('تم النقر فوق الزر') ؛

} ، []) ؛

يعود (

<ChildComponent onClick = {handleButtonClick} />

) ؛

}

function ChildComponent ({onClick}) {

يعود (

<button onClick = {onClick}> انقر فوقي </ زر>

) ؛

}

مثال useCallBack 2

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

import React، {useState، useCallback} من 'رد فعل'؛

دالة ParentComponent () {

const [data، setData] = useState ([]) ؛

عملية constData = useCallback (() => {

const معالجة البيانات = "البيانات المعالجة" ؛

عودة البيانات المعالجة ؛

}، [بيانات])؛

يعود (

<ChildComponent processData = {processData} />

) ؛

}

function ChildComponent ({processData}) {

نتيجة const = processData () ؛

يعود (

<div> {result} </div>

) ؛

}

تحسين أداء التفاعل باستخدام useCallBack ()

خطاف useCallback هو أداة قوية في React تسمح لك بتذكير وظيفة ما ، مما يضمن إعادة صنعها فقط عندما تتغير إحدى تبعياتها. هذا مفيد بشكل خاص للوظائف كثيفة الأداء التي يتم استدعاؤها بشكل متكرر. تحقق من المثال أدناه لمعرفة كيف يمكن استخدامه -

استيراد {useState، useEffect} من 'رد فعل'؛

وظيفة التطبيق () {

const [word، setWord] = useState (“Bob”) ؛

const say = () => console.log (`كلمتك هي: $ {word}`) ؛

useEffect (() => {

يقول()؛

}، [يقول])؛

عودة <div> مرحبا </ div>؛

}

يوضح المثال أن الخطاف useEffect يعتمد على وظيفة say ، مما يعني أنه يجب تشغيله فقط مع تغيير الوظيفة. ومع ذلك ، نظرًا لفحوصات المساواة المرجعية في React ، فإن الوظيفة مثلاً ستُقيَّم دائمًا على أنها صحيحة ، حتى في حالة عدم وجود تغيير فعلي ، مما يؤدي إلى عمليات تصيير غير ضرورية.

سيتم استخدام رد الاتصال useEffect في كل تصيير ، وهو أمر غير مناسب للأداء. تتمثل إحدى طرق حل هذه المشكلة في نقل الوظيفة إلى كتلة useEffect ، لكن هذا لن يكون حلاً مثاليًا لأنك لن تكون قادرًا على استخدام الوظيفة في أي مكان آخر. تحقق من هذا المثال أدناه -

import React، {useState، useEffect} من 'رد فعل'؛

وظيفة التطبيق () {

const [word، setWord] = useState (“Bob”) ؛

const say = () => console.log (`كلمتك هي: $ {word}`) ؛

useEffect (() => {

يقول()؛

}، [يقول])؛

عودة <div> مرحبا </ div>؛

}

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

استيراد {useState، useEffect، useCallback} من "رد فعل"

وظيفة التطبيق () {

const [word، setWord] = useState (“Bob”)

const say = useCallback (() => console.log (`كلمتك هي: $ {word}`) ، [word])

useEffect (() => {

يقول()

}،[يقول])

العودة <div> مرحبًا! </ div>

}

متى لا تستخدم useCallBack ()

في حين أن useCallback () أداة مفيدة لتحسين الأداء في سيناريوهات معينة ، فهناك أيضًا أوقات يكون فيها غير ضروري أو حتى ضار. فيما يلي بعض الأمثلة على حالات عدم استخدام useCallback ():

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

في هذه الحالات ، قد يؤدي استخدام useCallback () في الواقع إلى تقليل الأداء بسبب الحمل الزائد لإنشاء رد الاتصال المذكر والحفاظ عليه. من المهم دراسة كل حالة استخدام بعناية وموازنة الفوائد المحتملة مقابل التكاليف المحتملة قبل اتخاذ قرار بشأن استخدام useCallback () أم لا.

مهارات تطوير البرمجيات عند الطلب

خاتمة

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

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