چرخه حیات کامپوننت ها در ReactJS – آموزش ReactJS

  • پنج شنبه ۱۶ اسفند ۱۳۹۷
  • بازدید ۵۷ نفر

reactjs component life cycle 6144 تصویر

چرخه حیات کامپوننت ها در ReactJS

در این بخش از آموزش ReactJS در مورد متدهای مربوط به چرخه حیات کامپوننت ها بحث خواهیم کرد.

متدهای چرخه حیات کامپوننت:

  • componentWillMount : قبل از رندر شدن در سرور و سمت کلاینت اجرا می شود.
  • componentDidMount : پس از اولین رندر تنها در سمت کلاینت اجرا می شود. جایی که درخواست های AJAX اتفاق می افتد و DOM یا state به روز می شود.
  • componentWillReceiveProps : قبل از رندر شدن به محض این که props به روز شود، فراخوانی می شود.
  • shouldComponentUpdate : مقدار true یا false باز می گرداند. برای تشخیص اینکه کامپوننت به روز شده است یا خیر استفاده می شود (به صورت پیشفرض true است).
  • componentWillUpdate : درست قبل از رندر شدن فراخوانی می شود.
  • componentDidUpdate : درست بعد از رندر شدن فراخوانی می شود.
  • componentWillUnmount : بعد از اینکه کامپوننت از DOM جدا شود، فراخوانی می گردد.

در مثال زیر ما state اولیه را در سازنده تنظیم می کنیم. setNewnumber به منظور به روز رسانی state استفاده می شود. تمام متدهای مربوط به چرخه حیات در داخل کامپوننت Content قرار دارند.

محتوای فایل App.jsx:

محتوای فایل main.js:

خروجی مثال فوق بعد از اولین رندر:

react component lifecycle initial screen 6144 تصویر

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است