Angular Signals ਅਤੇ Effects
Angular ਨੇ ਆਪਣੀ reactivity ਨੂੰ ਸੰਭਾਲਣ ਦੇ ਤਰੀਕੇ ਨੂੰ ਬਦਲ ਦਿੱਤਾ ਹੈ। ਹੁਣ ਹਰ ਛੋਟੀ ਤਬਦੀਲੀ ਦਾ ਪਤਾ ਲਗਾਉਣ ਲਈ ਤੁਹਾਨੂੰ Zone.js ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। Signals Angular ਨੂੰ UI ਦੇ ਸਿਰਫ਼ ਉਹਨਾਂ ਖਾਸ ਹਿੱਸਿਆਂ ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ ਜੋ ਬਦਲਦੇ ਹਨ। ਇਹ ਤੁਹਾਡੀਆਂ ਐਪਸ ਨੂੰ ਤੇਜ਼ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ zoneless mode ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
Signals ਕੀ ਹਨ?
Signal ਇੱਕ reactive value ਲਈ ਇੱਕ ਕੰਟੇਨਰ ਹੈ। ਜਦੋਂ value ਬਦਲਦੀ ਹੈ, ਤਾਂ Angular ਨੂੰ ਪਤਾ ਹੁੰਦਾ ਹੈ ਕਿ template ਦੇ ਕਿਹੜੇ ਹਿੱਸਿਆਂ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ ਹੈ।
signal(): ਇੱਕ ਨਵਾਂ signal ਬਣਾਉਂਦਾ ਹੈ। value ਨੂੰ ਬਦਲਣ ਲਈ.set()ਦੀ ਵਰਤੋਂ ਕਰੋ ਜਾਂ ਮੌਜੂਦਾ value ਦੇ ਅਧਾਰ 'ਤੇ value ਨੂੰ ਬਦਲਣ ਲਈ.update()ਦੀ ਵਰਤੋਂ ਕਰੋ।computed(): ਇੱਕ read-only signal ਬਣਾਉਂਦਾ ਹੈ। ਇਹ ਆਪਣੀ value ਹੋਰ signals ਤੋਂ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। Angular ਇਸਦੀ ਗਣਨਾ ਉਦੋਂ ਹੀ ਕਰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਪੜ੍ਹਦੇ ਹੋ ਅਤੇ ਨਤੀਜੇ ਨੂੰ cache ਕਰ ਲੈਂਦਾ ਹੈ।effect(): ਜਦੋਂ ਕੋਈ signal ਬਦਲਦਾ ਹੈ ਤਾਂ ਕੋਡ ਚਲਾਉਂਦਾ ਹੈ। ਇਸਦੀ ਵਰਤੋਂ logging ਜਾਂ manual DOM ਤਬਦੀਲੀਆਂ ਵਰਗੇ side effects ਲਈ ਕਰੋ।
Signals ਬਨਾਮ RxJS ਦੀ ਵਰਤੋਂ ਕਦੋਂ ਕਰਨੀ ਹੈ
ਤੁਹਾਨੂੰ ਕਿਸੇ ਇੱਕ ਨੂੰ ਚੁਣਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਤੁਹਾਨੂੰ ਵੱਖ-ਵੱਖ ਕੰਮਾਂ ਲਈ ਦੋਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।
Signals ਦੀ ਵਰਤੋਂ ਕਰੋ:
- UI state ਨੂੰ ਰੱਖਣ ਲਈ।
- Template rendering ਨੂੰ ਚਲਾਉਣ ਲਈ।
@Input()ਅਤੇ@Output()ਨੂੰ ਬਦਲਣ ਲਈ।- Zoneless ਐਪਸ ਵਿੱਚ ਕੰਮ ਕਰਨ ਲਈ।
RxJS ਦੀ ਵਰਤੋਂ ਕਰੋ:
- HTTP ਜਾਂ WebSockets ਵਰਗੇ async streams ਨੂੰ ਸੰਭਾਲਣ ਲਈ।
- Debouncing ਜਾਂ streams ਨੂੰ ਬਦਲਣ ਵਰਗੀ ਗੁੰਝਲਦਾਰ logic ਲਈ।
- ਕਈ event sequences ਨੂੰ ਜੋੜਨ ਲਈ।
ਤੁਸੀਂ rxjs-interop ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉਹਨਾਂ ਨੂੰ ਜੋੜ ਸਕਦੇ ਹੋ:
toSignal(): ਇੱਕ Observable ਨੂੰ Signal ਵਿੱਚ ਬਦਲਦਾ ਹੈ।toObservable(): ਇੱਕ Signal ਨੂੰ Observable ਵਿੱਚ ਬਦਲਦਾ ਹੈ।
ਨਵੇਂ Decorator-Free APIs
Angular 17+ ਨੇ decorators ਦੀ ਵਰਤੋਂ ਕੀਤੇ ਬਿਨਾਂ data flow ਨੂੰ ਸੰਭਾਲਣ ਦੇ ਨਵੇਂ ਤਰੀਕੇ ਪੇਸ਼ ਕੀਤੇ ਹਨ।
input(): Parent ਤੋਂ ਆਉਣ ਵਾਲੇ data ਲਈ ਇੱਕ read-only signal।model(): Two-way binding ਲਈ ਇੱਕ writable signal। ਇਹ ਪੁਰਾਣੇ@Input()ਅਤੇ@Output()pattern ਦੀ ਜਗ੍ਹਾ ਲੈਂਦਾ ਹੈ।output(): Child ਤੋਂ Parent ਨੂੰ events ਭੇਜਣ ਦਾ ਇੱਕ ਤਰੀਕਾ। ਇਹ signal ਨਹੀਂ ਹੈ, ਪਰ ਇਹ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਸਰਲ ਬਣਾਉਂਦਾ ਹੈ।
ਇਹ React ਨਾਲੋਂ ਕਿਉਂ ਬਿਹਤਰ ਹੈ
ਜੇਕਰ ਤੁਸੀਂ React ਜਾਣਦੇ ਹੋ, ਤਾਂ ਸੰਕਲਪ ਸਮਾਨ ਹਨ ਪਰ ਲਾਗੂ ਕਰਨ ਦਾ ਤਰੀਕਾ ਵੱਖਰਾ ਹੈ।
- Automatic Tracking: React ਵਿੱਚ, ਤੁਹਾਨੂੰ ਇੱਕ array ਵਿੱਚ dependencies ਦੀ ਸੂਚੀ ਦੇਣੀ ਪੈਂਦੀ ਹੈ। Angular ਵਿੱਚ, ਸਿਸਟਮ ਆਪਣੇ ਆਪ ਟ੍ਰੈਕ ਕਰਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਕਿਹੜੇ signals ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ। ਤੁਸੀਂ ਕੋਈ dependency ਭੁੱਲ ਨਹੀਂ ਸਕਦੇ।
- Precision Updates: React ਅਕਸਰ ਪੂਰੇ components ਨੂੰ re-render ਕਰਦਾ ਹੈ। Angular signals ਸਿਰਫ਼ ਉਹਨਾਂ ਖਾਸ DOM nodes ਨੂੰ ਅਪਡੇਟ ਕਰਦੇ ਹਨ ਜੋ value 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ।
- No Stale Closures: Signals ਜਦੋਂ ਵੀ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਕਾਲ ਕਰਦੇ ਹੋ, ਹਮੇਸ਼ਾ ਮੌਜੂਦਾ value ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
Source: https://dev.to/atilla_baspinar_c5c68ec63/angular-signals-and-effects-35mn