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

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

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

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

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

1. Mounting methods

• constructor()
• componentWillMount() (Depricated in RN 0.60)
• render()
• componentDidMount()

1. Updating methods

• componentWillReceiveProps() (Depricated in RN 0.60)
• shouldComponentUpdate()
• componentWillUpdate() (Depricated in 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.');

eturn 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=&quotC&quot />

</View>

);

}

}

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

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

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

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