رمزگشایی از useEffect Hook در React: راهنمای مبتدی

امروز، ما در حال بررسی قلاب useEffect هستیم، ابزاری ضروری در زرادخانه React شما. درک روش‌های مختلف استفاده از useEffect به شما این امکان را می‌دهد که با عوارض جانبی کنار بیایید و چرخه عمر اجزا را با اطمینان مدیریت کنید.

یک یادآوری…

اجزای React در طول وجود خود مراحل مختلفی را طی می کنند که به آن چرخه حیات کامپوننت می گویند. این مراحل را می توان به طور کلی به سه مرحله اصلی دسته بندی کرد:

• نصب: کامپوننت ایجاد شده و در DOM قرار می گیرد
• در حال بروز رسانی: کامپوننت به دلیل تغییر در قسمت‌ها یا حالت آن دوباره رندر می‌شود
• در حال نصب: کامپوننت از DOM حذف می شود

در این پست وبلاگ، سه مورد اصلی استفاده از قلاب useEffect را بررسی خواهیم کرد: با یک آرایه وابستگی خالی، با یک آرایه وابستگی با مقادیر و بدون یک آرایه وابستگی. بیا شروع کنیم!

1. با یک آرایه وابستگی خالی

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

یک مورد استفاده برای این می تواند واکشی داده ها از یک API باشد

import { useEffect, useState } from "react";

export default function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://mock-api.com")
      .then((response) => response.json())
      .then((apiData) => {
        setData(apiData);
      });
  }, []);

  return (
    <div>
      {data && data.message}
    </div>
  );
}

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

2. با یک آرایه وابستگی با مقادیر

هنگامی که یک آرایه وابستگی با مقادیر خاص ارائه می کنید، افکت زمانی اجرا می شود که کامپوننت نصب می شود و زمانی که آن مقادیر تغییر می کنند. این به شما این امکان را می‌دهد که به تغییرات در ویژگی‌ها یا حالت‌های جزء به صورت انتخابی پاسخ دهید.

یک مورد استفاده برای این می تواند یک قابلیت جستجو باشد

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

function FilterableList({ items }) {
  const [filter, setFilter] = useState('');
  const [filteredItems, setFilteredItems] = useState(items);

  useEffect(() => {
    const filtered = items.filter(item => item.toLowerCase().includes(filter.toLowerCase()));
    setFilteredItems(filtered.length !== 0 ? filteredItems : items);
  }, [filter, items]);

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => <li key={item}>{item}</li>)}
      </ul>
    </div>
  );
}

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

3. بدون آرایه وابستگی

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

من صادقانه نمی توانم یک مثال واقعی در مورد زمان استفاده از آن فکر کنم، در تقریباً 3 سال تجربه کار با React هرگز از قلاب useEffect به این شکل استفاده نکرده ام، اگر مورد استفاده خوبی می شناسید لطفاً به من بگویید در نظرات بدانید!

نتیجه:

تبریک می گویم! شما گام مهمی در جهت تسلط بر قلاب useEffect برداشته اید. بیایید نکات کلیدی که در این مقاله به آن پرداختیم را مرور کنیم:

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

با درک این سه مورد اصلی استفاده از useEffect، اکنون این قدرت را دارید که عوارض جانبی و چرخه عمر اجزا را به طور موثر مدیریت کنید. به یاد داشته باشید که از این دانش عاقلانه استفاده کنید و آن را با نیازهای پروژه خود تطبیق دهید.

برنامه نویسی مبارک، و امیدوارم برنامه های React شما پیشرفت کنند!