مفهوم کامپوننت ها در دنیای واقعی و در React

سلام عزیزان ، امیدوارم حالتون خوب باشه و سرشار از انرژی باشید . در این مقاله میخوایم با مفهوم کامپوننت ها در دنیای واقعی و در React آشنا بشیم و ببینیم که اصلا چی هستن و چرا باید ازشون استفاده کنیم ?!

مفهوم کامپوننت در دنیای واقعی :

• تعریف اول : به هر عضو کوچیک از یک مجموعه بزرگ کامپوننت گفته میشه یا به عبارت دیگه کامپوننت ها قطعاتی هستن که مجموعه ی اونا ، یک مجموعه بزرگتر و در اصطلاح یک کامپوننت اصلی رو تشکیل میده .

• تعریف دوم : به هر کدوم از اجزایی که کنار هم قرار میگیرن و یک موجودیت کلی رو به وجود میارن ، یک کامپوننت گفته میشه .

به عنوان مثال یک خودرو رو تو دنیای واقعی در نظر بگیریم . همونطور که میدونیم اجزای اصلی تشکیل دهنده ی اونو میتونیم به بدنه ، موتور ، چرخ ها ، باتری ، سیستم سوخت رسانی و موارد دیگه تقسیم کنیم :

در حالت کلی به هر کدوم از این اجزا ، یک کامپوننت کلی یا یک کامپوننت اصلی گفته میشه . حالا میتونیم هر کامپوننت مثلاً کامپوننت سیستم Power Train یا همون سیستم محرک چرخ های جلوی ماشین رو به یکسری کامپوننت های کوچیک تر و مستقل از هم تقسیم کنیم :

همچنین بازهم میتونیم جلوتر بریم و موتور این سیستم محرک رو به قطعات کوچیک تر و مستقل از هم تقسیم کنیم :

در نهایت به یک جایی میرسیم که دیگه اون کامپوننت یا اون عضو رو نمیتونیم به اجزا یا کامپوننت های کوچیک تر تقسیم کنیم ! مثلاً در تصویر زیر هر قطعه ، خودش به تنهایی یک موجودیت مجزاست و ما دیگه نمیتونیم اونو به اجزای کوچیک تر تقسیم کنیم :

پس اگر یک شرکت خودروسازی بخواد یک خودرویی رو تولید کنه ، در قدم اول میاد میبینه که مثلاً اون خودرو هزار تا قطعه یا اصطلاحا هزارتا کامپوننت نیاز داره و در قدم بعدی شروع به تهیه ی اون کامپوننت ها میکنه ، به اینصورت که بعضی هاشون رو خودش ایجاد میکنه و بعضی هاش رو هم از شرکت های زیر مجموعه تهیه میکنه و در نهایت با مجموعه ی کل کامپوننت ها ، اون خودرو رو ایجاد میکنه !

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

مفهوم کامپوننت در React :

تعریف کامپوننت توی خود سایت رسمی React به اینصورته :

کامپوننت‌ ‌ها به ما اجازه میدن که رابط کاربری پروژه مون رو به بخش ‌های مستقل از هم تقسیم کنیم و هر بخش‌ رو بصورت مجزا در نظر بگیریم و هر کدوم رو جدا جدا توسعه بدیم . از لحاظ مفهومی هر کامپوننت‌ مثل یک تابع توی جاوااسکریپت هست که یکسری ورودی (props) دریافت میکنه و در نهایت یک react element ‌رو برای ما برمیگردونه که قرار هست در صفحه ی مرورگر نمایش داده میشه . به عبارت دیگه کامپوننت ها یکسری موارد قطعه قطعه شده (مثل header و footer و navbar و غیره) هستن که با کنار هم قرار گرفتن ، میتونن یک وبسایت کلی رو ایجاد کنن !

نکته ی مهمی که در رابطه با کامپوننت ها وجود داره ، این هست که هر کامپوننت قابلیت استفاده ی مجدد داره و در اصطلاح reusable هست ، یعنی در هرجایی از پروژه که به یک کامپوننت خاصی نیاز داشته باشیم ، میتونیم ازش استفاده کنیم !

حالا سوالی که پیش میاد این هست که ما چرا باید از کامپوننت ها استفاده کنیم و استفاده از اونا‌ برای ما چه مزیتی داره !؟

در گذشته برنامه نویس ها برای توسعه برنامه ها هزاران خط کد مینوشتن و چون اون اپلیکیشن ها از ساختار سنتی DOM استفاده میکردن ، برای انجام یکسری کارها با چالش های زیادی مواجه میشدن ، مثلاً بروزرسانی این ساختار قبلاً به صورت دستی انجام میشد که روش مناسبی نبود تا اینکه برای غلبه به این موضوع ، مفهوم کامپوننت ها به وجود اومد ! در این رویکرد کل برنامه به قطعه کدهای منطقی کوچیک تر و مستقل از هم تقسیم میشه و هر قسمت به صورت جدا در فایل مختص به خودش نگهداری میشه تا بتونیم برنامه مون رو‌ حرفه ای تر توسعه بدیم و هرجا که نیاز داشتیم اونو به راحتی بروز رسانی کنیم ! این موضوع باعث تمیز بودن کد و ساختار پروژه و همچنین افزایش سرعت اجرای برنامه میشه ! مثلا اگر فرض کنیم که از یک کامپوننت در سه جای مختلف استفاده کردیم ، دیگه نیازی نیست که مثل قبل برای تغییر این سه کامپوننت هر کدوم رو به صورت جدا جدا تغییر بدیم ، بلکه ما تنها فقط یکبار کامپوننت اصلی رو تعریف میکنیم و در جاهای مختلف بسته به نیازمون ازش استفاده میکنیم ، حالا اگر زمانی نیاز به تغییر این سه کامپوننت داشتیم ، فقط خود کامپوننت اصلی رو تغییر میدیم !

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

برای درک بهتر کامپوننت ها فرض کنیم یک رابط کاربری داریم که به این شکل هست :

هنگامی که ما از React استفاده میکنیم ، میتونیم رابط کاربری مون رو مطابق شکل زیر به یک سری از قسمت های جدا از هم تقسیم کنیم :

بخش Navbar Menu که شامل منوها هست ، بخش Product که اطلاعات مربوط به یک محصول رو در داخل خودش نگهداری میکنه و بخش Cartکه مربوط به سبد خرید هست ! توی React به هر کدوم از اینها ، کامپوننت گفته میشه و همشون در کنار هم ، در داخل یک کامپوننت اصلی به نام App قرار میگیرن . پس اولین قدم React این هست که میاد تمام قسمت ‌های مختلف برنامه ی مارو از هم جدا میکنه تا هر کدوم از اون ها به شکل مجزا و جدا از هم قابل توسعه باشن !

در نهایت به عنوان کلام آخر باید گفت که کامپوننت ها قلب React هستن :)

خوب دوستان به پایان این مقاله رسیدیم و امیدوارم لذت کافی رو برده باشین . منتظر نظرات و انتقادهای گرمتون هستم .

مخلصیم | سیاوش ستاری - 23 تیر 1400