کامپوننت های خالص در ری اکت

React Stateless Components

0 457

ری اکت روش های مختلفی را برای ساخت یک کامپوننت پیشنهاد می کند. در این درس درباره آخرین روش ساخت یک کامپوننت با استفاده از کامپوننت های خالص بدون وضعیت (stateless) صحبت می کنیم.

در درس های قبلی روش های مختلف ساخت یک کامپوننت در ری اکت را بررسی کردیم. روشی که در این درس قصد داریم به آن بپردازیم، ساخت کامپوننت های بدون وضعیت در ری اکت است.

تا به اینجای آموزش ما با استفاده از متدهای React.Component و ()React.createClass اقدام به ساخت کامپوننت ها می کردیم. ری اکت به منظور کارایی و سادگی بیشتر، امکان ساخت کامپوننت های بدون وضعیت با استفاده از یک تابع معمولی جاوا اسکریپت را فراهم کرده است.

یک کامپوننت خالص می تواند جایگزین یک کامپوننتی شود که تنها یک متد render دارد.

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

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

همان طور که می بینید این کامپوننت ها صرفا یک تابع هستند، بنابراین به راحتی توسط جاوا اسکریپت می شود آنها را تست کرد.

props های مشابه، خروجی های DOM مجازی مشابهی هم دارند.

در ری اکت، کامپوننت های تابعی توسط یک آرگومان به نام props فراخوانی می شوند (مشابه کلاس سازنده در React.Component) و این propsها با context کامپوننت جاری فراخوانی می شود.

برای مثال، فرض کنید که می خواهیم کامپوننت Timer را با استفاده از کامپوننت های تابعی بازنویسی کنیم و به کاربران این امکان را بدهیم تا بتوانند استایل ساعت شان را بطور دینامیک مشخص کنند. (مثلاً زمان 12 یا 24 ساعته، جداکننده های مختلف، امکان عدم نمایش ثانیه و …)

حال می خواهیم کامپوننت های clock را به چند کامپوننت دیگر تقسیم کنیم. بنابراین هر بلوک زمانی را در یک کامپوننت مستقل ایجاد خواهیم کرد. مطابق زیر:

حال می توانیم به جای استفاده از کامپوننت Clock از این کامپوننت های مجزا استفاده کنیم:

کامپوننت clock را تغییر می دهیم تا بتواند یک رشته متنی را دریافت کند، و توسط این رشته بتوانیم تنها آن زمان های دلخواه (ساعت، دقیقه و … ) را نمایش دهیم. چندین روش برای انجام اینکار وجود دارد، مثلاً اجرای کد در داخل کامپوننت clock و یا ایجاد یک کامپوننت بدون وضعیت دیگر که یک رشته متنی را دریافت کند.

کد بالا به دلیل استفاده از key و {… props} ظاهر مناسبی ندارد. ری اکت تعدادی helper برای کار با کامپوننت های فرزند و مدیریت key منحصر به فرد مربوط به هر عنصر فرزند از طریق آبجکت React.Children، برای ما فراهم کرده است.

تابع render() در کامپوننت clock به دلیل استفاده از کامپوننت formatter خیلی ساده تر شده است.

حال نه تنها کامپوننت clockساده تر شد، بلکه براحتی می شود از این کامپوننت تست گرفت. همچنین به ما کمک می کند تا بتوانیم به راحتی به فریمورک های مدیریت وضعیت مثل Flux/Redux نرم افزارهای خود را طراحی کنیم.

مزایا و معایب کامپوننت های تابعی

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

  • می توانیم با برداشتن اجزای سنگین مثل سازنده ها، stateها، چرخه حیات و …، کامپوننت سبک تری داشته باشیم
  • نیازی به استفاده از کلمه کلیدی this نداریم
  • کامپوننت های نمایشی (یا کامپوننت های dump) به رابط کاربری بیشتر از منطق تاکید دارند (نیازی به کار با state در کامپوننت ها نیست)
  • ما را ترغیب می کند تا کامپوننت های کوچک تری ایجاد کنیم
  • کدنویسی های نامرتب را برجسته می کند (به منظور راحت شدن عملیات refactoring)
  • سرعت بالاتری دارند
  • به آسانی می شود از این کامپوننت استفاده مجدد کرد

احتمالاً با خود می گویید، پس چرا نباید همیشه از کامپوننت های تابعی استفاده کنم؟

در زیر تعدادی از معایب کامپوننت های تابعی را آورده ایم:

  • هیچ متد چرخه حیاتی ندارند.
  • قابلیت های محدودتری دارند.
  • کلمه کلیدی this ندارند.

در کل استفاده از کامپوننت های تابعی نسبت به کامپوننت های سنگین تر مثل React.Component توصیه می شود.

به این ترتیب تا به امروز سه روش ساخت کامپوننت در ری اکت را بررسی کردیم.

در درس بعدی به روش ساخت برنامه های ری اکت توسط create-react-app که یک ابزار مدیریت پکیج بوده و توسط تیم ری اکت توسعه پیدا کرده است، می پردازیم.

ترتیبی که روکسو برای یادگیری مطالب سری آموزش react (ری اکت) به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

mezitli escort
mezitli escort
mezitli escort