البدء مع خطافات React

فهم خطافات React

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

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

قواعد الخطافات

لضمان عمل الخطافات بشكل صحيح، يجب عليك اتباع قاعدتين بسيطتين:

1. استدعاء الخطافات فقط على المستوى الأعلى: لا تستدعي الخطافات داخل الحلقات أو الشروط أو الوظائف المتداخلة. هذا يضمن استدعاء الخطافات بنفس الترتيب في كل مرة يتم فيها عرض المكون، مما يسمح لـ React بالحفاظ على حالة الخطافات بشكل صحيح بين استدعاءات useState و useEffect المتعددة.
2. استدعاء الخطافات فقط من وظائف React: استدعاء الخطافات من مكونات وظائف React أو من الخطافات المخصصة. لا تستدعها من وظائف JavaScript العادية.

خطاف useState

خطاف useState هو الخطاف الأكثر شيوعًا ويستخدم لإضافة حالة إلى مكون وظيفي.

إليك كيفية عمله:

import React, { useState } from 'react';

function Counter() {
  // useState returns a pair: the current state value and a function that lets you update it.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>لقد نقرت {count} مرات</p>
      <button onClick={() => setCount(count + 1)}>
        انقر هنا
      </button>
    </div>
  );
}

في هذا المثال، useState(0) يقوم بتهيئة حالتنا count بـ 0. setCount هي الوظيفة التي نستخدمها لتحديث حالة count. عند استدعاء setCount، يقوم React بإعادة عرض مكون Counter بقيمة count الجديدة.

خطاف useEffect

يتيح لك خطاف useEffect أداء آثار جانبية في المكونات الوظيفية. وهو بديل قريب لـ componentDidMount، و componentDidUpdate، و componentWillUnmount في مكونات الفئة.

يمكن أن تشمل الآثار الجانبية جلب البيانات أو الاشتراكات أو تغيير DOM يدويًا.

إليك مثال على جلب البيانات باستخدام useEffect:

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    async function fetchUser() {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      const data = await response.json();
      setUser(data);
    }

    fetchUser();
  }, [userId]); // The dependency array

  if (!user) {
    return <p>جار التحميل...</p>;
  }

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

الوسيط الثاني لـ useEffect هو مصفوفة التبعية. سيعاد تشغيل التأثير فقط إذا تغيرت القيم في هذه المصفوفة. إذا قمت بتمرير مصفوفة فارغة []، فسيتم تشغيل التأثير مرة واحدة فقط بعد العرض الأولي.

الخطافات المخصصة

تسمح لك الخطافات المخصصة باستخراج منطق المكون إلى وظائف قابلة لإعادة الاستخدام. الخطاف المخصص هو وظيفة JavaScript يبدأ اسمها بـ "use" وقد تستدعي خطافات أخرى.

لنقم بإنشاء خطاف مخصص لتتبع عرض النافذة:

import { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

الآن يمكنك استخدام هذا الخطاف المخصص في أي مكون للحصول على عرض النافذة الحالي:

function MyComponent() {
  const width = useWindowWidth();

  return <p>عرض النافذة هو {width}px</p>;
}

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