جدول المحتويات

1. المتطلبات الأساسية
2. تثبيت
3. مقدمة
4. ما هي الخطافات المخصصة؟
5. متى يجب عليك إنشاء خطاف مخصص؟
6. مثال: إنشاء خطاف مخصص
   • الخطوة 1: تحديد المنطق القابل لإعادة الاستخدام
   • الخطوة 2: استخراج المنطق إلى خطاف مخصص
   • الخطوة 3: استخدام الخطاف المخصص
7. فوائد الخطافات المخصصة
8. أفضل الممارسات للخطافات المخصصة
9. خاتمة

المتطلبات الأساسية:

تأكد من حصولك على المعرفة الأساسية اللازمة في ما يلي:

المعرفة الأساسية بالتفاعل
Node.js وnpm

تثبيت:

للبدء بمشروع React جديد باستخدام Vite، اتبع الخطوات التالية:

أنا. افتح جهازك وقم بتشغيل الأمر التالي لإنشاء مشروع جديد:

   npm create vite@latest my-react-app --template react

ثانيا. انتقل إلى دليل مشروعك:

     cd my-react-app

ثالثا. تثبيت التبعيات: تثبيت الحزم اللازمة لمشروعك:

   npm install

رابعا. بدء تشغيل خادم التطوير: تشغيل خادم التطوير:

    npm run dev

سيتم الآن تشغيل تطبيق React الخاص بك، ويمكنك مشاهدته في متصفحك على http://localhost:5173.

مقدمة:

ما هي خطافات التفاعل ؟:

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

ما هي الخطافات المخصصة ؟:

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

فهم السنانير؟

فهم الخطافات:
تتيح لك الخطافات مثل useState وuseEffect وuseContext استخدام الحالة وميزات React الأخرى دون كتابة فصل دراسي. إنها لبنات بناء تتيح لك التعامل مع منطق المكونات بطريقة معيارية.

متى يجب عليك إنشاء ربط مخصص؟

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

مثال لإنشاء ربط مخصص

مثال: اسمح بإنشاء تطبيق عداد بسيط باستخدام React Hook(useState).in app.jsx

الخطوة 1 تحديد المنطق القابل لإعادة الاستخدام

import React, { useState } from "react";

import "./App.css";

function App() {
  // usestate hooks
  const [counterstate, setCounterstate] = useState(0);

  // function for increment,decrement and reset
  const increment = () => {
    setCounterstate((prev) => prev   1);
  };
  const decrement = () => {
    setCounterstate((prev) => prev - 1);
  };
  const reset = () => {
    setCounterstate(0);
  };
  return (
    

      

        
Counter App 
        
{counterstate}
        

          increment
          decrement
          Reset
        
      
    
  );
}

export default App;

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

الخطوة 2: استخراج المنطق في ربط مخصص

يمكننا إنشاء مجلد في مجلد src باسم Hooks، ثم ملف يسمى useCouter.jsx للخطاف المخصص كما هو موضح أدناه.

import React, { useState } from "react";

const useCounter = (initialvalue) => {
  const [value, setValue] = useState(initialvalue);
  const increment = () => {
    setValue((prev) => prev   1);
  };
  const decrement = () => {
    setValue((prev) => prev - 1);
  };
  const reset = () => {
    setValue(initialvalue);
  };

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

export default useCounter;

الخطوة 3 باستخدام الخطاف المخصص

الآن، دعونا نستخدم خطافنا المخصص في App.jsx.

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";

function App() {

  const { value, increment, decrement, reset } = useCounter(0);
    return (
    

      

        
Counter App 
        
{value}
        

          increment
          decrement
          Reset
        
      
    
  );
}

export default App;

مثال 2.

لنقم بإنشاء ربط مخصص useFetch لجميع استدعاءات واجهة برمجة التطبيقات.

import React, { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, error, loading };
};

export default useFetch;

الاستخدام

في App.jsx، يمكننا استخدام هذا الخطاف المخصص لجلب اسم مستخدم من العنصر النائب JSON كما هو موضح أدناه؛

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";
import useFetch from "./Hooks/useFetch";

function App() {
  const { value, increment, decrement, reset } = useCounter(0);
  const { data, error, loading } = useFetch(
    "https://jsonplaceholder.typicode.com/users"
  );

  return (
    

      

        
Counter Appp 
        
{value}
        {loading && 
Loading....
}
        {error && 
Error: {error.message}
}
        {data && data.length > 0 && (
          

            
Username: {data[0].username}
          
        )}
        

          increment
          decrement
          Reset
        
      
    
  );
}

export default App;

فوائد السنانير المخصصة

إعادة الاستخدام:

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

فصل الاهتمامات:

تساعدك الخطافات المخصصة على فصل المنطق عن واجهة المستخدم. تركز مكوناتك على العرض، بينما تتعامل الخطافات المخصصة مع المنطق.

مكونات المنظف:

من خلال نقل المنطق المعقد إلى خطافات مخصصة، تصبح مكوناتك أبسط وأسهل للفهم.

أفضل الممارسات للخطافات المخصصة

اصطلاحات التسمية:

يجب أن تبدأ الخطافات المخصصة بكلمة "استخدام" لتتبع اصطلاح تسمية React. ويساعد هذا أيضًا في تحديد الخطافات بسرعة في التعليمات البرمجية الخاصة بك.

مثال: useFetch، useForm، useAuth.

التعامل مع التبعيات:

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

تجنب عمليات إعادة العرض غير الضرورية:

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

خاتمة

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

تفقد المشروع على GitHub: مستودع GitHub الخاص بي