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

ما هو تأثير الاستخدام؟

• يتيح لك خطاف useEffect إجراء تأثيرات جانبية في مكوناتك، مثل جلب البيانات أو الاشتراكات أو تغيير DOM يدويًا.
• يمكن اعتباره مزيجًا من أساليب دورة الحياة، ComponentDidMount، وcomponentDidUpdate، وcomponentWillUnmount.

بناء الجملة

useEffect(() => {
  // Your side effect code here

  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

حدود

1. وظيفة التأثير : الوسيطة الأولى هي وظيفة تحتوي على رمز التأثير الجانبي. سيتم تشغيل هذه الوظيفة بعد التزام العرض بالشاشة.

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

3. مصفوفة التبعيات: الوسيطة الثانية هي مصفوفة من التبعيات. يعمل التأثير فقط عندما تتغير إحدى التبعيات. إذا قمت بتمرير مصفوفة فارغة ([])، فسيتم تشغيل التأثير مرة واحدة فقط بعد العرض الأولي (مثل ComponentDidMount).

أمثلة الاستخدام

1. مثال أساسي: جلب البيانات عند التحميل

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

const DataFetchingComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []); // Runs only once after the initial render

  return 
{data ? JSON.stringify(data) : 'Loading...'}
;
};

1. مثال للتنظيف: الاشتراك في حدث

import React, { useEffect } from 'react';

const EventListenerComponent = () => {
  useEffect(() => {
    const handleResize = () => {
      console.log('Window resized:', window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    // Cleanup function to remove the event listener
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Runs only once after the initial render

  return 
Resize the window and check the console.
;
};

1. مثال التبعية: تشغيل تأثير بناءً على تغيير الدعامة

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

const TimerComponent = ({ delay }) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount   1);
    }, delay);

    // Cleanup function to clear the timer
    return () => clearInterval(timer);
  }, [delay]); // Runs every time `delay` changes

  return 
Count: {count}
;
};

أفضل الممارسات

• تحديد التبعيات: قم دائمًا بتضمين المتغيرات التي يعتمد عليها تأثيرك في مصفوفة التبعيات لتجنب عمليات الإغلاق التي لا معنى لها.
• تجنب الآثار الجانبية في العرض: احتفظ بالآثار الجانبية خارج مرحلة العرض؛ استخدم useEffect بدلاً من ذلك.
• استخدام وظائف التنظيف: إذا كان التأثير الخاص بك ينشئ اشتراكات أو مؤقتات، فقم دائمًا بإرجاع وظيفة التنظيف لتجنب تسرب الذاكرة.

خاتمة

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