Angular Signals અને Effects
Angular એ તેની રિએક્ટિવિટી (reactivity) હેન્ડલ કરવાની રીત બદલી છે. હવે દરેક નાની ફેરફારને શોધવા માટે તમારે Zone.js ની જરૂર નથી. Signals Angular ને UI ના ફક્ત તે ચોક્કસ ભાગોને અપડેટ કરવાની મંજૂરી આપે છે જે બદલાય છે. આ તમારા એપ્સને ઝડપી બનાવે છે અને zoneless mode ને સક્ષમ કરે છે.
Signals શું છે?
Signal એ રિએક્ટિવ વેલ્યુ (reactive value) માટેનું એક કન્ટેનર છે. જ્યારે વેલ્યુ બદલાય છે, ત્યારે Angular ને ચોક્કસ ખબર હોય છે કે ટેમ્પલેટના કયા ભાગોને અપડેટ કરવાના છે.
signal(): નવું signal બનાવે છે. વેલ્યુ બદલવા માટે.set()નો ઉપયોગ કરો અથવા વર્તમાન વેલ્યુના આધારે વેલ્યુ બદલવા માટે.update()નો ઉપયોગ કરો.computed(): રીડ-ઓન્લી (read-only) signal બનાવે છે. તે અન્ય signals માંથી તેની વેલ્યુ મેળવે છે. Angular આને ફક્ત ત્યારે જ ગણતરી કરે છે જ્યારે તમે તેને વાંચો છો અને પરિણામને કેશ (cache) કરે છે.effect(): જ્યારે signal બદલાય ત્યારે કોડ રન કરે છે. આનો ઉપયોગ લોગિંગ અથવા મેન્યુઅલ DOM ફેરફારો જેવા સાઇડ ઇફેક્ટ્સ (side effects) માટે કરો.
Signals વિરુદ્ધ RxJS નો ઉપયોગ ક્યારે કરવો
તમારે તેમાંથી કોઈ એક પસંદ કરવાની જરૂર નથી. તમારે વિવિધ કાર્યો માટે બંનેનો ઉપયોગ કરવો જોઈએ.
Signals નો ઉપયોગ કરો:
- UI સ્ટેટ (state) રાખવા માટે.
- ટેમ્પલેટ રેન્ડરિંગ (rendering) ચલાવવા માટે.
@Input()અને@Output()ને બદલવા માટે.- zoneless એપ્સમાં કામ કરવા માટે.
RxJS નો ઉપયોગ કરો:
- HTTP અથવા WebSockets જેવા async streams હેન્ડલ કરવા માટે.
- debouncing અથવા streams સ્વિચ કરવા જેવા જટિલ લોજિક માટે.
- મલ્ટીપલ ઇવેન્ટ સિક્વન્સને જોડવા માટે.
તમે rxjs-interop નો ઉપયોગ કરીને તેમને જોડી શકો છો:
toSignal(): Observable ને Signal માં રૂપાંતરિત કરે છે.toObservable(): Signal ને Observable માં રૂપાંતરિત કરે છે.
નવા Decorator-Free APIs
Angular 17+ એ ડેકોરેટર્સનો ઉપયોગ કર્યા વિના ડેટા ફ્લો હેન્ડલ કરવાની નવી રીતો રજૂ કરી છે.
input(): પેરેન્ટ (parent) માંથી આવતા ડેટા માટેનું રીડ-ઓન્લી signal.model(): ટુ-વે બાઈન્ડિંગ (two-way binding) માટેનું વ્રાઇટેબલ (writable) signal. તે જૂના@Input()અને@Output()પેટર્નને રિપ્લેસ કરે છે.output(): ચાઇલ્ડ (child) થી પેરેન્ટ (parent) માં ઇવેન્ટ્સ મોકલવાની એક રીત. તે signal નથી, પરંતુ તે તમારા કોડને સરળ બનાવે છે.
આ React કરતા કેમ વધુ સારું છે
જો તમે React જાણતા હોવ, તો ખ્યાલો સમાન છે પરંતુ અમલીકરણ (execution) અલગ છે.
- Automatic Tracking: React માં, તમારે એરે (array) માં ડિપેન્ડન્સીઝ (dependencies) ની યાદી આપવી પડે છે. Angular માં, સિસ્ટમ તમે કયા signals નો ઉપયોગ કરો છો તેનું આપમેળે ટ્રેકિંગ કરે છે. તમે ડિપેન્ડન્સી ભૂલી શકતા નથી.
- Precision Updates: React ઘણીવાર આખા કમ્પોનન્ટ્સને ફરીથી રેન્ડર (re-render) કરે છે. Angular signals ફક્ત તે ચોક્કસ DOM નોડ્સને અપડેટ કરે છે જે તે વેલ્યુ પર આધારિત હોય છે.
- No Stale Closures: જ્યારે તમે signals ને કોલ કરો છો ત્યારે તે હંમેશા વર્તમાન વેલ્યુ પ્રદાન કરે છે.
Source: https://dev.to/atilla_baspinar_c5c68ec63/angular-signals-and-effects-35mn