بخش اول: مفاهیم اساسی جاوا اسکریپت مدرن برای استفاده از React
اینک به فصل اول راهنمای React رسیده‌ایم. با ما همراه باشید.
آیا قبل از یادگیری عملی React باید چیزی را بیاموزیم؟
اگر قصد دارید ری‌اکت را بیاموزید ابتدا باید چند چیز را یاد گرفته باشید. برخی فناوری‌های پیش‌نیاز وجود دارند که باید با آن‌ها آشنا باشید و از آن جمله برخی از موارد مرتبط با ویژگی‌های جدید جاوا اسکریپت که بارها در React مشاهده خواهید کرد.
برخی اوقات فکر می‌کنند که یک ویژگی خاص از سوی React ارائه شده است؛ در حالی که آن ویژگی بخشی از ساختار جاوا اسکریپت مدرن است. البته لازم نیست در حال حاضر در این زمینه یک خبره باشید؛ اما هر چه در React جلوتر برویم، به یادگیری این موارد بیشتر نیاز خواهید داشت. در ادامه فهرستی از مواردی که به یادگیری سریع‌تر شما کمک می‌کند را ارائه کرده‌ایم.
متغیرها
منظور از متغیر، عبارتی است که به یک شناسه انتساب یافته است و از این رو می‌توان در موارد آتی در برنامه آن را مورد ارجاع قرار داده و استفاده کرد. متغیرها در جاوا اسکریپت هیچ نوع مشخصی ندارند. می‌توان یک نوع به متغیر نسبت داد و سپس می‌توان نوع دیگری برای آن تعیین کرد و هیچ خطا یا مشکلی نیز پیش نمی‌آید.
به همین دلیل است که جاوا اسکریپت در مواردی یک زبان برنامه‌نویسی «فاقد نوع» (untyped) نامیده می‌شود. متغیر باید پیش از استفاده، اعلان شود. ۲ روش برای انجام این کار وجود دارد که شامل استفاده از کلیدواژه‌های var ،let یا const است. تفاوت این سه روش در نوع تعامل بعدی با متغیر است.
استفاده از var
تا ES2015 کلیدواژه var تنها سازه موجود برای تعریف کردن متغیرها بود.
Var a = ۰
اگر فراموش کنید از var استفاده کنید، مقدار مورد نظر خود را به یک متغیر اعلان نشده انتساب می‌دهید و نتایج این کار بسته به موقعیت متفاوت خواهد بود.
در محیط‌های مدرن که در آن‌ها حالت strict فعال‌شده است، در این مورد با خطا مواجه می‌شوید. در محیط‌های قدیمی‌تر یا وقتی که حالت strict غیرفعال است، این مورد باعث می‌شود که متغیر مقداردهی شود و به یک شیء سراسری انتساب می‌یابد.
اگر متغیری را هنگام اعلان کردن، مقداردهی نکنید، دارای مقدار undefined خواهد بود تا این که مقداری به آن انتساب داده شود.
var a //typeof a === ‘undefined’
شما می‌توانید بارها و بارها مقدار جدیدی به متغیر انتساب دهید و مقدار قبلی را باطل کنید:
همچنین می‌توانید متغیرهای چندگانه‌ای را به یکباره در گزاره واحد اعلان کنید:
دامنه (scope) متغیر بخشی از کد است که متغیر در آن قابل مشاهده است.
متغیری که با var خارج از هر تابع مقداردهی شود، به یک شیء سراسری انتساب می‌یابد و دارای دامنه سراسری است یعنی در همه جای کد قابل مشاهده است. متغیری که با یک var درون یک تابع مقداردهی شود، به آن تابع انتساب می‌یابد و به صورت محلی در آن و تنها از درون آن قابل مشاهده است و از این حیث مانند یک پارامتر تابع است.
هر متغیری که در یک تابع با همان نام متغیر سراسری تعریف شود، نسبت به متغیر سراسری تقدم می‌یابد و به سایه آن تبدیل می‌شود.
باید دقت کنید که یک بلوک (که به وسیله آکولادها مشخص می‌شود) دامنه جدیدی تعریف نمی‌کند. دامنه جدید تنها زمانی که یک تابع ایجاد شود تعریف می‌شود، زیرا var دارای دامنه بلوکی نیست بلکه دامنه تابعی دارد.
درون یک تابع هر متغیری که در آن تعریف شود، در تمام کد درون تابع قابل مشاهده خواهد بود حتی اگر متغیر در انتهای تابع اعلان شود همچنان می‌توان در آغاز تابع به آن ارجاع داد، چون جاوا اسکریپت پیش از اجرای تابع همه متغیرها را به ابتدای آن می‌برد (این کار hoisting نامیده می‌شود.) برای جلوگیری از سردرگمی همواره تابع‌ها را در ابتدای یک تابع اعلان کنید.
استفاده از let
Let ویژگی جدیدی است که در ES2015 معرفی شده است. در واقع let یک نسخه دارای دامنه بلوکی از var محسوب می‌شود. دامنه آن به بلوک، گزاره یا عبارتی که در آن تعریف می‌شود و همه بلوک‌های درونی که داخل آن بلوک قرار دارند، مربوط می‌شود.
توسعه‌دهندگان جاوا اسکریپت مدرن، در غالب موارد صرفاً از let استفاده می‌کند و استفاده از var را کنار گذارده‌اند. تعریف کردن let در خارج از هر تابع، برخلاف var باعث ایجاد یک متغیر سراسری نمی‌شود.
استفاده از const
متغیرهایی که با var و let اعلان شوند، می‌توانند در ادامه در برنامه تغییر یابند و مجدداً مقادیری به آن‌ها انتساب یابد. زمانی که یک const مقداردهی بشود، مقدار آن نمی‌تواند دیگر تغییر یابد و نمی‌توان مقدار دیگری به آن انتساب داد.
const a = ‘test’
بدین ترتیب دیگر نمی‌توان مقادیر دیگری به const با نام a انتساب داد. با این حال می‌توان a را در صورتی که شیئی باشد که متدهایی برای تغییر محتوای خود داشته باشد، تغییر داد.
Const تغییرناپذیری را تضمین نمی‌کند و صرفاً این اطمینان را می‌دهد که ارجاع را نمی‌توان تغییر داد. Const مانند let دارای دامنه بلوکی است.
توسعه‌دهندگان جاوا اسکریپت مدرن برای متغیرهایی که نیازی به انتساب مقادیر مجدد در برنامه نخواهند داشت، همواره از const استفاده می‌کنند. دلیل این مسئله آن است که همواره باید سعی کنیم از ساختارهایی استفاده کنیم که امکان بروز خطا در ادامه را کاهش دهند.
تابع‌های Arrow
تابع‌های Arrow در ES6 / ECMAScript 2015 معرفی شده‌اند و از زمان معرفی خود، روش نمایش و کارکرد کدهای جاوا اسکریپت را برای همیشه تغییر داده‌اند. این تغییر چنان مثبت بوده است که دیگر به ندرت استفاده از کلیدواژه function را در کدهای مدرن می‌بینید.
این ساختار از نظر بصری ساده و خوشایند است و امکان نوشتن تابع‌هایی با ساختار کوتاه‌تر را فراهم ساخته است. بدین ترتیب ساختار زیر:
به حالت زیر تغییر یافته است:
اگر بدنه تابع تنها شامل یک گزاره باشد، می‌توان پرانتزها را حذف کرد و همه آن را در یک خط نوشت:
پارامترها درون پرانتزها ارسال می‌شوند:
به لطف این ساختار کوتاه، تابع‌های Arrow استفاده از تابع‌های کوچک را ترویج داده‌اند.
بازگشت ضمنی (Implicit Return)
تابع‌های Arrow امکان داشتن مقادیر بازگشتی ضمنی را فراهم ساخته‌اند. این مقادیر بدون استفاده از کلیدواژه return بازگشت می‌یابند. طرز کار این بازگشت به این صورت است که گزاره‌های تک‌خطی در بدنه تابع به صورت زیر تعریف می‌شوند:
طرز کار this در تابع‌های Arrow
This مفهومی است که شاید درک آن دشوار باشد، چون بسته به زمینه و همچنین بر اساس حالت جاوا اسکریپت (strict یا غیر آن) متفاوت است.
می‌بایست این نکته را روشن کنیم، زیرا تابع‌های Arrow به طرزی کاملاً متفاوت از تابع‌های معمولی عمل می‌کنند. زمانی که یک متد برای یک شیء تعریف می‌شود، در تابع معمولی this اشاره به شیء دارد و از این رو می‌توان کد زیر را داشت:
بدین ترتیب فراخوانی ()car.fullName مقدار “Ford Fiesta” را بازگشت می‌دهد.
دامنه this در تابع‌های Arrow از زمینه اجرایی به ارث می‌رسید. یک تابع Arrow به هیچ وجه به this اتصال نمی‌یابد و از این رو مقدار آن در پشته فراخوانی جستجو می‌شود. بدین ترتیب کدی مانند ()car.fullName کار نخواهد کرد و رشته “undefined undefined” را بازگشت می‌دهد:
به همین دلیل، تابع‌های Arrow به عنوان متدهای شیء مناسب نیستند. همچنین تابع‌های Arrow نمی‌توانند به عنوان سازنده (constructor) استفاده شوند، زیرا در هنگام مقداردهی اولیه یک خطای TypeError ایجاد می‌شود.
در این موارد باید از تابع‌های معمولی استفاده کرد که زمینه دینامیک مورد نیاز نیست. همچنین این مورد در هنگام مدیرت رویدادها، موجب ایجاد مشکل می‌شود. شنونده‌های رویداد DOM سعی می‌کنند this را روی عنصر هدف تنظیم کنند و اگر در handler رویداد روی this تکیه کنیم، به یک تابع معمولی نیاز خواهیم داشت:
