زمانی که با reactJs کار میکنید به روش های مختلف میتوانید کامپوننت تعریف کنید در ادامه خواهید دید که چه شباهت ها و تفاوت هایی بین این روش ها وجود دارد.
لیست مطالب
stateless component در reactJS
stateless component یک pure function است که props را به عنوان ورودی دریافت میکند و state نمیتواند داشته باشد بنابراین به آن stateless میگویند
See the Pen react – stateless component by abbas hosseini (@abizebel) on CodePen.
statefullcomponent در reactJS
statefull components ها از Component به ارث میبرند و امکانت بیشتری همچون state و lifecycle ها را در اختیار کامپوننت قرار میدهند، در مثال زیر میتوانید state و componentDidMount را که یک متد lifecycle است را مشاهده کنید
See the Pen react – statefull component by abbas hosseini (@abizebel) on CodePen.
pureComponent در reactJS
pureComponent ها مانند کامپوننت های statefull هستند با این تفاوت که shouldComponentUpdate را پشتیبانی میکند و همراه با آپدیت شدن کامپوننت پدرش دوباره re-render نمیشود و فقط زمانی re-render کامپوننت اتفاق میفتند که تغییری در props یا state آن رخ دهد این موضوع باعث شده که استفاده از pureComponent تاثیر بسیاری روی performance بگذارد
See the Pen react – pureComponent by abbas hosseini (@abizebel) on CodePen.
uncontrolled component در reactJS
همانطور که میدانید در reactJS جریان داده داخل کامپوننت قرار دارد که توسط props یا state مدیریت میشود، حال اگر مدیریت این جریان داده توسط DOM یعنی یکی از المان های ui تعیین شود به آن کامپوننت uncontrolled component میگویند
در مثال زیر مدیریت داده از طریق یک input میسر شده است بطوریکه هر آنچه داخل input تایپ کنید نتیجه آن در زیر آن نمایش داده میشود
See the Pen react – uncontrolled component by abbas hosseini (@abizebel) on CodePen.