تفاوت کاموننت های pure ، stateless ، statefull و uncontrolled در react چیست

تفاوت کاموننت های pure ، stateless ، statefull و uncontrolled در react چیست نوشته شده در   react 20 اکتبر , 2018 توسط  عباس حسینی

زمانی که با 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.