متدهای چرخه حیات (Lifecycle) در ری اکت: راهنمای جامع

در ری‌اکت، یکی از مفاهیم کلیدی در توسعه اپلیکیشن‌های پیچیده و مقیاس‌پذیر، استفاده از متدهای چرخه حیات یا lifecycle methods است. این متدها به ما این امکان را می‌دهند که مدیریت دقیقی روی رفتار کامپوننت‌ها در مراحل مختلف چرخه حیات (lifecycle) آن‌ها داشته باشیم. در این مقاله، به معرفی متدهای lifecycle در کامپوننت‌های کلاسی و نحوه استفاده از آن‌ها پرداخته و سپس معادل‌های این متدها در کامپوننت‌های تابعی با استفاده از هوک‌ها (Hooks) را بررسی خواهیم کرد.

 

متدهای Lifecycle در کامپوننت‌های کلاسی + تابعی

کامپوننت‌های کلاسی در ری‌اکت از چندین متد چرخه حیات برای مدیریت وضعیت، تعاملات با DOM و دیگر فرآیندها استفاده می‌کنند. این متدها در مراحل مختلف lifecycle کامپوننت فراخوانی می‌شوند و به ما این امکان را می‌دهند که به طور دقیق واکنش‌های مختلفی به تغییرات داده‌ها، ورودی‌ها و محیط برنامه داشته باشیم. این lifecyle های کلاسی به روش های متفاوت در کامپوننت های تابعی هم قابل پیاده سازی و استفاده هستند.

 

متد componentDidMount در کامپوننت های کلاسی

متد componentDidMount یکی از مهم‌ترین متدهای چرخه حیات در کامپوننت‌های کلاسی است که بلافاصله پس از اولین رندر (render) کامپوننت در DOM فراخوانی می‌شود. این متد معمولاً برای انجام عملیات‌هایی که نیاز به دسترسی به DOM دارند یا برای فراخوانی داده‌های اولیه از یک API استفاده می‌شود.

کاربردهای متداول componentDidMount :

• فراخوانی داده از API: بسیاری از توسعه‌دهندگان از componentDidMount برای ارسال درخواست‌های HTTP به سرور استفاده می‌کنند تا داده‌های لازم برای کامپوننت را دریافت کنند.
• تنظیم تایمرها: این متد مکان مناسبی برای تنظیم تایمرها یا آغاز عملیات‌های زمان‌دار است.
• اعمال تغییرات روی DOM: اگر لازم باشد تغییرات خاصی روی عناصر DOM اعمال شود (مانند تنظیم فوکوس یا اضافه کردن کلاس‌ها)، این متد محل مناسبی برای انجام آن است.
• اتصال به منابع خارجی: مانند اضافه کردن listenerها به eventهای مرورگر.

class MyComponent extends React.Component {
  componentDidMount() {
    // فراخوانی API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data }); // به‌روزرسانی state با داده‌های دریافتی
      });

    // تنظیم یک تایمر
    this.timer = setInterval(() => {
      console.log('Timer running...');
    }, 1000);
  }

  componentWillUnmount() {
    // پاک‌سازی تایمر
    clearInterval(this.timer);
  }

  render() {
    return <div>My Component Content</div>;
  }
}

معادل متد componentDidMount در کامپوننت‌های تابعی

برای پیاده‌سازی معادل این متد در کامپوننت‌های تابعی، از Hook useEffect استفاده می‌کنیم. useEffect می‌تواند به گونه‌ای تنظیم شود که تنها یک بار، درست مانند componentDidMount، پس از اولین رندر اجرا شود.

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

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

  useEffect(() => {
    // فراخوانی API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));

    // تنظیم تایمر
    const timer = setInterval(() => {
      console.log('Timer running...');
    }, 1000);

    // پاک‌سازی (معادل componentWillUnmount)
    return () => clearInterval(timer);
  }, []); // وابستگی خالی یعنی فقط یک بار اجرا می‌شود

  return <div>My Component Content</div>;
}

نکات مهم componentDidMount :

1. پاک‌سازی در متدهای کامپوننت تابعی: در useEffect، بازگشت یک تابع پاک‌سازی (cleanup) معادل با componentDidMount در کامپوننت‌های کلاسی است.
2. تفاوت‌ها در زمان‌بندی: در useEffect، اجرای کد ممکن است کمی پس از به‌روزرسانی DOM انجام شود، اما عملکرد مشابهی با componentDidMount دارد.
3. سادگی کدنویسی در کامپوننت‌های تابعی: استفاده از useEffect معمولاً کد را ساده‌تر و خواناتر می‌کند، به‌ویژه زمانی که نیاز به ترکیب چندین عملیات در چرخه حیات وجود دارد.

 

متد componentDidUpdate در کامپوننت های کلاسی

متد componentDidUpdate در کامپوننت‌های کلاسی ری‌اکت بلافاصله پس از به‌روزرسانی (update) کامپوننت فراخوانی می‌شود. این به‌روزرسانی زمانی رخ می‌دهد که state یا props تغییر کنند و ری‌اکت نیاز به رندر دوباره کامپوننت داشته باشد.

این متد برای انجام عملیات‌هایی که وابسته به تغییرات در داده‌ها هستند، یا برای هماهنگی وضعیت کامپوننت با دنیای خارج از آن (مانند فراخوانی API در پاسخ به تغییرات) استفاده می‌شود.

کاربردهای متداول componentDidUpdate :

• به‌روزرسانی داده‌ها بر اساس تغییرات در props یا state: اگر تغییر در props یا state نیاز به محاسبات اضافی یا درخواست‌های جدید داشته باشد، این متد محل مناسبی برای این کار است.
• هماهنگ‌سازی با DOM یا منابع خارجی: برای به‌روزرسانی یک بخش خاص از DOM یا تعامل با سرویس‌های خارجی.
• مقایسه تغییرات: معمولاً از این متد همراه با مقایسه مقادیر قدیمی و جدید props یا state استفاده می‌شود تا مطمئن شویم عملیات فقط در شرایط خاص اجرا می‌شود.

پارامترهای componentDidUpdate :

این متد دو آرگومان دریافت می‌کند:

1. prevProps: مقادیر props قبل از به‌روزرسانی.
2. prevState: مقادیر state قبل از به‌روزرسانی.

class MyComponent extends React.Component {
  state = {
    counter: 0,
  };

  componentDidUpdate(prevProps, prevState) {
    // مثال: مقایسه تغییرات در state
    if (prevState.counter !== this.state.counter) {
      console.log(`Counter changed from ${prevState.counter} to ${this.state.counter}`);
    }

    // مثال: فراخوانی API در پاسخ به تغییر prop
    if (prevProps.userId !== this.props.userId) {
      this.fetchUserData(this.props.userId);
    }
  }

  fetchUserData(userId) {
    console.log(`Fetching data for user ${userId}`);
    // فراخوانی API
  }

  render() {
    return (
      <div>
        <button onClick={() => this.setState({ counter: this.state.counter + 1 })}>
          Increment Counter
        </button>
      </div>
    );
  }
}

معادل متد componentDidUpdate در کامپوننت‌های تابعی

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

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

function MyComponent({ userId }) {
  const [counter, setCounter] = useState(0);

  // معادل componentDidUpdate برای state یا props
  useEffect(() => {
    console.log(`Counter updated to ${counter}`);
  }, [counter]); // وابستگی به counter

  // مثال: فراخوانی API هنگام تغییر userId
  useEffect(() => {
    console.log(`Fetching data for user ${userId}`);
    // فراخوانی API
  }, [userId]); // وابستگی به userId

  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>Increment Counter</button>
    </div>
  );
}

نکات مهم componentDidUpdate :

1. عدم به‌روزرسانی بی‌پایان: در هر دو نوع کامپوننت، به‌روزرسانی state در داخل componentDidUpdate یا useEffect باید با دقت انجام شود. به‌روزرسانی بی‌رویه ممکن است منجر به حلقه بی‌نهایت شود.
2. بهبود عملکرد با مقایسه مقادیر: در متد componentDidUpdate یا useEffect، باید تغییر مقادیر بررسی شود تا عملیات اضافی انجام نشود.
3. سادگی و خوانایی در کامپوننت‌های تابعی: استفاده از useEffect معمولاً کد را ساده‌تر و قابل فهم‌تر می‌کند، به شرط آنکه وابستگی‌ها به درستی تنظیم شده باشند.

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

 

متد componentWillUnmount در کامپوننت های کلاسی

متد componentWillUnmount  یکی از مهم‌ترین متدهای چرخه حیات در کامپوننت‌های کلاسی React است که درست قبل از حذف شدن کامپوننت از DOM فراخوانی می‌شود. این متد برای انجام عملیات پاک‌سازی استفاده می‌شود، تا منابعی که توسط کامپوننت اشغال شده‌اند آزاد شوند و از مشکلاتی مانند memory leak جلوگیری شود.

کاربردهای متداول componentWillUnmount:

1. پاک‌سازی تایمرها و زمان‌سنج‌ها: هر تایمر یا setInterval که در طول عمر کامپوننت تنظیم شده باشد، باید در این متد پاک شود.
2. لغو درخواست‌های شبکه: اگر کامپوننت در حال انجام درخواست‌های API باشد و در حین دریافت پاسخ حذف شود، باید این درخواست‌ها لغو شوند.
3. حذف لیسنرهای رویداد: لیسنرهای اضافه‌شده برای رویدادهای DOM یا سفارشی باید در این متد حذف شوند.
4. پاک‌سازی منابع خارجی: اگر کامپوننت با منابعی مانند WebSocket، فایل‌ها یا سرویس‌های دیگر در ارتباط باشد، باید ارتباط قطع شود.
5. اعلام تغییرات به context یا state مدیریت‌شده: در پروژه‌های پیچیده، گاهی لازم است هنگام حذف کامپوننت وضعیت سیستم یا context به‌روزرسانی شود.

نحوه استفاده componentWillUnmount:

این متد هیچ آرگومانی نمی‌گیرد و به طور مستقیم به عملیات پاک‌سازی اختصاص دارد.

class MyComponent extends React.Component {
  componentDidMount() {
    // تنظیم تایمر
    this.timer = setInterval(() => {
      console.log('Timer running...');
    }, 1000);

    // افزودن لیسنر به رویداد
    window.addEventListener('resize', this.handleResize);
  }

  componentWillUnmount() {
    // پاک‌سازی تایمر
    clearInterval(this.timer);

    // حذف لیسنر رویداد
    window.removeEventListener('resize', this.handleResize);

    console.log('Component is being unmounted. Cleanup complete.');
  }

  handleResize = () => {
    console.log('Window resized.');
  };

  render() {
    return <div>Check the console for timer and resize events.</div>;
  }
}

نکات مهم componentWillUnmount :

1. ضرورت پاک‌سازی: عدم استفاده از componentWillUnmount برای آزادسازی منابع می‌تواند باعث مشکلات بزرگی مانند کندی برنامه و نشت حافظه شود.
2. عملیات ناهمگام: هنگام پاک‌سازی منابع خارجی یا درخواست‌های شبکه، توجه داشته باشید که عملیات ناهمگام ممکن است به پاسخ‌هایی که دیگر نیازی به آن‌ها نیست منجر شود. از ابزارهایی مانند AbortController برای مدیریت درخواست‌ها استفاده کنید.

معادل متد componentWillUnmount در کامپوننت‌های تابعی

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

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // تنظیم تایمر
    const timer = setInterval(() => {
      console.log('Timer running...');
    }, 1000);

    // افزودن لیسنر به رویداد
    const handleResize = () => console.log('Window resized.');
    window.addEventListener('resize', handleResize);

    // بازگشت تابع پاک‌سازی
    return () => {
      clearInterval(timer); // پاک‌سازی تایمر
      window.removeEventListener('resize', handleResize); // حذف لیسنر رویداد
      console.log('Component is being unmounted. Cleanup complete.');
    };
  }, []); // وابستگی خالی یعنی فقط در زمان mount و unmount اجرا شود

  return <div>Check the console for timer and resize events.</div>;
}

نکات مهم:

1. پاک‌سازی در useEffect: توابع بازگشتی در useEffect به طور خودکار در هنگام حذف کامپوننت یا به‌روزرسانی اثر فراخوانی می‌شوند.
2. سازگاری با ابزارهای مدرن: استفاده از ابزارهایی مانند AbortController یا کتابخانه‌هایی مثل Axios برای لغو درخواست‌های شبکه در اینجا ساده‌تر است.
3. ساختار ساده‌تر: در مقایسه با کامپوننت‌های کلاسی، ساختار مدیریت پاک‌سازی در تابعی خواناتر است.

این متد و معادل آن در کامپوننت‌های تابعی برای مدیریت صحیح چرخه عمر کامپوننت و جلوگیری از بروز خطا یا مشکلات عملکردی ضروری است.

 

متد shouldComponentUpdate در کامپوننت های کلاسی

متد shouldComponentUpdate یکی از متدهای پرکاربرد در چرخه حیات کامپوننت‌های کلاسی در ری‌اکت است. این متد زمانی فراخوانی می‌شود که props یا state کامپوننت تغییر کرده باشد و قبل از متد render اجرا می‌شود. هدف اصلی آن این است که به ری‌اکت بگوید آیا نیازی به رندر مجدد کامپوننت هست یا خیر.

نقش shouldComponentUpdate :

• کنترل رندر غیرضروری: این متد کمک می‌کند تا از رندرهای غیرضروری جلوگیری شود، که می‌تواند به بهبود عملکرد اپلیکیشن کمک کند.
• مقایسه تغییرات: از این متد می‌توان برای مقایسه مقادیر جدید و قدیم props یا state استفاده کرد و تنها در صورتی که تغییرات معنی‌دار باشند، اجازه رندر مجدد داد.

ساختار و نحوه استفاده از shouldComponentUpdate :

shouldComponentUpdate دو آرگومان دریافت می‌کند:

1. nextProps: مقادیر جدید props که به کامپوننت ارسال شده‌اند.
2. nextState: مقدار جدید state که قرار است اعمال شود.

این متد باید یک مقدار بولین (true یا false) برگرداند:

• true: کامپوننت باید رندر مجدد شود.
• false: کامپوننت نیازی به رندر مجدد ندارد.

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // مقایسه props و state فعلی با مقادیر جدید
    if (this.props.value !== nextProps.value) {
      return true; // رندر مجدد
    }
    return false; // عدم نیاز به رندر
  }

  render() {
    return <div>{this.props.value}</div>;
  }
}

موارد استفاده shouldComponentUpdate :

• بهبود عملکرد: در کامپوننت‌هایی که داده‌های سنگین پردازش می‌کنند، می‌توانید با استفاده از این متد، تنها زمانی که داده‌ها تغییر کرده‌اند، رندر را انجام دهید.
• مقایسه سفارشی: اگر مقایسه props یا state پیچیده باشد (مثلاً شامل آرایه‌ها یا اشیاء تو در تو باشد)، می‌توانید از این متد برای اجرای الگوریتم‌های سفارشی مقایسه استفاده کنید.

معادل متد shouldComponentUpdate در کامپوننت‌های تابعی

در کامپوننت‌های تابعی، از هوک React.memo برای شبیه‌سازی عملکرد shouldComponentUpdate استفاده می‌شود. React.memo به طور پیش‌فرض props را به صورت سطحی مقایسه می‌کند، اما می‌توانید یک تابع مقایسه سفارشی به آن بدهید.

const MyComponent = React.memo((props) => {
  return <div>{props.value}</div>;
}, (prevProps, nextProps) => {
  return prevProps.value === nextProps.value; // مقایسه سفارشی
});

نکات مهم shouldComponentUpdate :

1. استفاده بی‌مورد از shouldComponentUpdate می‌تواند منجر به پیچیدگی غیرضروری شود؛ بنابراین تنها زمانی از آن استفاده کنید که رندر غیرضروری تأثیر منفی بر عملکرد دارد.
2. در موارد پیچیده، استفاده از ابزارهایی مانند Immutable.js یا مقایسه عمیق (Deep Comparison) ممکن است مفید باشد.

 

جمع بندی:

چرخه حیات کامپوننت‌های کلاسی در ری‌اکت، یکی از جنبه‌های مهم در مدیریت رفتار کامپوننت‌هاست که توسعه‌دهندگان را قادر می‌سازد تا کنترل دقیقی بر فرآیند ایجاد، به‌روزرسانی، و حذف کامپوننت‌ها داشته باشند. متدهایی مانند componentDidMount، componentDidUpdate، componentWillUnmount و shouldComponentUpdate ابزارهای قدرتمندی برای بهینه‌سازی عملکرد و کنترل وضعیت در مراحل مختلف چرخه حیات ارائه می‌دهند.

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

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

مطالعه بیشتر در رفرنس های خارجی:

React Lifecycle Methods (react.dev)

The Component Lifecycle (reactjs.org)