LifeCycle ها در ری اکت

امید کیانی 555 بازدید 1398/07/13
LifeCycle ها در ری اکت

در کتابخانه ری اکت هر کامپوننت شامل متدهایی هست که به آنها چرخه ی حیات (Life-Cycle) می گویند.این متدهای چرخه حیات به عنوان چرخه حیات کامپوننت نامیده می شود.

متدهای چرخه حیات خیلی پیچیده نیستند و در نقاط مختلف کامپوننت صدا زده می شوند.

چرخه حیات در کامپوننت ها به 4 فاز تقسیم می شوند:

  • Initial Phase
  • Mounting Phase
  • Updating Phase
  • Unmounting Phase

هر فاز شامل برخی متدهای چرخه ی حیات است که هر متد مربوط به مرحله ای خاص است.

Initial Phase

این مرحله تولد چرخه ی حیات یک کامپوننت در کتابخانه ی ری اکت است.در این فاز یک کامپوننت حاوی props های پیش فرض و state های اولیه است که اینها در constructor یک کامپوننت انجام می شوند.

Initial Phase فقط یکبار اتفاق می افتد و شامل متدهای زیر است:

()getDefaultProps: برای مشخص کردن مقدار پیش فرض this.props استفاده می شود.آن قبل از ایجاد یک کامپوننت یا هر props ی که از والد به آن منتقل می شود،فراخوانی می شود.

()getInitialState: برای مشخص کردن مقدار پیش فرض this.state استفاده می شود.آن قبل از ایجاد یک کامپوننت فراخوانی می شود.

 

Mounting Phase

در این فاز یک شیء از کامپوننت ایجاد شده و درون DOM ذخیره می شود.آن حاوی متدهای متدهای زیر است:

()componentWillMount: این متد بلافاصله قبل از اینکه کامپوننت رندر شود،فراخوانی می شود.در این قسمت هنگامی که شما ()setState را درون این متد صدا می زنید،کامپوننت re-render نخواهد شد.

()componentDidMount: این متد بلافاصله بعد از اینکه کامپوننت رندر شود،فراخوانی می شود و بر روی DOM قرار می گیرد.

()render: این متد در هر کامپوننت تعریف می شود و آن مسئول بازگشت یک عنصر در html است.اگر نخواهیم هیچ چیز را درون متد render برگردانیم،ما می توانیم مقدار null یا false را برگردانیم.

 

Updating Phase

در این فاز ما props های جدید دریافت کرده و حالت های state را تغییر می دهیم.

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

این فاز دارای متدهای زیر است:

()componentWillRecieveProps: این متد هنگامی که کامپوننت یک props جدید را دریافت می کند،فراخوانی می شود.

اگر ما بخواهیم یک state را در پاسخ به تغییرات props بروزرسانی کنیم،ما باید this.props و nextProps را برای انجام انتقال state توسط متد this.setState مقایسه کنیم.

()shouldComponentUpdate: هنگامی که کامپوننت تصمیم به تغییر یا بروزرسانی DOM را دارد،این متد فراخوانی می شود.

این متد به ما اجازه می دهد تا رفتار کامپوننت را در بروزرسانی آن کنترل کنیم.بدین صورت که اگر این متد مقدار true را بازگرداند،کامپوننت بروزرسانی خواهد شد،در غیر اینصورت از بروزرسانی کامپوننت صرف نظر خواهد کرد.

()componentWillUpdate: این متد قبل از اینکه عملیات بروزرسانی در کامپوننت رخ دهد،فراخوانی می شود.در این متد نمی توانیم state کامپوننت را با فراخوانی متد this.setState تغییر دهیم.

آن صدا زده نخواهد شد،اگر ()shouldComponentUpdate مقدار false را برگرداند.

()render: این متد برای this.props و this.state فراخوانی می شود و یکی از نوع های زیر را برمی گرداند:

React elements, Arrays and fragments, Booleans or null, String and Number 

اگر متد ()shouldComponentUpdate مقدار false را برگرداند،کد درون متد render برای بررسی اینکه کامپوننت به درستی خودش را نمایش دهد،دوباره فراخوانی می شود.

()componentDidUpdate: این متد بلافاصله بعد از اینکه بروزرسانی کامپوننت رخ دهد،فراخوانی می شود.

در این متد می توانیم کدهایی که بعد از بروزرسانی یکبار می خواهند اجرا شوند را قرار دهیم.

 

Unmounting Phase

این فاز هنگامی صدا زده می شود که یک نمونه از کامپوننت از بین برود و از DOM اصطلاحا unmount شود.این فاز تنها حاوی یک متد است که به شرح زیر است:

()componentWillUnmount: این متد قبل از اینکه کامپوننت از بین برود و برای همیشه unmounted شود،فراخوانی می شود.

آن هرگونه پاکسازی های لازم که مربوط به انجام کارهایی نظیر: تایمرهای بی اعتبار،event listener ها،لغو درخواست های شبکه یا پاکسازی عنصر های DOM را انجام می دهد.

اگر یک کامپوننت unmount شود،دیگر نمی توانیم آن را دوباره mount کنیم.

مثال:

import React, { Component } from 'react';  
  
class App extends React.Component {  
   constructor(props) {  
      super(props);  
      this.state = {hello: "Laraman"};  
      this.changeState = this.changeState.bind(this)  
   }    
   render() {  
      return (  
         <div>  
             <h1>ReactJS component's Lifecycle</h1>  
             <h3>Hello {this.state.hello}</h3>  
             <button onClick = {this.changeState}>Click Here!</button>          
         </div>  
      );  
   }  
   componentWillMount() {  
      console.log('Component Will MOUNT!')  
   }  
   componentDidMount() {  
      console.log('Component Did MOUNT!')  
   }  
   changeState(){  
      this.setState({hello:"All!!- Its a great reactjs tutorial."});  
   }  
   componentWillReceiveProps(newProps) {      
      console.log('Component Will Recieve Props!')  
   }  
   shouldComponentUpdate(newProps, newState) {  
      return true;  
   }  
   componentWillUpdate(nextProps, nextState) {  
      console.log('Component Will UPDATE!');  
   }  
   componentDidUpdate(prevProps, prevState) {  
      console.log('Component Did UPDATE!')  
   }  
   componentWillUnmount() {  
      console.log('Component Will UNMOUNT!')  
   }  
}  
export default App;

خروجی:

 هنگامی که بر روی دکمه Click Here کلیک کرده،ما نتیجه بروز شده را دریافت می کنیم که در خروجی زیر مشاهده می شود:

امیدواریم که با مفهوم Life Cycle ها در ری اکت کاملا آشنا شده باشید.

 

دیگر مقالات
حمید تیموری 830 بازدید 1398/07/09
حمید تیموری 403 بازدید 1398/10/19
حمید تیموری 757 بازدید 1397/10/06
حمید تیموری 88 بازدید 1399/03/16
حمید تیموری 2582 بازدید 1397/07/09


نظرات (0)
هنوز نظری ثبت نشده است
برای ثبت نظر ابتدا وارد سایت شوید