قلاب useEffect در React

قلاب useEffect بخش مهمی از ساخت با React است. این به شما امکان می دهد اثرات جانبی را در اجزای خود انجام دهید، مانند واکشی داده ها از یک API، اشتراک در رویدادها یا دستکاری DOM. در این پست وبلاگ، قلاب useEffect را در React بررسی خواهیم کرد و خواهیم فهمید که چگونه می توان از آن به طور موثر استفاده کرد.

شروع کار با useEffect

برای استفاده از قلاب useEffect، ابتدا باید آن را از بسته «react» وارد کنید. این دو پارامتر نیاز دارد: یک تابع که نشان دهنده اثر جانبی است که می خواهید انجام دهید و یک آرایه اختیاری از وابستگی ها.

در اینجا مثالی از استفاده از useEffect آورده شده است:

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Perform side effect here
    console.log('Component mounted!');

    // Clean up the side effect
    return () => {
      console.log('Component unmounted!');
    };
  }, []); // Empty dependency array means the effect runs only once

  return (
    <div>
      {/* Component JSX */}
    </div>
  );
}

در این مثال، قلاب useEffect در مولفه عملکردی MyComponent استفاده می شود. تابع افکت زمانی فراخوانی می شود که کامپوننت نصب شده باشد. عبارت console.log “کامپوننت نصب شده است!” در کنسول مرورگر نشان می دهد که این کار می کند.

تابع پاکسازی اختیاری برگردانده شده از افکت زمانی اجرا می شود که کامپوننت خارج شود. در این مورد، “کامپوننت unmounted!” هنگامی که کامپوننت از DOM حذف می شود. این برای پاکسازی هر منبع یا اشتراکی که در اثر ایجاد شده است مفید است.

آرایه وابستگی

دومین پارامتر useEffect آرایه وابستگی است. این به شما امکان می‌دهد وابستگی‌هایی را مشخص کنید که در صورت تغییر، افکت را برای اجرای دوباره فعال کنند. اگر آرایه وابستگی خالی باشد، افکت فقط یک بار اجرا می شود.

بیایید مثالی با وابستگی ببینیم:

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

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

  useEffect(() => {
    // Fetch data from API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error(error));
  }, []); // Empty dependency array means the effect runs only once

  return (
    <div>
      {data ? <p>{data}</p> : <p>Loading...</p>}
    </div>
  );
}

در این مثال، افکت داده ها را از یک API با استفاده از تابع fetch واکشی می کند. به لطف آرایه وابستگی خالی، این افکت تنها یک بار اجرا می شود که مؤلفه نصب شده است. داده های واکشی شده در متغیر حالت ‘داده’ با استفاده از قلاب useState ذخیره می شود.

اگر می‌خواهید هر زمان که یک وابستگی خاص تغییر کند، افکت اجرا شود، می‌توانید آن وابستگی را در آرایه قرار دهید. مثلا:

useEffect(() => {
  // Perform effect
}, [dependency]);

با افزودن “وابستگی” به آرایه وابستگی، هر زمان که مقدار “وابستگی” تغییر کند، اثر اجرا می شود. البته این وابستگی می تواند هر چیزی باشد که پروژه خاص شما از آن استفاده می کند.

زمان استفاده از useEffect

• واکشی داده ها از یک API: از useEffect برای درخواست HTTP برای بازیابی داده ها و به روز رسانی وضعیت مؤلفه با داده های واکشی شده استفاده کنید.
• اشتراک در رویدادها: از useEffect برای اشتراک در رویدادها، مانند رویدادهای اسکرول یا صفحه کلید، و انجام اقدامات بر اساس آن رویدادها استفاده کنید. فراموش نکنید که اشتراک رویداد را در عملکرد پاکسازی لغو کنید.
• دستکاری DOM: از useEffect برای دستکاری مستقیم DOM مانند افزودن یا حذف عناصر، تغییر سبک یا تعامل با کتابخانه های شخص ثالث استفاده کنید.
• ادغام با کتابخانه های خارجی: از useEffect برای ادغام مؤلفه‌های React با کتابخانه‌های خارجی که نیاز به مقداردهی اولیه یا پاک‌سازی دارند، مانند Google Maps یا کتابخانه‌های نمودار استفاده کنید.

نتیجه

قلاب useEffect ابزاری قدرتمند برای کنترل عوارض جانبی در اجزای عملکردی React است. با درک کاربرد آن و گنجاندن آن در اجزای خود، می توانید کارهای مختلفی مانند واکشی داده ها، اشتراک رویدادها و دستکاری DOM را انجام دهید. به خاطر داشته باشید که وابستگی ها و عملکردهای پاکسازی را در نظر بگیرید تا از مدیریت عوارض جانبی کارآمد و بدون خطا در برنامه های React خود اطمینان حاصل کنید. کد نویسی مبارک