നിങ്ങൾ റിയാക്റ്റ് ഹുക്കിനെക്കുറിച്ച് ഇതുവരെ പഠിച്ചിട്ടില്ലാത്ത ഒരു റിയാക്റ്റ് ഡെവലപ്പറാണെങ്കിൽ, ഇപ്പോൾ നിമിഷമാണ്. ഈ പോസ്റ്റ് വിശദമായി useEffect React Hook വഴി പോകും. സ്വിസ് ആർമി കത്തിക്ക് തുല്യമായ കൊളുത്താണിത്. ഒരു ഘടകം മൗണ്ട് ചെയ്യുമ്പോൾ ഡാറ്റ എങ്ങനെ നേടാം, ഒരു സ്റ്റേറ്റോ പ്രോപ്പോ മാറുമ്പോൾ കോഡ് എങ്ങനെ റൺ ചെയ്യാം, ടൈമറുകളോ ഇടവേളകളോ എങ്ങനെ സജ്ജീകരിക്കാം, എന്നിങ്ങനെയുള്ള വിവിധ പ്രശ്നങ്ങൾ ഇത് പരിഹരിക്കുന്നു.
JSX (ഏത് തരത്തിലുള്ള പാർശ്വഫലങ്ങളും) തിരികെ നൽകാത്ത ഒരു React ഘടകത്തിൽ നിങ്ങൾ "ചെയ്യാൻ" ആഗ്രഹിക്കുന്ന എന്തിനും ഒരു useEffect ഉപയോഗിക്കുന്നു. ഓരോ ഘടകത്തിനും നിങ്ങൾക്ക് നിരവധി ഉപയോഗഫലങ്ങൾ ഉണ്ടായിരിക്കാം.
ഈ എല്ലാ ശക്തിയും ചിലവിലാണ് വരുന്നത്: ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് നിങ്ങൾ മനസ്സിലാക്കുന്നില്ലെങ്കിൽ, അത് ആശയക്കുഴപ്പത്തിലാക്കിയേക്കാം. ഈ പോസ്റ്റിൽ, ഞങ്ങൾ വിവിധ ഉദാഹരണങ്ങൾ നോക്കും, അതുവഴി നിങ്ങൾക്ക് ആശയപരമായ മാതൃക മനസ്സിലാക്കാനും നിങ്ങളുടെ സ്വന്തം കോഡിൽ പ്രയോഗിക്കാനും കഴിയും.
ഹുക്കുകൾ പ്രതികരിക്കുക - ഇത് എന്താണ് പരിഹരിക്കാൻ ശ്രമിക്കുന്നത്?
റിയാക്റ്റ് പതിപ്പ് 16.8 ലാണ് ഹുക്കുകൾ ആദ്യമായി അവതരിപ്പിച്ചത്, ഇപ്പോൾ പല റിയാക്റ്റ് പ്രോജക്റ്റുകളും ഇത് ഉപയോഗിക്കുന്നു. ഘടകങ്ങൾ തമ്മിലുള്ള കോഡ് ആവർത്തനത്തിന്റെ പ്രശ്നം ഹുക്കുകൾ മറികടക്കുന്നു. ക്ലാസുകൾ ഉപയോഗിക്കാതെയാണ് അവ എഴുതിയിരിക്കുന്നത്. റിയാക്റ്റ് ക്ലാസുകൾ ഉപേക്ഷിക്കുകയാണെന്ന് ഇത് അർത്ഥമാക്കുന്നില്ല; കൊളുത്തുകൾ ഒരു ബദൽ രീതിയാണ്.
സ്റ്റേറ്റ്ഫുൾ ലോജിക് ഉപയോഗിച്ച് സങ്കീർണ്ണമായ ഘടകങ്ങൾ വേഗത്തിൽ സൃഷ്ടിക്കാൻ റിയാക്റ്റ് നിങ്ങളെ അനുവദിക്കുന്നു. ക്ലാസ് റിയാക്റ്റ് ലൈഫ് സൈക്കിൾ രീതികളെ ആശ്രയിക്കുന്നതിനാൽ ഈ ഘടകങ്ങളെ വേർതിരിക്കുന്നത് ബുദ്ധിമുട്ടാണ്. ഇവിടെയാണ് റിയാക്ട് ഹുക്കുകൾ വരുന്നത്.
ഒരു ഘടകത്തെ ചെറിയ ഫംഗ്ഷനുകളായി വിഭജിക്കാൻ അവ നിങ്ങളെ അനുവദിക്കുന്നു. ലൈഫ് സൈക്കിൾ രീതികളെ അടിസ്ഥാനമാക്കി കോഡ് ചെറിയ കഷണങ്ങളായി വിഭജിക്കുന്നതിനുപകരം, നിങ്ങൾക്ക് ഇപ്പോൾ പ്രവർത്തനക്ഷമതയെ ആശ്രയിച്ച് ചെറിയ യൂണിറ്റുകളായി കോഡ് ക്രമീകരിക്കുകയും വേർതിരിക്കുകയും ചെയ്യാം.
എന്താണ് യൂസ് ഇഫക്റ്റ് ഹുക്ക്?
ES6 ക്ലാസുകൾ എഴുതാതെ തന്നെ അവസ്ഥയും മറ്റ് പ്രതികരണ ശേഷികളും ആക്സസ് ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്ന പ്രവർത്തനങ്ങളാണ് ഹുക്കുകൾ. react hooks API-ന് useEffect എന്നൊരു ഹുക്ക് ഉണ്ട്. നിങ്ങൾക്ക് പ്രതികരണ ജീവിത ചക്രങ്ങൾ പരിചയമുണ്ടെങ്കിൽ, useEffect ഹുക്ക് സമാനമാണ് ഘടകംDidMount, ഘടകംDidUpdate, ഒപ്പം ഘടകംWillUnmount ലൈഫ് സൈക്കിൾ രീതികൾ സംയോജിപ്പിച്ചു.
React Hooks ഡോക്യുമെന്റേഷൻ അനുസരിച്ച്, ES6 ക്ലാസ് കോംപോണന്റ് ലൈഫ് സൈക്കിൾ രീതികളിലെ ചില പ്രശ്നങ്ങൾ പരിഹരിക്കുന്നതിനാണ് ഇത് സൃഷ്ടിച്ചത്.
പദവിന്യാസം
ആദ്യത്തെ ആർഗ്യുമെന്റ് ഒരു കോൾബാക്ക് ഫംഗ്ഷനാണ്, അത് ഓരോ റെൻഡറിനും ശേഷവും ഡിഫോൾട്ടായി എക്സിക്യൂട്ട് ചെയ്യപ്പെടും. രണ്ടാമത്തെ പാരാമീറ്റർ ഒരു ഓപ്ഷണൽ ഡിപൻഡൻസി അറേയാണ്, അത് ടാർഗെറ്റ് സ്റ്റേറ്റ് മാറുകയാണെങ്കിൽ മാത്രം കോൾബാക്ക് ചെയ്യാൻ ഹുക്കിനോട് നിർദ്ദേശിക്കുന്നു.
ഹുക്ക് ഓരോ ആശ്രിതത്വത്തിന്റെയും ചരിത്രപരവും നിലവിലുള്ളതുമായ അവസ്ഥകളെ താരതമ്യം ചെയ്യുന്നു. രണ്ട് മൂല്യങ്ങളും പൊരുത്തപ്പെടുന്നില്ലെങ്കിൽ, ആദ്യ പാരാമീറ്ററിൽ വ്യക്തമാക്കിയ കോൾബാക്ക് ഹുക്ക് ആവശ്യപ്പെടുന്നു. ഡിപൻഡൻസി അറേകൾ സാധാരണ കോൾബാക്ക് സ്വഭാവം മാറ്റുകയും ഘടക സ്കോപ്പിലെ മറ്റെല്ലാ ഘടകങ്ങളെയും ഹുക്ക് അവഗണിക്കുന്നുവെന്ന് ഉറപ്പുനൽകുകയും ചെയ്യുന്നു.
അടിസ്ഥാന ഉപയോഗം
ഒരു സന്ദേശം സംരക്ഷിക്കാൻ, മുകളിലുള്ള കോഡ് സാമ്പിളിൽ ഞാൻ React useState ഉപയോഗിക്കുന്നു. അതിനുശേഷം, ഞാൻ എന്റെ മെസേജ് സ്റ്റേറ്റ് വേരിയബിൾ എടുത്ത് സ്ക്രീനിൽ പ്രിന്റ് ചെയ്യുന്നു. എന്നിരുന്നാലും, ഘടകം മൗണ്ടുചെയ്തതിന് ശേഷം ഒരു നിമിഷം സന്ദേശം പരിഷ്ക്കരിക്കാൻ ഞാൻ ഇപ്പോൾ Effect ഉപയോഗിക്കാൻ ആഗ്രഹിക്കുന്നു.
റിയാക്റ്റ് ഫ്രെയിംവർക്കിൽ നിന്ന് യൂസ് ഇഫക്റ്റ് ഇമ്പോർട്ടുചെയ്തതിന് ശേഷം ഞാൻ യൂസ്സ്റ്റേറ്റ് ലൈനിന് പിന്നിൽ എന്റെ ഇഫക്റ്റ് ചേർത്തു. Effect ഉപയോഗിക്കുന്നതിനുള്ള ആദ്യ പാരാമീറ്റർ ഒരു ഫംഗ്ഷനാണ്. ഈ ഫംഗ്ഷൻ ഹാൻഡ്ലർ എക്സിക്യൂട്ട് ചെയ്യുമ്പോൾ, നിങ്ങൾ നൽകുന്ന ഏത് പാർശ്വഫലങ്ങളും അത് ശ്രദ്ധിക്കും. റിയാക്റ്റ് ഘടകം ലൈഫ് സൈക്കിൾ ഇവന്റുകളിലൊന്ന് സംഭവിക്കുമ്പോൾ വിളിക്കപ്പെടുന്ന ഒരു കോൾബാക്ക് ഫംഗ്ഷനാണ് ഫംഗ്ഷൻ.
എപ്പോഴാണ് അത് ഉപയോഗിക്കേണ്ടത്?
യൂസ് ഇഫക്റ്റ് ഹുക്ക് വിവിധ സാഹചര്യങ്ങളിൽ ഉപയോഗപ്രദമായേക്കാം. ഇനിപ്പറയുന്നവ ഏറ്റവും നിർണായകമാണ്:
- നൽകിയിട്ടുള്ള ആർഗ്യുമെന്റിനെ ആശ്രയിച്ച് ഞങ്ങൾക്ക് ഡാറ്റ ലഭിക്കാൻ താൽപ്പര്യപ്പെടുമ്പോൾ ക്ലയന്റ് ഭാഗത്ത് നിന്ന് ഈ പരാമീറ്റർ മാറ്റാനാകും. പുതിയ ഡാറ്റ ഉപയോഗിച്ച് പാരാമീറ്റർ അപ്ഡേറ്റ് ചെയ്തതിന് ശേഷം ഇത് തിരിച്ചുവിളിക്കും.
- ഒരു API എൻഡ്പോയിന്റിൽ നിന്ന് ഡാറ്റ വീണ്ടെടുക്കാനും ക്ലയന്റ് സൈഡിൽ പ്രദർശിപ്പിക്കാനും ഞങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ. ഞങ്ങളുടെ ഘടകം റെൻഡർ ചെയ്യുമ്പോൾ, യൂസ് ഇഫക്റ്റ് ഹുക്കിന് നൽകിയിരിക്കുന്ന ഫംഗ്ഷൻ അല്ലെങ്കിൽ ഹാൻഡ്ലർ എക്സിക്യൂട്ട് ചെയ്യപ്പെടുകയും ഘടക സ്റ്റേറ്റുകളിലെ ഡാറ്റ വീണ്ടെടുക്കുകയും ചെയ്യുന്നു. ഈ സ്റ്റാറ്റസുകൾ പിന്നീട് ഉപയോക്തൃ ഇന്റർഫേസ് ഘടകങ്ങളിൽ പ്രവർത്തിക്കുന്നു.
- നിങ്ങളുടെ ഘടകം പുറം ലോകത്തിൽ നിന്നുള്ള ഡാറ്റയെ ആശ്രയിക്കുകയും ഡാറ്റ എത്തുമെന്ന് ഞങ്ങൾക്ക് ഉറപ്പാക്കാൻ കഴിയാതിരിക്കുകയും ചെയ്യുമ്പോൾ, ഞങ്ങൾ Effect ഉപയോഗിക്കണം (ഒരുപക്ഷേ സെർവർ അവിടെ തകരാറിലായിരിക്കാം). പ്രശ്നങ്ങൾ സൃഷ്ടിക്കുകയും മറ്റ് ഘടകങ്ങൾ പ്രദർശിപ്പിക്കുന്നത് തടയുകയും ചെയ്യുന്നതിനുപകരം, അവയെ useEffect ഹുക്കിൽ സ്ഥാപിക്കുക.
കേസുകൾ ഉപയോഗിക്കുക
ആദ്യ ഓട്ടത്തിന് ശേഷം ഘടകം വീണ്ടും റെൻഡർ ചെയ്യുകയാണെങ്കിൽ, അത് എക്സിക്യൂട്ട് ചെയ്യില്ല.
ഒരു ഘടകം റെൻഡർ ചെയ്യുമ്പോഴോ വീണ്ടും റെൻഡർ ചെയ്യുമ്പോഴോ, അത് എല്ലായ്പ്പോഴും എക്സിക്യൂട്ട് ചെയ്യണം.
സ്ഥിരസ്ഥിതിയായി, പ്രോഗ്രാം ഒരു തവണ മാത്രമേ പ്രവർത്തിക്കൂ. അതിനുശേഷം, പ്രോപ്പ് മൂല്യങ്ങൾ മാറുകയാണെങ്കിൽ, പ്രവർത്തിപ്പിക്കുക:
അസമന്വിത പ്രവർത്തനങ്ങൾക്ക്, എപ്പോഴും useEffect ഉപയോഗിക്കുക.
നിങ്ങളുടെ സഹ ഡെവലപ്പർമാർക്കുള്ള അസിൻക്രണസ് ജോലികളുടെ വ്യക്തമായ അടയാളങ്ങളാണ് useEffect കോഡ് ബ്ലോക്കുകൾ. യൂസ് ഇഫക്റ്റ് ഉപയോഗിക്കാതെ തന്നെ അസിൻക്രണസ് കോഡ് സൃഷ്ടിക്കാൻ സാധിക്കും, എന്നാൽ ഇത് "റിയാക്റ്റ് മെത്തേഡ്" അല്ല, ഇത് സങ്കീർണ്ണതയും തെറ്റുകളുടെ അപകടസാധ്യതയും വർദ്ധിപ്പിക്കുന്നു.
UI നിർത്താൻ സാധ്യതയുള്ള അസിൻക്രണസ് കോഡ് എഴുതുന്നതിനുപകരം useEffect ഉപയോഗിക്കുന്നത് റിയാക്റ്റ് കമ്മ്യൂണിറ്റിയിലെ അറിയപ്പെടുന്ന ഒരു സാങ്കേതികതയാണ്, പ്രത്യേകിച്ച് ഒരു സൈഡ് ഇഫക്റ്റ് നടത്താൻ റിയാക്റ്റ് ടീം ഇത് നിർമ്മിച്ച രീതി.
ഇത് ഉപയോഗിക്കുന്നതിന്റെ മറ്റൊരു നേട്ടം, ഡെവലപ്പർമാർക്ക് കോഡ് അവലോകനം ചെയ്യാനും "നിയന്ത്രണ പ്രവാഹത്തിന് പുറത്ത്" റൺ ചെയ്യുന്ന കോഡ് ഉടനടി കണ്ടെത്താനും കഴിയും എന്നതാണ്, ഇത് ആദ്യത്തെ റെൻഡർ സൈക്കിളിന് ശേഷം മാത്രമേ പ്രധാനമാകൂ. കൂടാതെ, ബ്ലോക്കുകൾ പുനരുപയോഗിക്കാവുന്നതും കൂടുതൽ സെമാന്റിക് ഇഷ്ടാനുസൃത ഹുക്കുകളിലേക്കും വേർതിരിച്ചെടുക്കാൻ അനുയോജ്യമാണ്.
ഒരു ഉദാഹരണം
useEffect കോഡ് ഉപയോഗിച്ച്, സെക്കൻഡിൽ ഒരു നമ്പർ വർദ്ധിപ്പിക്കുക.
തീരുമാനം
യൂസ് ഇഫക്റ്റ് ഹുക്കിന്റെ അടിസ്ഥാന ഡിസൈൻ തത്വങ്ങളും മികച്ച രീതികളും മനസിലാക്കുന്നത്, എന്റെ കാഴ്ചപ്പാടിൽ, നിങ്ങൾക്ക് അടുത്ത ലെവൽ റിയാക്റ്റ് ഡെവലപ്പർ ആകണമെങ്കിൽ പഠിക്കാനുള്ള ഒരു നിർണായക വൈദഗ്ധ്യമാണ്.
ചുരുക്കത്തിൽ, യൂസ് ഇഫക്റ്റ് ഹുക്ക് ഒരു ഫംഗ്ഷൻ സ്വീകരിക്കുന്നു, അത് നിർബന്ധിതവും പൂർണ്ണമായ യുക്തിയും ഉൾക്കൊള്ളുന്നു. നിർവ്വഹണത്തെ സ്വാധീനിക്കാൻ രണ്ടാമത്തെ പാരാമീറ്ററായ ഡിപൻഡൻസ് അറേ ഉപയോഗിക്കാം. ഇത് കൈകാര്യം ചെയ്യുമ്പോൾ, റിട്ടേൺ ഫംഗ്ഷൻ ഉപയോഗിച്ച് ക്ലീനിംഗ് കോഡ് എഴുതേണ്ടതും ആവശ്യമാണ്.
ലേഖനം സഹായകമായിരുന്നെങ്കിൽ അഭിപ്രായങ്ങളിൽ ഞങ്ങളെ അറിയിക്കുക.
നിങ്ങളുടെ അഭിപ്രായങ്ങൾ രേഖപ്പെടുത്തുക