useEffect(): از سال 2019 جلوه‌های جانبی را در برنامه‌های React قابل مدیریت‌تر کنید

این را تصور کنید: شما برای اولین بار در حال ساخت یک برنامه React هستید — شما در حال تهیه یک پیش نویس وایرفریم هستید و سعی می کنید تصور کنید که چگونه همه صفحات و اجزاء با هم قرار می گیرند و متوجه می شوید که برخی از آنها باید کمی بیشتر بکشند. وزن نسبت به دیگران در حالی که برخی فقط نیاز به ارائه اجزای خاص خود دارند، برخی دیگر ممکن است به عملکرد کمی بیشتر نیاز داشته باشند، شاید آنها در حال واکشی داده، به روز رسانی DOM یا مدیریت یک تایمر هستند. اساساً، اگر کامپوننت کاری غیر از برگرداندن یک بیت از JSX انجام دهد، در حال انجام است. اثرات جانبی. خوشبختانه، React دارای قلاب ویژه برای این وظایف است: useEffect().

برای اهداف نمایشی، بیایید یک مؤلفه بسازیم که کلیک ها را می شمارد.

برای شروع، شما تماس بگیرید useEffect() تقریباً به روش فراخوانی حالت در بالای مولفه:

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

از آنجا، بقیه مولفه را می سازیم و دقیقاً همان چیزی را که می خواهیم تولید کند، هدایت می کنیم:

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

  useEffect(() => {
    // This function will be called after every render
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

در مثال بالا، کامپوننت ما یک تعداد و همچنین یک دکمه را نمایش می دهد. هنگامی که کلیک می شود، وضعیت دکمه از طریق “count” افزایش می یابد useEffect() هوک در حال به روز رسانی عنوان سند با تعداد فعلی در هر بار ارائه آن است.

همانطور که می بینید، هنگام تماس useEffect()، یک تابع را به عنوان آرگومان اصلی خود می گیرد (که بعد از هر رندر فراخوانی می شود)، و بر این اساس ویژگی “document.title” را به روز می کند.

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

useEffect(() => {
   document.title = `You clicked ${count} times!`;
}, [count]);

این به عنوان یک شناخته می شود dependency، که از اجرای یک حلقه بی پایان آرگومان توسط کد جلوگیری می کند. و در حالی که ما این گزینه را داریم که مانند آنچه در بالا انجام دادیم، وابستگی ها را از طریق آرایه ها منتقل کنیم، همچنین می توانیم آرایه های خالی را به عنوان آرگومان های دوم از طریق توابع خود عبور دهیم، همانطور که در زیر نشان داده شده است:

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

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

  useEffect(() => {
    // This function will be called once on component mount
    fetch('https://example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
  }, []);

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );

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

مطمئن نیستم که چه زمانی یا چگونه وابستگی ها را از طریق آرگومان دوم از عبور دهیم useEffect? در اینجا یک راهنمای کوتاه است!

• useEffect(() => {}): بدون وابستگی! این بدان معنی است که عارضه جانبی اجرا خواهد شد هر زمان جزء ارائه می دهد.

• useEffect(() => {}, []): یک بار دیگر، آن آرایه خالی وجود دارد! این به مؤلفه ما می گوید که ما فقط می خواهیم اثر جانبی اجرا شود اولین بار آن را ارائه می دهد.

• useEffect(() => {}, [variable1, variable2]): این یکی ممکن است جدید به نظر برسد — این یک آرایه وابستگی با عناصر است و به شما اطلاع می دهد که اثر جانبی باید اجرا شود هر زمان که متغیر(ها) تغییر کند.

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