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

آیا شما تازه واکنش نشان داده اید؟ آیا می خواهید در 5 دقیقه یا کمتر چیزی جدید بیاموزید؟ بیایید درباره مؤلفه واکنش واکنش بدانیم.

مؤلفه چیست؟

مشت همه ، قبل از اینکه به این موضوع بپردازیم ، باید کاملاً بدانیم که یک مؤلفه در واقع چیست.

یک کامپوننت (در React) می تواند به عنوان یک بلوک یا بخشی از برنامه ما توصیف شود که در کل پروژه قابل استفاده مجدد باشد (و ممکن است دیگران) ، این معمولاً با یک عنصر UI و رفتار آن مرتبط است.

حال ، با فرض اینکه شما پایه را می دانید ، اجازه دهید در مورد دو نوع مؤلفه ای که می توانیم در یک پروژه React ایجاد کنیم ، کلاس کامپوننت ها و اجزای عملکردی بررسی کنیم.

کامپوننت کلاس

به این قسمت اصلی نیز گفته می شود. از زمان ECMAScript 2015 ، ما در کلاس جاوا اسکریپت "کلاس" داریم. React از این نحو برای ایجاد یک مؤلفه حالت پذیر با چرخه عمر استفاده می کند. این حالت معمولاً برای تغییر رفتار مؤلفه یا فرزندان آن استفاده می شود.

بگذارید این کد را کرک کنیم. در اینجا ما یک "کلاس JS" داریم که عملکرد آن را از React.Component به ارث می برد ، سپس سازنده آن را اعلام می کنیم که علامت های پیشنهادی را به عنوان استدلال دریافت کرده است. بعد ، ما فوق العاده می نامیم ، برای انتقال داده ها به کلاس والدین کامپوننت ، این کار هنگام ایجاد این نوع کامپوننت لازم است.

"غرفه ها" شیئی است که تمام خصوصیاتی را که ما از آن استفاده می کنیم به عنوان برچسب دریافت کرده است.

کامپوننت Lamp دارای یک پیشنهاد اساسی است ، یک بلاک HTML را با یک متن و یک دکمه ارائه می دهد.

با کلیک بر روی سوئیچ دکمه لامپ را روشن یا خاموش می کنیم ، اینجا جایی است که حالت ما وارد بازی می شود ، در خط 4 حالت لامپ را آغاز می کنیم و بعد از آن روش متد را روشن می کنیم ، چراغ را روشن می کنیم. لامپ ما

این "حالت" شیء با برخی از خصوصیات است که در زمان اجرای کلاس تغییر خواهد کرد. نباید مستقیماً تغییر کرد بلکه روش setState است.

شما می توانید حالت را از این طریق تغییر دهید:

مؤلفه عملکردی

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

بیایید این مثال از یک مؤلفه لامپ را بررسی کنیم.

درست در اینجا ، ما یک تابع معمولی داریم ، یک شیء تخریب شده با یک ویژگی به نام lampState را دریافت می کند ، نوبت به یک متغیر محلی می رسد و ما برای بازگشت یک برچسب img متفاوت ، ارزیابی می کنیم که صحیح است یا نادرست.

اکنون می توانیم از آن در کامپوننت Lamp استفاده کنیم تا نشان دهیم که چگونه آنها می توانند با هم کار کنند.

این همان است که وقتی دکمه سوئیچ را کلیک می کنید ، تصویر لامپ روشن شده تغییر می کند.

در مورد هوکس ها چطور؟

قلابها یکی از ویژگی های آینده است که به شما امکان می دهد از حالت کارآمد در اجزای کاربردی استفاده کنید. این موضوع را باید با جزئیات بیشتر توضیح داد ، زیرا ما باید در واکنشی عمیق تر حفر شویم ، و همچنین فکر می کنم که آن را سزاوار مقاله خود است.

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