كيفية استخدام الخطاف useCallback React

تعرف على فائدة الخطاف useCallback React وكيفية التعامل معها!

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

خطاف React واحد استخدمه أحيانًاuseCallback.

import React, { useCallback } from 'react'

يكون هذا الخطاف مفيدًا عندما يكون لديك مكون مع طفل يعيد عرضه بشكل متكرر ، وتقوم بتمرير رد اتصال إليه:

import React, { useState, useCallback } from 'react'

const Counter = () => { const [count, setCount] = useState(0) const [otherCounter, setOtherCounter] = useState(0)

const increment = () => { setCount(count + 1) } const decrement = () => { setCount(count - 1) } const incrementOtherCounter = () => { setOtherCounter(otherCounter + 1) }

return ( <> Count: {count} <button onClick={increment}>+</button> <button onClick={decrement}>-</button> <button onClick={incrementOtherCounter}>incrementOtherCounter</button> </> ) }

ReactDOM.render(<Counter />, document.getElementById(‘app’))

المشكلة هنا هي أنه في أي وقت يتم فيه تحديث العداد ، يتم إعادة إنشاء جميع الوظائف الثلاثة مرة أخرى.

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

import React, { useState, useCallback } from 'react'

const functionsCounter = new Set()

const Counter = () => { const [count, setCount] = useState(0) const [otherCounter, setOtherCounter] = useState(0)

const increment = () => { setCount(count + 1) } const decrement = () => { setCount(count - 1) } const incrementOtherCounter = () => { setOtherCounter(otherCounter + 1) }

functionsCounter.add(increment) functionsCounter.add(decrement) functionsCounter.add(incrementOtherCounter)

alert(functionsCounter)

return ( <> Count: {count} <button onClick={increment}>+</button> <button onClick={decrement}>-</button> <button onClick={incrementOtherCounter}>incrementOtherCounter</button> </> ) }

ReactDOM.render(<Counter />, document.getElementById(‘app’))

إذا جربت هذا الرمز ، فسترى التنبيه يتزايد بمقدار 3 في كل مرة.

ما يجب أن يحدث بدلاً من ذلك هو أنه إذا قمت بزيادة عداد واحد ، فيجب إعادة إنشاء جميع الوظائف المتعلقة بهذا العداد.

إذا لم تتغير قيمة الحالة الأخرى ، فلا ينبغي لمسها.

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

إذا كانت هذه مشكلة ، يمكنك استخدامuseCallback.

هكذا نفعلها. بدلا من:

const increment = (() => {
  setCount(count + 1)
})
const decrement = (() => {
  setCount(count - 1)
})
const incrementOtherCounter = (() => {
  setOtherCounter(otherCounter + 1)
})

تلتف كل هذه المكالمات في:

const increment = useCallback(() => {
  setCount(count + 1)
}, [count])
const decrement = useCallback(() => {
  setCount(count - 1)
}, [count])
const incrementOtherCounter = useCallback(() => {
  setOtherCounter(otherCounter + 1)
}, [otherCounter])

تأكد من إضافة هذا المصفوفة كمعامل ثاني إلىuseCallback()مع الدولة المطلوبة.

الآن إذا حاولت النقر فوق أحد العدادات ، فسيتم إعادة إنشاء الوظائف المتعلقة بالحالة التي تتغير فقط.

يمكنك تجربة هذا المثال على Codepen:

انظر القلمرد الفعل useCallback hookبقلم فلافيو كوبس (تضمين التغريدة) تشغيلكود.

Tech Wiki Online!