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

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

فهم الأساسيات

عادةً ما يخاف المطورون من مصطلحات الخطافات المخصصة لذلك دعونا نزيل الغموض عنها.

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

إنشاء خطاف مخصص بسيط

المثال أدناه عبارة عن خطاف مخصص بسيط للعداد يدير حالة العد باستخدام خطاف useState ويقوم بتحديث العدد على التوالي باستخدام وظائف الزيادة أو النقصان التي تحدد حالة العد فقط.

import { useState } from 'react'

const useCount = () => {
  const [count, setCount] = useState(0)

  const increment = () => setCount(prev => prev   1)
  const decrement = () => setCount(prev => prev - 1)

  return { count, increment, decrement }
}

export default useCount;

تهانينا لك، لقد قمت بإنشاء خطافات مخصصة خاصة بك، الأمر بسيط للغاية. بعد ذلك سوف نتعمق في كيفية استخدام هذا الخطاف

استخدام الخطافات المخصصة في المكونات

يتم استخدام الخطافات المخصصة في مكونات أخرى ببساطة عن طريق تدمير القيم التي تم إرجاعها من الخطاف المخصص داخل المكونات الأخرى

import useCount from 'customHooks'

const Page = () => {
  const {count, increment, decrement} = useCount()

  return(
    
{ count }
       
     - 
  )
}

export default Page

مثال حقيقي على استخدام الخطاف المخصص

أحد أكثر المنطق تكرارًا هو جلب واجهة برمجة التطبيقات (API)، حيث سيجلب موقع التجارة الإلكترونية البيانات للمصادقة، وعملية الدفع، وعرض جميع المنتجات، والتعليقات، والمراجعات ... إلخ.

يمكنك تخيل مقدار منطق الجلب المتكرر عبر التطبيق والذي يمكن تبسيطه باستخدام ربط مخصص.

في هذا القسم سيتم إنشاء خطاف جلب مخصص.

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

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

لاحظ أننا نقوم بتمرير قيمة عنوان url إلى معلمة الخطاف المخصصة useFetch مما يعني أنه يمكن تمرير البيانات إلى الخطافات المخصصة

import {useState, useEffect} from 'react'

const useFetch = (url: string) => {
  const [data, setData] = useState([])
  const [pending, setPending] = useState(false)
  const [error, setError] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      setPending(true)

      await fetch(url)
        .then(result => {
          if (!result.ok) throw new Error('something went wrong!')
          return result.json()
        })
        .then(result => {
          setData(result)
          setPending(false)
        })
        .catch(error => setError(error))
    }

   fetchData()
  }, [url])

  return { data, pending, error }

}

export default useFetch

باستخدام خطاف useFetch داخل مكونات الصفحة، يمكننا الآن عرض رسالة للعميل في حالة حدوث خطأ، وإظهار القرص الدوار أثناء جلب البيانات، وأخيرًا عرض البيانات للعميل.

يمكن استخدام هذا المكون بشكل متكرر عبر جميع التطبيقات مما يقلل من كمية التعليمات البرمجية المتكررة.

import useFetch from './hooks/useFetch'
import Spinner from "./icons/Spinner"

const Page = () => {
  const {data, pending, error} = useFetch('https://jsonplaceholder.typicode.com/posts')

  if(error) 
Cloud not fetch data from the server

  return(
    {pending ? 
     ( )
     :
     (
      data.map((item) => (
        

          
{item.title}
  
          
{item.body}
        
       )
      )
    )}
  )
}

export default Page;

خاتمة

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

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