تعرف على فائدة الخطاف 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!