ስለ React hooks ገና ያልተማሩ የReact ገንቢ ከሆኑ አሁን ጊዜው ነው። ይህ ልጥፍ በuseEffect React Hook ውስጥ በዝርዝር ያልፋል። መንጠቆው ከስዊዘርላንድ ጦር ቢላዋ ጋር እኩል ነው። የተለያዩ ጉዳዮችን ይፈታል፣ አንድ አካል ሲሰቀል ውሂብ እንዴት ማግኘት እንደሚቻል፣ ግዛት ወይም ፕሮፖዛል ሲቀየር እንዴት ኮድ ማስኬድ እንደሚቻል፣ የሰዓት ቆጣሪዎችን ወይም ክፍተቶችን እንዴት ማዋቀር እንደሚቻል እና የመሳሰሉትን የመሳሰሉ ጉዳዮችን ይፈታል።
JSX (ምንም አይነት የጎንዮሽ ጉዳት) በማይመለስ የReact አካል ውስጥ "ማድረግ ለፈለጋችሁት ማንኛውም ነገር"useEffect" ጥቅም ላይ ይውላል። እንዲሁም በእያንዳንዱ አካል በርካታ የአጠቃቀም ተፅዕኖዎች ሊኖሩዎት ይችላሉ።
ይህ ሁሉ ኃይል በዋጋ ነው የሚመጣው፡ እንዴት እንደሚሰራ እስካልተረዱ ድረስ ግራ የሚያጋባ ሊሆን ይችላል። በዚህ ልጥፍ ውስጥ፣ የፅንሰ-ሃሳቡን ሞዴል እንድትረዱ እና በእራስዎ ኮድ ላይ እንዲተገበሩ የተለያዩ ምሳሌዎችን እንመለከታለን።
መንጠቆዎችን ምላሽ ይስጡ - ምን ለመፍታት እየሞከረ ነው?
መንጠቆዎች መጀመሪያ የተጀመሩት በReact ስሪት 16.8 ነው እና አሁን በብዙ React ፕሮጀክቶች ጥቅም ላይ ውለዋል። መንጠቆዎች በክፍሎች መካከል ያለውን የኮድ ድግግሞሽ ችግር ያሸንፋል። ክፍሎችን ሳይጠቀሙ የተጻፉ ናቸው. ይህ React ክፍሎችን መተው ነው ማለት አይደለም; መንጠቆዎች በቀላሉ አማራጭ ዘዴ ናቸው.
React የተራቀቁ ክፍሎችን ከግዛታዊ አመክንዮ ጋር በፍጥነት እንዲፈጥሩ ያስችልዎታል። ክፍሉ በReact Lifecycle ዘዴዎች ላይ ስለሚወሰን እነዚህን ክፍሎች መለየት አስቸጋሪ ነው። React Hooks የሚመጣው እዚህ ላይ ነው።
አንድን አካል ወደ ትናንሽ ተግባራት ለመከፋፈል ያስችሉዎታል. በ Lifecycle ዘዴዎች ላይ ተመስርተው ኮድን ወደ ትናንሽ ቁርጥራጮች ከመከፋፈል ይልቅ አሁን ኮድን በማቀናጀት በተግባራዊነት ወደ ትናንሽ ክፍሎች መለየት ይችላሉ።
UseEffect Hook ምንድን ነው?
መንጠቆዎች የ ES6 ክፍሎችን ሳይጽፉ ወደ ግዛት እና ሌሎች ምላሽ ሰጪ ችሎታዎች እንዲደርሱ የሚያስችልዎ ተግባራት ናቸው። React hooks API useEffect የሚባል መንጠቆ አለው። ምላሽ ሰጪ የህይወት ዑደቶችን የሚያውቁ ከሆኑ የአጠቃቀም ኢፌክት መንጠቆው ከሚከተለው ጋር ተመሳሳይ ነው። አካዳሚDidMount, አካልDDUUddate, እና compillWillUnmount የሕይወት ዑደት ዘዴዎች ተጣምረው.
እንደ React Hooks ሰነድ፣ አንዳንድ ጉዳዮችን ከES6 ክፍል አካል የሕይወት ዑደት ዘዴዎች ጋር ለመፍታት ነው የተፈጠረው።
የአገባብ
የመጀመሪያው ነጋሪ እሴት መልሶ የመደወል ተግባር ነው፣ እሱም ከእያንዳንዱ ቀረጻ በኋላ በነባሪነት ይከናወናል። ሁለተኛው ግቤት የዒላማው ሁኔታ ከተቀየረ ብቻ መንጠቆው ተመልሶ እንዲደውል የሚያስተምር የአማራጭ ጥገኛ ድርድር ነው።
መንጠቆው የእያንዳንዱን ጥገኝነት ታሪካዊ እና የአሁኑን ሁኔታ ያወዳድራል። ሁለቱ እሴቶች የማይዛመዱ ከሆነ መንጠቆው በመጀመሪያው ግቤት ውስጥ የተገለጸውን መልሶ መደወል ይጠራል። የጥገኝነት ድርድሮች የተለመደውን የመልሶ መደወያ ባህሪን ይለውጣሉ እና መንጠቆው በክፍል ወሰን ውስጥ ያሉትን ሁሉንም ሌሎች አካላት ችላ እንደሚል ዋስትና ይሰጣል።
መሰረታዊ አጠቃቀም
መልእክት ለማስቀመጥ፣ ከላይ ባለው የኮድ ናሙና ውስጥ React useStateን እየተጠቀምኩ ነው። ከዚያ በኋላ, የእኔን መልእክት ሁኔታ ተለዋዋጭ ወስጄ በስክሪኑ ላይ አትም. ነገር ግን፣ ክፍሉ ከተጫነ ከአንድ ሰከንድ በኋላ መልእክቱን ለመቀየር Effect ን መጠቀም እፈልጋለሁ።
ከReact ማዕቀፉ useEffect ካስመጣሁ በኋላ የእኔን ተጽእኖ ከአጠቃቀም ስቴት መስመር ጀርባ አስገብቻለሁ። Effect ለመጠቀም የመጀመሪያው መለኪያ ተግባር ነው። ይህ የተግባር ተቆጣጣሪ ሲተገበር እርስዎ ያቀረቡትን ማንኛውንም የጎንዮሽ ጉዳቶች ይንከባከባል። ተግባሩ ከReact አካል የህይወት ኡደት ክስተቶች አንዱ ሲከሰት የሚጠራው የመመለሻ ተግባር ነው።
እሱን ለመጠቀም መቼ?
UseEffect መንጠቆ በተለያዩ ሁኔታዎች ውስጥ ጠቃሚ ሊሆን ይችላል. የሚከተሉት በጣም ወሳኝ ናቸው.
- በቀረበው ክርክር ላይ በመመስረት ውሂብ ለማምጣት ስንፈልግ ይህን ግቤት ከደንበኛው በኩል መለወጥ እንችላለን። መለኪያው በአዲስ መረጃ ከተዘመነ በኋላ ይታወሳል::
- ከኤፒአይ መጨረሻ ነጥብ ላይ ውሂብ ሰርስሮ ማውጣት ከፈለግን እና በደንበኛው በኩል እናሳየው። የእኛ አካል ሲሰራ ለአጠቃቀም ኢፌክት መንጠቆ የተሰጠው ተግባር ወይም ተቆጣጣሪ ይከናወናል እና በክፍለ-ግዛቱ ውስጥ ያለው መረጃ ተሰርስሮ ይወጣል። እነዚህ ሁኔታዎች በተጠቃሚ በይነገጽ ክፍሎች ውስጥ ይሠራሉ።
- የእርስዎ አካል ከውጭው ዓለም በመጣ ውሂብ ላይ ሲደገፍ እና ውሂብ እንደሚመጣ ማረጋገጥ ካልቻልን ኢፌክትን መጠቀም አለብን (ምናልባት አገልጋዩ እዚያ ላይ ነው)። ችግሮችን ከመወርወር እና ሌሎች አካላት እንዳይታዩ ከመከላከል ይልቅ በአጠቃቀም ኢፌክት መንጠቆ ውስጥ ያስቀምጧቸው።
አጠቃቀም ጉዳዮች
ክፍሉ ከመጀመሪያው ሩጫ በኋላ እንደገና ከሰራ, አይሰራም.
አንድ አካል ሲሰራ ወይም እንደገና ሲሰራ ሁልጊዜም መተግበር አለበት።
በነባሪ, ፕሮግራሙ አንድ ጊዜ ብቻ ይሰራል. ከዚያ በኋላ፣ የፕሮፖዛል እሴቶቹ ከተቀየሩ ያሂዱ፡-
ላልተመሳሰሉ እንቅስቃሴዎች ሁል ጊዜ አጠቃቀም ኢፌክትን ይጠቀሙ።
useEffect ኮድ ብሎኮች ለባልንጀሮቻቸው ገንቢዎች የማይመሳሰሉ ስራዎች ግልጽ ምልክቶች ናቸው። ኢፌፌክትን ሳይጠቀሙ ያልተመሳሰለ ኮድ መፍጠር ይቻላል, ነገር ግን ይህ "React method" አይደለም, እና ሁለቱንም ውስብስብነት እና የስህተት አደጋን ይጨምራል.
ዩአይዩን ሊያቆመው የሚችል ያልተመሳሰለ ኮድ ከመጻፍ ይልቅ useEffect መጠቀም በReact ማህበረሰብ ዘንድ የታወቀ ቴክኒክ ነው፣በተለይ የReact ቡድኑ የጎንዮሽ ጉዳትን ለማስፈፀም የገነባው መንገድ ነው።
አጠቃቀሙ ሌላው ጥቅም ገንቢዎች ኮዱን በቀላሉ መገምገም እና ወዲያውኑ "ከቁጥጥር ፍሰት ውጭ" የሚሰራውን ኮድ ማግኘት ይችላሉ, ይህም ከመጀመሪያው የማሳያ ዑደት በኋላ ብቻ አስፈላጊ ይሆናል. በተጨማሪም ብሎኮች እንደገና ጥቅም ላይ ሊውሉ ወደሚችሉ እና ይበልጥ ትርጉም ያለው ብጁ መንጠቆዎችን ለማውጣት ተስማሚ ናቸው።
አንድ ምሳሌ
የኢፌክት ኮድን በመጠቀም በሴኮንድ ቁጥር ይጨምሩ።
መደምደሚያ
በእኔ እይታ የአጠቃቀምEffect Hookን መሰረታዊ የንድፍ መርሆዎችን እና ምርጥ ልምዶችን መረዳት የቀጣይ ደረጃ ምላሽ ገንቢ ለመሆን ከፈለጉ ለመማር ወሳኝ ችሎታ ነው።
ለማጠቃለል፣ የአጠቃቀምEffect Hook የግድ አስፈላጊ፣ ሙሉ አመክንዮ ሊፈጥር የሚችል ተግባርን ይቀበላል። ሁለተኛው መመዘኛ የሆነው የጥገኝነት ድርድር በአፈፃፀሙ ላይ ተጽእኖ ለመፍጠር ሊያገለግል ይችላል። ከእሱ ጋር በሚገናኙበት ጊዜ የመመለሻ ተግባሩን በመጠቀም የጽዳት ኮድ መጻፍም አስፈላጊ ነው.
ጽሑፉ ጠቃሚ ከሆነ በአስተያየቶቹ ውስጥ ያሳውቁን።
መልስ ይስጡ