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

إنشاء خطاف مخصص

الخطاف المخصص هو في الأساس وظيفة JavaScript يبدأ اسمها بالاستخدام وقد يستدعي خطافات أخرى بداخلها. فيما يلي مثال بسيط لخطاف مخصص يدير العداد:

import { useState } from 'react';

// Custom Hook: useCounter
function useCounter(initialValue = 0) {
    const [count, setCount] = useState(initialValue);

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

    return { count, increment, decrement, reset };
}

export default useCounter;

استخدام الخطاف المخصص

يمكنك استخدام الخطاف useCounter في أي مكون وظيفي:

import React from 'react';
import useCounter from './useCounter';

function CounterComponent() {
    const { count, increment, decrement, reset } = useCounter(0);

    return (
        

            
Count: {count}
            Increment
            Decrement
            Reset
        
    );
}

export default CounterComponent;

النقاط الرئيسية

1. اصطلاح التسمية: ابدأ دائمًا اسم الخطاف المخصص باستخدامه لمتابعة اصطلاح React.
2. قابلية إعادة الاستخدام: يمكن إعادة استخدام الخطافات المخصصة عبر مكونات متعددة، مما يعزز كود DRY (لا تكرر نفسك).
3. إدارة الحالة: يمكنك إدارة الحالة، وتنفيذ الآثار الجانبية، والاستفادة من الخطافات الأخرى داخل ربط مخصص.

مثال متقدم: جلب البيانات

إليك رابط مخصص أكثر تقدمًا لجلب البيانات:

import { useState, useEffect } from 'react';

function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(url);
                if (!response.ok) throw new Error('Network response was not ok');
                const result = await response.json();
                setData(result);
            } catch (error) {
                setError(error);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, [url]);

    return { data, loading, error };
}

export default useFetch;

الاستخدام

يمكنك استخدام خطاف useFetch في أحد المكونات لجلب البيانات:

import React from 'react';
import useFetch from './useFetch';

function DataFetchingComponent() {
    const { data, loading, error } = useFetch('https://api.example.com/data');

    if (loading) return 
Loading...
;
    if (error) return 
Error: {error.message}
;

    return (
        

            
Data:
            
{JSON.stringify(data, null, 2)}
        
    );
}

export default DataFetchingComponent;

تعد الخطافات المخصصة طريقة رائعة لتغليف المنطق ومشاركة الوظائف عبر مكوناتك بطريقة نظيفة وقابلة للصيانة.