functional components are stateless and class components are stateful. so if you want to store some state, or if you want to use lifecycle methods, we have to use classes.
in react 16.8 we got a new featuer called hooks that allow us to build functional components with all the features we have in class components.so we can use state and lifecycle featuers of class components.
one reason is that classes are a bit difficult for some people to understand, especially new programmers. if you have a good background in object oriented programming classes are second nature for you.
two reason this keyword is confusing in javascript.
the third issue is that writing class components requires a bit of boilerplate code, we have to create a class that extends react component,
در یک برنامه انگلاری مبتی بر سرویس، کامپوننت ها مسئول تعامل مستقیم با منابع خارجی از طریق سرویس هستند. منتهی Effect ها که در مجموعه ngrx با آن آشنا می شویم، راهی برای تعامل با آن سرویس ها و جداسازی آنها از مولفه ها فراهم می کند.
کاری که پکیچ Ngrx برای ما می کند مانند MessageBroker ها هستند، یک مشکل که MessageBroker چیه ؟ حالا بعدا در موردش مطلب میزنم. منتهی با Ngrx این معماری را برای بخش فرانت نیز پیاده سازی می کنیم، عجب تکنولوژی هایی دمشون گرم .....برید حالش رو ببرید.
Issues with RXJS Approach
- first
- State can be updated anywhere.
- Second
- state is (possibly) mutable
- Third
- Handling side effect(e.g. Http calls) is unclear ... things like HTTP requests
- Fourth
- Redux to the Rescue
- Angular هیچ الگوی مشخصی را برای کار با RXJS به ما ارائه نمی کند. به همین خاطر برای حفظ انسجام در پروژه های بزرگ و قابل انجام شدن کار تیمی یک الگوی مدیریت State به نام Redux مطرح می شود. اگر یک پیش زمینه ای از ReactJS داشته باشید با این الگو حتما روبرو شده اید.
- what is Redux?
- Redux is a state management pattern
- it's also a library that ....
برای ایجاد کامپوننت های داینامیک ما دو رویکرد داریم. رویکرد اول استفاده از ویژگی ngif در Angular است که بسیار پر کاربرد و توصیه می شود. اما رویکرد دوم که کمی پیچیده تر از رویکرد اول بنظر می رسد. در رویکرد دوم کامپوننت ها با استفاده از ویژگی های Angular در کد ایجاد می شود ( Component Create in code ) .
به بیان کامل تر به متن زیر می توان استناد کرد :
"Angular to be aware of this component when it need to create it Programmtically . "
در ادامه دنبال دانستن چگونه به کار گرفتن root component trees خواهم بود.
ماژول ها :
1- در Angular به تنهایی کار می کنند.
....
Lifecycle های موجود در فریم ورک Angular عبارتند از :
1- ngOnChanges
2- ngOnInit
3- ngDoCheck
4- ngAfterContentInit
5- ngAfterContentChecked
6- ngAfterViewInit
7- ngAfterViewChecked
8- ngOnDestroy
هر کامپوننت یک چرخه حیات دارد، از زمانی چرخه حیاتش شروع می شود که Angular کلاس کامپوننت را نمونه سازی می کند و View کامپوننت را به همراه ViewChild ارائه می دهد.
چرخه حیات با تشخیص تغییر ادامه می یابد،زیرا Angular بررسی می کند (Check) که چه زمانی خصوصیات Data-binding تغییر می کند و در صورت لزوم، View و Component را به روز ( Update ) می کند.
چرخه حیات زمانی پایان می یابد که Angulr ، چرخه حیات Component را از بین ببرد. و Template ارائه شده آن را از Dom حذف کند.
نکته : Directives چرخه عمر مشابهی دارند، زیرا Angular نمونه هایی را در حین اجرا ایجاد، به روز می کند و از بین می برد.