مفهوم چرخه زندگی (Lifecycle) در React Native Application Components

مفهوم چرخه زندگی (Lifecycle) در React Native Application Components
چکیده مقاله : انتشار : ۱۳۹۸/۱۰/۰۷ ۰ نظر ۱۶۹ بازدید

متدهای چرخه زندگی یا Lifecycle methods، متدهایی هستند که از قبل در React Native تعبیه شدن، این یعنی که این متدها از قبل برای کاربرد خاصی برنامه نویسی شدن و ما فقط از اونها در جایی که نیاز داریم استفاده میکنیم.

به عنوان یک توسعه دهنده موبایل شمابایدبه Lifecycleدر component \ screen \ activity اهمیت بدین و در موردشون بخوبی بدونین، تا بدونین که چه زمانی و کجا مورد نیاز شما هست تا از این متد ها استفاده کنید.

درود بر شما دوستان خوبم، در این مقاله میخوام در مورد Lifecycle of React Native Application Component صحبت کنم، قبل از شروع هرچیزی اجازه بدین یک چیزو باهم توافق کنیم; من برخی از کلمه های کلیدی، یا واژه هایی که مفهموی هستند را به فارسی ترجمه نمیکنم و بهتر هست که بصورت انگلیسی بیان بشه تا مفهوم خودشو تو دنیای برنامه نویسی بهتر برسونه.برای مثال واژه Mounting methods قرار نیست به فارسی برگردونده بشه، زیراکه مفهوم اصلی خودشو از دست میده.

خب بریم سراغ متدهای چرخه زندگی یا Lifecycle methods،متدهایی هستند که از قبل در React Native تعبیه شدن، این یعنی که این متدها از قبل برای کاربرد خاصی برنامه نویسی شدن و ما فقط از اونها در جایی که نیاز داریم استفاده میکنیم.

به عنوان یک توسعه دهنده موبایل شمابایدبه Lifecycle در component \ screen \ activity اهمیت بدین و در موردشون بخوبی بدونین، تا بدونین که چه زمانی و کجا مورد نیاز شما هست تا از این متد ها استفاده کنید.

برای مثال، اگه ما بخوایم وقتی کاربر وارد صفحه ای میشه و اون را باز میکنه، ما یک سری عملیات را انجام بدیم، مقدار دهی های اولیه کنیم و یا یک کانکشن به اینترنت برقرار کنیم، و هر وقت کاربر اون صفحه را می بنده ما هم اتصال برقرار شده را ببندیم; در هردوی این حالتها ما باید اطلاعالت و دانش در مورد Lifecycle methods داشته باشیم.

The lifecycle of React Native Application

  1. Mounting methods
    • ()constructor
    • componentWillMount() (RN 0.60 منسوخ شده در)
    • ()render
    • ()componentDidMount
  1. Updating methods
    • componentWillReceiveProps() (RN 0.60 منسوخ شده در)
    • ()shouldComponentUpdate
    • componentWillUpdate() (RN 0.60 منسوخ شده در)
    • ()componentDidUpdate

3. Unmounting methods

    • ()componentWillUnmount

4.Error handling methods

    • ()componentDidCatch



۱. Mounting Methods:

۱. ()constructor

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


}()constructor

;()super

;('console.log('Constructor Called

{

۲. ()componentWillMount

این متد دقیقا بعد از متد ()constructor صدا زده میشه.بیشتر در جاهایی که synchronyus tasks را میخوای صدا بزنی یا اینکه network را میخوای صدا بزنی از این متد استفاده میکنی.


}()componentWillMount

;('console.log('componentWillMount called

{

۳. ()render

متد ()render از مهمترین متدها در Lifecycle Methods هست زیرا این متد برای تولید ظاهر صفحه و یا همون UI مورد استفاده قرار میگیره و یا میتونیم نمای اصلی صفحه را در

()render تعریف کنیم.



}()render

)return

< {{'View style={{ justifyContent: 'center', alignItems: 'center>

<Text>Language is: {this.props.name}</Text>

</View>

;(

{


۴. ()componentDidMount

این متد بعد از متد ()render صدا زده میشه. مثلا میتونیم بعد از بالا اومدن صفحه اگه نیاز به صدا زدن network داشتیم در این متد عملیات مربوطه را انجام بدیم.


}()componentDidMount

;('console.log('componentDidMount called

{


۲. Updating methods:

Updating methods برای بروز رسانی مقادیر Props یا State در React Native استفاده میشن.

این نوع متدها، هنگامی که کامپوننت ها re-render میشن، بصورت خودکار صدا زده میشن.

۱. ()componentWillReceiveProps

این متد قبل اینکه کامپوننت کاری بر روی props های جدید انجام بده صدا زده میشه.

ما میتونیم prop بعدی را به عنوان پارامتر بهش ارسال کنیم.

توجه: وقتی prop را داریم تغییر میدیم، React Native متوجه این موضوع میشه و مقداربعدی prop یا همون جدید را به این متد پاس میده و ما میتونیم قبلاینکه این prop بدست کامپوننت برسه هر عملی خواستیم انجام بدیم.

}(componentWillReceiveProps(nextProp

;(console.log('componentWillReceiveProps called.', nextProp

{


۲. ()shouldComponentUpdate

این متد هر بار قبل از اینکه screen یا parent component دوباره رندر (re-render) بشه صدا زده میشه.

ما میتونیم بابرگرداندن مقدار false در درون این متد از re-render شدن screen جلوگیری کنیم.


}(shouldComponentUpdate(nextProp, nextState

}('.console.log('shouldComponentUpdate called

;return true

{


۳. ()componentWillUpdate

قبل re-render شدن، موقعی که مقدار جدید prop یا state برای بروز رسانی دریافت میشه، صدا زده میشه.

توجه: ما میدونیم وقتی که مقدار جدید prop یا state میاد باید یک بروز رسانی انجام بدیم و re-render کنیم، این متد قبل re-render در چنین حالتی که میخوایم بر اساس prop یا state، بروز رسانی کنیم صدا زده میشه. این به متد ({})this.setState اجازه کار نمیده تا کار خودش تموم بشه.


}(componentWillUpdate(nextProp, nextState

;('.console.log('componentWillUpdate called

{


۴. ()componentDidUpdate

این متد بعد از رندرینگ (rendering) صفحه صدا زده میشه.

بیشترین کاربرد این متد برای ایجاد تعامل بیت مقادیر آپدیت شده در rendering و اجرا کردن رویدادهای بعد render است.

مثلا اینطور فکر کنین که نیاز دارین بعد عوض شدن مقدار props شما یک درخواست network به سروری (API) داشته باشی، با این متد میتونی بعد آپدیت شدن مقداری در props، اون مقدارو با مقدار قبلیش مقایسه کنی و اگه تکراری بود دیگه درخواست اضافی network برای گرفتن اطلاعاتی از سرور بر اساس pros جدید ندی.


;(componentDidUpdate(prevProp, prevState

('.console.log('componentDidUpdate called

{


۳. Unmounting method

۱. ()componentWillUnmount

این متد زمانی صدا زده میشه که کامپوننتی از DOM حذف شده.

در این متد میتونیدتایمرهای در حال اجرا را پاک کنید،درخواست های network را ببندید و مقادیر قبلی ذخیره شده در برنامه را پاک کنید.


}()componentWillUnmount

;('.console.log('componentWillUnmount called

{


۴. Error handling method

۱. ()The componentDidCatch

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

این متد به ما کمک میکنه تا بدونیم در کجا از بلاک try /cache برای مدیریت خطاها استفاده کنیم.


}(componentDidCatch(error, info

;('.console.log('componentDidCatch called

{


این متدهای مختلفی که بررسی کردیم،چرخه حیات یا همون Lifecycle از هر Screen/Activity/Component نامیده میشن.

خب، بهترین کار اینه که خودتون یه تلاش کوچیک کنید و با مثالی ساده این متد ها را بررسی کنید.

میتونید یه پروژه ساده ایجاد کنید که آموزشش در این لینک هست(آموزش ایجاد پروژه React Native)، یا اینکه اگه پروژه ای آماده دارین توی اون تست کنید.

در هر صورت نمونه کد زیر را در فایل App.js موجود جایگزین کنین.

App.js

/*Example of Reac Native Life Cycle*/

;'import React, { Component } from 'react

;'import { Text, View } from 'react-native

}class CustomComponent extends Component

}()constructor

;()super

;('.console.log('Constructor Called

{

}()componentWillMount

;('.console.log('componentWillMount called

{

}() componentDidMount

;('.console.log('componentDidMount called

{

}(componentWillReceiveProps(nextProp

;(console.log('componentWillReceiveProps called.', nextProp

{

}(shouldComponentUpdate(nextProp, nextState

;('.console.log('shouldComponentUpdate called

;return true

{

}(componentWillUpdate(nextProp, nextState

;('.console.log('componentWillUpdate called

{

}(componentDidUpdate(prevProp, prevState

;('.console.log('componentDidUpdate called

{

}()componentWillUnmount

;('.console.log('componentWillUnmount called

{

}(componentDidCatch(error, info

;('console.log('componentDidCatch called

{

}()render

)return

< {{'View style={{ justifyContent: 'center', alignItems: 'center>

<Text>Language is: {this.props.name}</Text>

</View>

;(

{

{

}export default class App extends Component

}()render

)return

< {{'View style={{ flex: 1, justifyContent: 'center>

CustomComponent name="C>

</View>

;(

{

{

این بود کل Lifecycle methods در React Native app

خوشحال میشم هرگونه انتقاد یا سوالی را با من درمیون بذارین.

کدنویسی شادی داشته باشین.

امیدوارم خوشتون اومده باشه :)


دوستانی که این مقاله را مطالعه کرده اند، از دوره های آموزشی زیر نیز استقبال کرده اند:

دوستانی که این مقاله را مطالعه کرده اند، از مقالات زیر نیز استقبال کرده اند:

نظرات

به این مقاله امتیاز دهید

۵ نفر (امتیاز مقاله ۵)