چرخه های عمر مonلفه های ReactJS

از

sonasona

FrontEnd Developer

نماد اجتماعی LinkedIn

هر جز component در React یک چرخه حیات از وقایع را پشت سر می گذارد. فکر می کنید گذراندن چرخه تولد ، رشد و مرگ همانند تصویر زیر است.

b3eb”> “> مراحل عبارتند از:

  • شروع اولیه – شروع سفر م ofلفه
  • نصب – تولد م yourلفه خود
  • بروزرسانی – رشد م componentلفه شما
  • لغو نصب – مرگ م componentلفه

    1. مقداردهی اولیه

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

    2. نصب

    نصب مرحله ای از چرخه حیات ملفه است که مقدار اولیه اولیه تکمیل شده و م componentلفه React بر روی DOM سوار می شود (یعنی ایجاد شده و در DOM) و برای اولین بار در صفحه وب ارائه شده است. این دارای 2 عملکرد از پیش تعریف شده است: –

    • componentWillMount () : همانطور که از نام آن مشخص است ، این روش درست قبل از نصب یک قطعه بر روی DOM فراخوانی می شود ، قبل از اجرای تابع رندر () برای اولین بار یک بار فراخوانی می شود. بعد از این روش ، م componentلفه نصب می شود.
    • componentDidMount () : به همان روش قبلی ، این روش پس از نصب م componentلفه بر روی DOM و فقط یک بار در چرخه زندگی فراخوانی می شود. . قبل از اجرای این روش ، روش رندر فراخوانی می شود (یعنی ما می توانیم به DOM دسترسی پیدا کنیم). ما می توانیم با پاسخ API تماس های API برقرار کنیم و وضعیت را به روز کنیم

    3. به روزرسانی

    به روزرسانی مرحله ای است که حالت ها و پروپس های یک م componentلفه به روز می شوند و به دنبال آن برخی از رویدادهای کاربر مانند کلیک کردن ، فشار دادن یک کلید روی صفحه کلید و غیره جایی که وضعیت یک جز component تغییر می کند و از این رو رندر مجدد انجام می شود.

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

  • componentWillRecieveProps () عملکرد : به محض به روزرسانی غرفه ها قبل از فراخوانی رندر دیگر ، فراخوانی می شود. در اصل ، قبل از اینکه یک قطعه نصب شده لوازم جدید را دریافت کند ، فراخوانی می شود. اگر شما نیاز به به روزرسانی حالت در پاسخ به تغییرات پایه (به عنوان مثال ، برای تنظیم مجدد آن) دارید ، می توانید این.props و nextProps را مقایسه کرده و انتقال حالت را با استفاده از this.setState () در این روش انجام دهید.
  • shouldComponentUpdate: با این کار مشخص می شود که م componentلفه به روز شود یا خیر. این تابع با اعلام اینکه React می فهمد آیا خروجی م theلفه تحت تأثیر هر وضعیت یا به روزرسانی سازنده قرار خواهد گرفت یا خیر ، این نیاز را برآورده می کند. قبل از ارائه م componentلفه ای که قبلاً نصب شده است ، هنگام دریافت غرفه ها یا حالت های جدید ، فراخوانی می شود. در صورت برگشت نادرست ، مراحل بعدی رندر انجام نخواهد شد. این روش برای رندر اولیه یا هنگام استفاده از forceUpdate () فراخوانی نمی شود. این تابع از Props جدید و حالت جدید به عنوان آرگومان استفاده می کند و بازگرداندن اینکه آیا رندر مجدد دارد یا نه با برگرداندن مقدار درست یا غلط . به طور پیش فرض روی true تنظیم شده است. این روش فقط به عنوان بهینه سازی عملکرد وجود دارد.
  • کامپوننتWillUpdate: درست قبل از ارائه یعنی تابع فراخوانی می شود قبل از اجرای تابع () بعد از به روزرسانی حالت یا Props ، یک بار فراخوانی می شود.
  • componentDidUpdate: درست بعد از رندر فراخوانی می شود. این نیز مکان خوبی است درخواستهای شبکه را انجام دهید به شرطی که برنامه های فعلی را با برنامه های قبلی مقایسه کنید (به عنوان مثال اگر برنامه ها تغییر نکرده باشند ، ممکن است یک درخواست شبکه لازم نباشد). componentDidUpdate () در صورت لزوم فراخوانی نخواهد شدComponentUpdate () نادرست برمی گردد.

    4. Unmounting

    این آخرین مرحله از چرخه حیات جز lif است که مرحله پیاده سازی م theلفه از DOM است. عملکرد زیر تنها عضو این مرحله است.

    componentWillUnmount (): این عملکرد قبل از اینکه م componentلفه سرانجام پیاده نشده و از DOM تخریب شود فراخوانی می شود.

    شما نباید با setState () در کامپوننتWillUnmount () تماس بگیرید زیرا این م theلفه هرگز دوباره ارائه نمی شود. پس از نصب نمونه م componentلفه ، دیگر هرگز نصب نمی شود.

    در این روش نظافت لازم را انجام دهید ، مانند عدم اعتبارسنجی تایمرها ، لغو درخواست های شبکه یا تمیز کردن اشتراک هایی که در کامپوننتDidMount ایجاد شده اند ()

    با تشکر از شما برای خواندن. رمزگذاری واکنش نشان دهید!…

    همچنین در پشت https -webtips / reactjs-component-life-cycle-a9dcacd97cef

    مرتبط

    Adf image

    1 واکنش

    داستان قبل از شکلک

    < img alt src = "https://firebasestorage.googleapis.com/v0/b/hackernoon-app.appspot.com/o/images٪2FxseHM89vPuWWovVMPqKSMmXE7iS2-2ad3w7p.jpeg؟alt=media&token=1125d4add7af-214-762-762-762-762-762-762-762-712-72-4ddd7af214-7d4a2dd3d2af2ddd7af2dddddddf7af2dddfd7af2ddddfdfxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxcrccvccccvcccvcccccc.jpg ">

    برچسب ها

    ظهر به هکر بپیوندید

    حساب رایگان خود را برای باز کردن قفل ایجاد کنید تجربه خواندن سفارشی شما.