اشرح لي خطافات التفاعل

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

ما هي الحاجة إلى الخطافات المخصصة؟

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

أرني الرمز:

import React, { useState } from 'react';


// Custom Counter Hooks
const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(value=>value   1);
  const decrement = () => setCount(value=>value - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
};
export default useCounter;

import useCounter from './useCounter';

const Counter = () => {

  // Using Counter Hooks
  const { count, increment, decrement, reset } = useCounter();

  return (
    

      
{count}
      Increment
      Decrement
      Reset
    
  );
};

قواعد الخطافات المخصصة

استدعاء الخطافات في المستوى الأعلى فقط: لا تستدعي الخطافات داخل الحلقات أو الشروط أو الوظائف المتداخلة.

استدعاء الخطافات فقط من وظائف React: يجب استخدام الخطافات في المكونات الوظيفية أو الخطافات المخصصة الأخرى.