آموزش React مقدماتی قسمت پنجم: Arrow Function ها و Object Destructuring

قسمت ها

در آخرین قسمت ، ما کد برنامه React خود را در دو component تقسیم کردیم: کامپوننت App و کامپوننت CoursesList. این به ما کمک کرد تا ساختار بیشتری را در پروژه خود وارد کنیم. برای ساخت یک برنامه مدرن React در این بخش، ما قصد داریم مفاهیم پیشرفته تری از JavaScript را در برنامه React خود معرفی کنیم: ما از arrow function ها و object destructuring استفاده خواهیم کرد.

Arrow Function ها چیستند؟

arrow function ها در جاوا اسکریپت برای تعریف توابع از syntax (=>) استفاده می کنند که اصطلاحا به آن fat arrow می گویند. طبق روش سنتی تعریف توابع در JavaScript به شکل زیر است:

function () { ... }

که مین عبور کنید و از synax که در زیر می بینید استفاده کنید:

const () => { ... }

با معرفی arrow function ها شما می توانید علاوه بر داشتن یک syntax مختصر تر، scope قابل درک بیشتری داشته باشید و همچنین از this نیز بهره ببرید.

یک arrow function در اصل یک تابع ناشناس است که یک عدد ثابت یا آرگومان را می پذیرد و در یک scope محدود عمل می کند.

بیایید گام به گام از arrow function ها در برنامه React موجود خود استفاده کنیم...

برای استفاده از Arrow Function، پیاده سازی را تغییر دهید

برای تغییر پیاده سازی موجود برای استفاده از arrow function ها، ما در App.js شروع می کنیم و کد عملکرد برنامه را به شکل زیر تغییر می دهیم:

همانطور که می بینید دیگر از کلمه کلیدی function استفاده نمی شود. در عوض تابع App با استفاده از نحو arrow function تعریف می شود.

همین تغییر را می توان در CoursesList.js ایجاد کرد:

در اینجا یک تفاوت اصلی وجود دارد: اجزای CourseList نیاز دارند که به خصوصیات آن دسترسی داشته باشند، بنابراین در تعریف تابع یک پارامتر داریم: props. این پارامتر در نحو arrow function نیز تعریف شده است.

arrow function ها تنها برای تعریف یک کامپوننت ساخته نشده اند. از arrow function ها می توان در داخل کامپوننت ها نیز استفاده کرد. اجازه دهید تابعی را که به فراخوان props.courses.map پاس داده می شود، با یکarrow function جایگزین کنیم:

Object Destructuring چیست؟

Object destructuring یکی دیگر از ویژگی های اصلی ES6 است که به شما کمک می کند تا کد React خود را ساده تر کنید. با استفاده از object destructuring می توانیم خصوصیاتی را از یک شی استخراج کنیم (چندین بار در یک زمان) و آن را مستقیماً به متغیرهای جدید اختصاص دهیم.

تغییر پیاده سازی برای استفاده از Object Destructuring

بیایید از object destructuring در برنامه CoursesList استفاده کنیم:

در اینجا می بینید که تعریف تابع تغییر کرده است. ما به جای پاس دادن آرگومان props، از object destructuring استفاده می کنیم تا مقدار ویژگی courses را بیرون بکشیم و در عین حال آن را به عنوان یک متغیر جدید courses در داخل تابع در دسترس قرار می دهیم. این امر با استفاده از curly braces و ذکر نام propertyها حاصل می شود (در مورد ما فقط courses است) که می خواهیم استخراج کنیم.

وقتی اکنون در داخل تابع، آرایه courses را داریم، دیگر نمی توانیم از طریق props.courses به آن دسترسی پیدا کنیم اما در عوض فقط از courses استفاده می کنیم.

در قسمت بعد می خوانید

در قسمت بعدی بیشتر با نحوه event handling در React آشنا خواهیم شد. بنابراین ما قصد داریم برنامه خود را به داشتن برخی عناصر ورودی کاربر نیز گسترش دهیم. با افزودن توابع مربوط به event handler، پس از آن قادر خواهیم بود به ورودی کاربر در برنامه خود واکنش نشان دهیم.

سعید نصیری
سعید نصیری

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

× در حال پاسخ به: