العودة للمقالات

إتقان React Hooks: دليل عملي مع أمثلة واقعية

Majd Muhtaseb24‏/11‏/202512 دقيقة

مقدمة

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

useState

يسمح لك الخطاف useState بإضافة حالة إلى المكونات الوظيفية.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

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

export default Counter;

يوضح هذا المثال مكون عداد بسيط. useState(0) يقوم بتهيئة متغير الحالة count إلى 0. تُستخدم الدالة setCount لتحديث الحالة، مما يؤدي إلى إعادة العرض.

useEffect

يتيح لك الخطاف useEffect إجراء تأثيرات جانبية في المكونات الوظيفية. يمكن أن يشمل ذلك جلب البيانات أو معالجة DOM أو إعداد الاشتراكات.

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

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      const json = await response.json();
      setData(json);
    }

    fetchData();

    // دالة التنظيف (اختياري)
    return () => {
      // قم بإجراء التنظيف هنا (مثل إلغاء الاشتراكات)
    };
  }, []); //  تضمن مصفوفة التبعية الفارغة [] تشغيل التأثير مرة واحدة فقط عند التحميل.

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

  return (
    <div>
      <p>العنوان: {data.title}</p>
    </div>
  );
}

export default Example;

يجلب هذا المثال البيانات من نقطة نهاية API عند تحميل المكون. تضمن مصفوفة التبعية الفارغة [] تشغيل التأثير مرة واحدة فقط. يمكن إرجاع دالة تنظيف اختياريًا لمنع تسرب الذاكرة.

useContext

يتيح لك الخطاف useContext الوصول إلى القيم من React Context دون الحاجة إلى استخدام مكون Consumer.

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);

  return (
    <button style={{ backgroundColor: theme === 'dark' ? 'black' : 'white', color: theme === 'dark' ? 'white' : 'black' }}>
      زر ذو طابع ({theme})
    </button>
  );
}

export default ThemedButton;

يوضح هذا المثال استخدام useContext للوصول إلى قيمة السمة الحالية.

useCallback

يقوم الخطاف useCallback بتخزين دالة مؤقتًا. يمكن أن يؤدي ذلك إلى تحسين الأداء عن طريق منع إعادة العرض غير الضرورية للمكونات الفرعية التي تتلقى الدالة كخاصية.

import React, { useCallback } from 'react';

function MyComponent({ onButtonClick }) {
  return (
    <button onClick={onButtonClick}>اضغط هنا</button>
  );
}

function ParentComponent() {
  const handleClick = useCallback(() => {
    console.log('تم النقر على الزر!');
  }, []); // مصفوفة تبعية فارغة - يتم إنشاء الدالة مرة واحدة فقط

  return (
    <MyComponent onButtonClick={handleClick} />
  );
}

export default ParentComponent;

في هذا المثال، يتم إنشاء handleClick مرة واحدة فقط، لذلك سيتم إعادة عرض MyComponent فقط إذا تغيرت خصائصه.

useMemo

يقوم الخطاف useMemo بتخزين نتيجة الحساب مؤقتًا. مثل useCallback ، يساعد هذا في تحسين الأداء.

import React, { useMemo } from 'react';

function ExpensiveCalculation({ a, b }) {
  const result = useMemo(() => {
    // محاكاة حساب مكلف للغاية
    console.log('جارٍ الحساب...');
    let i = 0;
    while (i < 100000000) {
      i++;
    }
    return a + b;
  }, [a, b]); // إعادة الحساب فقط إذا تغير a أو b

  return (
    <div>
      النتيجة: {result}
    </div>
  );
}

export default ExpensiveCalculation;

سيتم إعادة حساب result فقط إذا تغيرت a أو b. خلاف ذلك، يتم إرجاع القيمة المخزنة مؤقتًا.

خاتمة

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