useEffect، useLayoutEffect، و useEffectEvent: مقایسه قلاب های واکشی داده در React

قلاب‌های واکشی داده‌های React -useEffect، useLayoutEffect و useEffectEvent- را با مقایسه عملکردهای آن‌ها برای توسعه برنامه کارآمد کاوش کنید.

قلاب های React یک راه قدرتمند برای مدیریت عوارض جانبی در اجزای React هستند. سه مورد از رایج ترین قلاب ها برای کنترل عوارض جانبی useEffect، useLayoutEffect و useEffectEvent هستند. هر قلاب مورد استفاده منحصر به فرد خود را دارد، بنابراین انتخاب قلاب مناسب برای کار ضروری است.

قلاب useEffect

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

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

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

import React from "react";

function App() {
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    fetch("<https://jsonplaceholder.typicode.com/posts>")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div className="app">
      {data.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
}

export default App;

این کد یک جزء App را نشان می دهد که داده ها را از یک API خارجی با استفاده از قلاب useEffect واکشی می کند. تابع اثر useEffect داده های نمونه را از JSONPlaceholder API واکشی می کند. سپس پاسخ JSON را تجزیه می کند و داده های بازیابی شده را در وضعیت داده تنظیم می کند.

با وضعیت داده، مؤلفه App ویژگی عنوان هر مورد را در وضعیت ارائه می کند.

ویژگی های useEffect Hook

• سازگار با ناهمزمان: از عملیات ناهمزمان به صورت بومی پشتیبانی می کند و برای واکشی داده ها راحت است.
• بعد از رندر اجرا می‌شود: قلاب useEffect بعد از اینکه برنامه کامپوننت را رندر کرد، جلوه‌های خود را اجرا می‌کند، و مطمئن می‌شود که هوک رابط کاربری را مسدود نمی‌کند.
• پاکسازی: روشی یکپارچه برای انجام پاکسازی با برگرداندن یک تابع فراهم می کند. این می تواند به ویژه هنگام کار با شنوندگان یا اشتراک ها مفید باشد.

قلاب useLayoutEffect

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

در زیر مثالی از نحوه استفاده از قلاب useLayoutEffect برای تغییر عرض عنصر دکمه آورده شده است:

import React from "react";

function App() {
  const button = React.useRef();

  React.useLayoutEffect(() => {
    const { width } = button.current.getBoundingClientRect();

    button.current.style.width = `${width + 12}px`;
  }, []);

  return (
    <div className="app">
      <button ref={button}>Click Me</button>
    </div>
  );
}

export default App;

بلوک کد بالا با استفاده از قلاب useLayoutEffect عرض عنصر دکمه را 12 پیکسل افزایش می دهد. این تضمین می کند که عرض دکمه قبل از نمایش دکمه روی صفحه شما افزایش می یابد.

ویژگی های useLayoutEffect Hook

• همزمان: به صورت همزمان اجرا می شود و اگر عملیات درون آن سنگین باشد، به طور بالقوه رابط کاربری را مسدود می کند.
• خواندن/نوشتن DOM: برای خواندن و نوشتن مستقیماً در DOM مناسب است، به خصوص اگر قبل از رنگ آمیزی مجدد مرورگر به تغییرات نیاز دارید.

قلاب useEffectEvent

قلاب useEffectEvent یک قلاب React است که مشکلات وابستگی قلاب useEffect را حل می کند. اگر با useEffect آشنا هستید، می‌دانید که آرایه وابستگی آن می‌تواند مشکل باشد. گاهی اوقات، شما باید مقادیر بیشتری را در آرایه وابستگی قرار دهید که به شدت ضروری هستند.

مثلا:

import React from "react";

function App() {
  const connect = (url) => {
    // logic for connecting to the url
  };

  const logConnection = (message, loginOptions) => {
    // logic for logging the connection details
  };

  const onConnected = (url, loginOptions) => {
    logConnection(`Connected to ${url}`, loginOptions);
  };

  React.useEffect(() => {
    const device = connect(url);
    device.onConnected(() => {
      onConnected(url);
    });

    return () => {
      device.disconnect();
    };
  }, [url, onConnected]);

  return <div></div>;
}

export default App;

این کد مؤلفه App را نشان می دهد که اتصال به یک سرویس خارجی را مدیریت می کند. تابع اتصال به یک URL مشخص متصل می شود، در حالی که تابع logConnection جزئیات اتصال را ثبت می کند. در نهایت، تابع onConnected تابع logConnection را فراخوانی می کند تا هنگام اتصال دستگاه، یک پیام اتصال موفق را ثبت کند.

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

آرایه وابستگی دارای متغیر url و تابع onConnected است. مؤلفه App تابع onConnected را در هر رندر ایجاد می کند. این باعث می شود که تابع useEffect در یک حلقه اجرا شود، که به رندر مجدد مؤلفه App ادامه می دهد.

راه های مختلفی برای حل مشکل حلقه useEffect وجود دارد. با این حال، کارآمدترین راه برای انجام آن بدون افزودن مقادیر غیرضروری بیشتر به آرایه وابستگی، قلاب useEffectEvent است.

import React from "react";

function App() {
  const connect = (url) => {
    // logic for connecting to the URL
  };

  const logConnection = (message, loginOptions) => {
    // logic for logging the connection details
  };

  const onConnected = React.useEffectEvent((url, loginOptions) => {
    logConnection(`Connected to ${url}`, loginOptions);
  });

  React.useEffect(() => {
    const device = connect(url);
    device.onConnected(() => {
      onConnected(url);
    });

    return () => {
      device.disconnect();
    };
  }, [url]);

  return <div></div>;
}
export default App;

با قرار دادن تابع onConnected با قلاب useEffectEvent، قلاب useEffectEvent همیشه می تواند آخرین مقادیر پیام و پارامترهای loginOptions را قبل از ارسال آن به قلاب useEffect بخواند. این بدان معناست که useEffect نیازی به تکیه بر تابع onConnected یا مقادیر ارسال شده به آن ندارد.

قلاب useEffectEvent زمانی مفید است که می‌خواهید useEffect شما به مقدار خاصی وابسته باشد، حتی اگر این افکت رویدادی را راه‌اندازی کند که به مقادیر دیگری نیاز دارد که ترجیح می‌دهید به عنوان وابستگی در useEffect استفاده نکنید.

ویژگی های useEffectEvent Hook

• این بهترین برای عوارض جانبی رویداد محور است.
• قلاب useEffectEvent با کنترل‌کننده‌های رویداد مانند onClick، onChange و غیره کار نمی‌کند.

قلاب useEffectEvent هنوز آزمایشی است و در قلاب‌های React نسخه 18 در دسترس نیست.

چه زمانی از کدام هوک استفاده کنیم؟

هر یک از قلاب های واکشی داده های بالا برای موقعیت های مختلف مناسب است:

• واکشی داده ها: useEffect یک انتخاب عالی است.
• دستکاری مستقیم DOM: اگر نیاز به ایجاد تغییرات همزمان در DOM قبل از رنگ آمیزی مجدد دارید، useLayoutEffect را انتخاب کنید.
• عملیات سبک: برای عملیاتی که خطر مسدود کردن رابط کاربری را ندارند، می‌توانید آزادانه از useEffect استفاده کنید.
• عوارض جانبی رویداد محور: از قلاب useEffectEvent برای بسته بندی رویدادها و از قلاب useEffect برای اجرای عوارض جانبی استفاده کنید.

عوارض جانبی را به طور موثر مدیریت کنید

قلاب‌های React دنیایی از امکانات را باز می‌کنند، و درک تفاوت بین قلاب‌های useEffect، useLayoutEffect و useEffectEvent می‌تواند به طور قابل توجهی بر نحوه مدیریت عوارض جانبی و دستکاری DOM تأثیر بگذارد. در نظر گرفتن الزامات و مفاهیم خاص این قلاب ها برای ساخت برنامه های کاربر پسند ضروری است.

منبع مقاله