“రియాక్ట్‌లో, ప్రతిదీ ఒక భాగం”
మీకు రియాక్ట్ గురించి తెలిసి ఉంటే, మీరు ఈ పదబంధాన్ని చాలాసార్లు విన్నారు లేదా చదివి ఉండాలి. కానీ దాని అర్థం ఏమిటి మరియు ఎలా ఉపయోగించబడుతుందో మీకు తెలుసా? మీరు లేకపోతే, రియాక్ట్ భాగాలు మరియు జీవితచక్రంలోని వివిధ దశల గురించి తెలుసుకోవడానికి ఈ బ్లాగును చదవండి. మీరు పూర్తి చేసే సమయానికి నేను ఖచ్చితంగా ఉన్నాను ఈ బ్లాగును చదవడం వల్ల రియాక్ట్ భాగాలు మరియు దాని చుట్టూ ఉన్న భావనల గురించి మీకు పూర్తి అవగాహన ఉంటుంది. కొనసాగడానికి ముందు, నేను చర్చించబోయే అంశాలను శీఘ్రంగా పరిశీలించండి:
జావాలో ఒక సంబంధం
- రియాక్ట్ భాగాలు అంటే ఏమిటి?
- రియాక్ట్ భాగాలు యొక్క ప్రయోజనాలు
- ఆధారాలు
- రాష్ట్రాలు
- స్టేట్స్ వర్సెస్ ప్రాప్స్
- కాంపోనెంట్ లైఫ్‌సైకిల్‌ను రియాక్ట్ చేయండి
రియాక్ట్ భాగాలు అంటే ఏమిటి?
ఇంతకు ముందు డెవలపర్లు సాధారణ సింగిల్ పేజ్ అప్లికేషన్‌ను అభివృద్ధి చేయడానికి 1000 లైన్ల కోడ్‌ను వ్రాయవలసి వచ్చింది. ఆ అనువర్తనాలు చాలావరకు సాంప్రదాయ DOM నిర్మాణాన్ని అనుసరించాయి మరియు వాటిలో మార్పులు చేయడం చాలా సవాలుగా ఉంది మరియు డెవలపర్‌లకు శ్రమతో కూడుకున్న పని.మార్పు కోసం అవసరమైన మూలకం కోసం వారు మానవీయంగా శోధించి, తదనుగుణంగా నవీకరించవలసి ఉంటుంది. ఒక చిన్న పొరపాటు కూడా అప్లికేషన్ వైఫల్యానికి దారి తీస్తుంది. అంతేకాకుండా, DOM ను నవీకరించడం చాలా ఖరీదైనది. అందువలన, భాగం-ఆధారిత విధానం ప్రవేశపెట్టబడింది. ఈ విధానంలో, మొత్తం అనువర్తనం తార్కిక భాగాలుగా విభజించబడింది, వీటిని భాగాలు అంటారు. ఈ విధానాన్ని ఎంచుకున్న ఫ్రేమ్‌వర్క్‌లలో రియాక్ట్ ఒకటి.మీరు వెబ్ అభివృద్ధిలో మీ వృత్తిని నిర్మించాలని యోచిస్తున్నట్లయితే, ప్రారంభ ప్రారంభం మీకు చాలా అవకాశాలను తెరుస్తుంది.
ఈ భాగాలు ఏమిటో ఇప్పుడు అర్థం చేసుకుందాం.
రియాక్ట్ భాగాలు వినియోగదారు ఇంటర్‌ఫేస్ యొక్క బిల్డింగ్ బ్లాక్‌లుగా పరిగణించబడతాయి. ఈ భాగాలు ప్రతి ఒక్కటి ఒకే స్థలంలో ఉన్నాయి, కానీ ఒకదానికొకటి స్వతంత్రంగా అమలు చేస్తాయి. రియాక్ట్ భాగాలు వాటి స్వంత నిర్మాణం, పద్ధతులు మరియు API లను కలిగి ఉంటాయి. అవి పునర్వినియోగపరచదగినవి మరియు అవసరానికి అనుగుణంగా ఇంటర్‌ఫేస్‌లలోకి చొప్పించబడతాయి. మంచి అవగాహన కలిగి ఉండటానికి, మొత్తం UI ని చెట్టుగా పరిగణించండి.ఇక్కడ ప్రారంభ భాగం మూలంగా మారుతుంది మరియు ప్రతి స్వతంత్ర ముక్కలు శాఖలుగా మారుతాయి, ఇవి మరింత ఉప శాఖలుగా విభజించబడ్డాయి.
ఇది మా UI ని క్రమబద్ధంగా ఉంచుతుంది మరియు డేటా మరియు రాష్ట్ర మార్పులను తార్కికంగా రూట్ నుండి శాఖలకు మరియు తరువాత ఉప శాఖలకు ప్రవహిస్తుంది. భాగాలు క్లయింట్ వైపు నుండి నేరుగా సర్వర్‌కు కాల్‌లు చేస్తాయి, ఇది పేజీని రిఫ్రెష్ చేయకుండా DOM డైనమిక్‌గా నవీకరించడానికి అనుమతిస్తుంది. ఎందుకంటే రియాక్ట్ భాగాలు అజాక్స్ అభ్యర్థనల భావనపై నిర్మించబడ్డాయి. ప్రతి భాగం దాని స్వంత ఇంటర్‌ఫేస్‌ను కలిగి ఉంది, అది సర్వర్‌కు కాల్‌లు చేయగలదు మరియు వాటిని నవీకరించగలదు. ఈ భాగాలు ఒకదానికొకటి స్వతంత్రంగా ఉన్నందున, ప్రతి ఒక్కటి ఇతరులను లేదా మొత్తం UI ని ప్రభావితం చేయకుండా రిఫ్రెష్ చేయవచ్చు.
మేము ఉపయోగిస్తాము React.createClass () ఒక భాగాన్ని సృష్టించే పద్ధతి. ఈ పద్ధతి రియాక్ట్ భాగాన్ని నిర్వచించే ఆబ్జెక్ట్ ఆర్గ్యుమెంట్‌ను తప్పక పంపాలి. ప్రతి భాగం ఖచ్చితంగా ఒకటి కలిగి ఉండాలి రెండర్ () పద్ధతి. ఇది జావాస్క్రిప్ట్, JSX లో HTML ను అన్వయించడానికి బాధ్యత వహించే ఒక భాగం యొక్క అతి ముఖ్యమైన ఆస్తి. ఇది రెండర్ () భాగం యొక్క HTML ప్రాతినిధ్యాన్ని DOM నోడ్‌గా తిరిగి ఇస్తుంది. అందువల్ల, అన్ని HTML ట్యాగ్‌లు తప్పనిసరిగా లోపల ఉన్న ట్యాగ్‌లో ఉంచాలి రెండర్ () .
ఒక భాగాన్ని సృష్టించడానికి నమూనా కోడ్ క్రిందిది.
దిగుమతి 'రియాక్ట్' నుండి రియాక్ట్ దిగుమతి 'రియాక్ట్-డోమ్' క్లాస్ నుండి రియాక్ట్ డామ్ రియాక్ట్.కామ్ రియాక్ట్.కాంపొనెంట్ {రెండర్ () {రిటర్న్ (మీ ఐడి {this.state.id}
)}} ReactDOM.render (, document.getElementById ('content'))స్టేట్స్ వర్సెస్ ప్రాప్స్
కాంపోనెంట్ లైఫ్‌సైకిల్‌ను రియాక్ట్ చేయండి
రియాక్ట్ వివిధ పద్ధతులను అందిస్తుంది, ఇది ఒక భాగం యొక్క జీవితచక్రంలో ఒక నిర్దిష్ట దశ సంభవించినప్పుడు తెలియజేస్తుంది. ఈ పద్ధతులను జీవితచక్ర పద్ధతులు అంటారు. ఈ జీవితచక్ర పద్ధతులు చాలా క్లిష్టంగా లేవు. మీరు ఈ పద్ధతులను ప్రత్యేకమైన ఈవెంట్ హ్యాండ్లర్లుగా భావించవచ్చు, వీటిని భాగాలు జీవితంలో వివిధ పాయింట్లలో పిలుస్తారు. వివిధ పనులను చేయడానికి మీరు ఈ పద్ధతులకు మీ స్వంత కోడ్‌ను కూడా జోడించవచ్చు. భాగం యొక్క జీవితచక్రం గురించి మాట్లాడుతూ, జీవితచక్రం 4 దశలుగా విభజించబడింది. వారు:
- ప్రారంభ దశ
- దశను నవీకరిస్తోంది
- ఆధారాలు దశను మారుస్తాయి
- అన్‌మౌంటింగ్ దశ
ఈ దశల్లో ప్రతి ఒక్కటి కొన్ని జీవితచక్ర పద్ధతులను కలిగి ఉంటాయి, అవి వాటికి మాత్రమే ప్రత్యేకమైనవి. కాబట్టి ఈ ప్రతి దశలో ఏమి జరుగుతుందో ఇప్పుడు తెలుసుకుందాం.
a. ప్రారంభ దశ - రియాక్ట్ భాగం యొక్క జీవితచక్రం యొక్క మొదటి దశ ప్రారంభ దశ లేదా ప్రారంభ రెండరింగ్ దశ. ఈ దశలో,భాగం దాని ప్రయాణాన్ని ప్రారంభించి, DOM కి వెళ్ళబోతోంది. ఈ దశ కింది పద్ధతులను కలిగి ఉంటుంది, ఇవి ముందే నిర్వచించిన క్రమంలో అమలు చేయబడతాయి.
- getDefaultProps (): యొక్క డిఫాల్ట్ విలువను పేర్కొనడానికి ఈ పద్ధతి ఉపయోగించబడుతుంది this.props . మీ భాగం సృష్టించబడటానికి ముందే ఇది పిలువబడుతుంది లేదా తల్లిదండ్రుల నుండి ఏదైనా ఆధారాలు దానిలోకి పంపబడతాయి.
- getInitialState (): ఈ పద్ధతి ఉపయోగించబడుతుందిపేర్కొనవచ్చు యొక్క డిఫాల్ట్ విలువ this.state మీ భాగం సృష్టించబడటానికి ముందు.
- భాగం విల్మౌంట్ (): మీ భాగం DOM లోకి ఇవ్వబడటానికి ముందు మీరు కాల్ చేయగల చివరి పద్ధతి ఇది. కానీ మీరు కాల్ చేస్తే సెట్‌స్టేట్ () ఈ పద్ధతి లోపల మీ భాగం తిరిగి ఇవ్వబడదు.
- రెండర్ (): వ ఒకే రూట్ HTML నోడ్‌ను తిరిగి ఇవ్వడానికి పద్ధతి బాధ్యత వహిస్తుంది మరియు ప్రతి భాగంలోనూ నిర్వచించబడాలి. మీరు తిరిగి రావచ్చు శూన్య లేదా తప్పుడు ఒకవేళ మీరు ఏదైనా రెండర్ చేయకూడదనుకుంటే.
- భాగం డిడ్మౌంట్ (): భాగం రెండర్ చేయబడి, DOM లో ఉంచిన తర్వాత, ఇది పద్ధతి అంటారు. ఇక్కడ మీరు ఏదైనా DOM ప్రశ్న ఆపరేషన్లను చేయవచ్చు.
బి. దశను నవీకరిస్తోంది - DOM కు భాగం జోడించబడిన తర్వాత, అవి రాష్ట్ర మార్పు సంభవించినప్పుడు మాత్రమే నవీకరించబడతాయి మరియు తిరిగి ఇవ్వగలవు. రాష్ట్రం మారిన ప్రతిసారీ, భాగం దానిని పిలుస్తుంది రెండర్ () మళ్ళీ. ఈ భాగం యొక్క అవుట్పుట్ మీద ఆధారపడే ఏదైనా భాగం దానిని కూడా పిలుస్తుంది రెండర్ () మళ్ళీ. ఇది పూర్తయింది, మా భాగం దాని యొక్క తాజా సంస్కరణను ప్రదర్శిస్తుందని నిర్ధారించడానికి. అందువల్ల భాగాల స్థితిని విజయవంతంగా నవీకరించడానికి, ఇచ్చిన క్రమంలో ఈ క్రింది పద్ధతులు ఉపయోగించబడతాయి:
- mustComponentUpdate (): ఈ పద్ధతిని ఉపయోగించి మీరు మీ భాగం యొక్క నవీకరణ యొక్క ప్రవర్తనను నియంత్రించవచ్చు. మీరు ఈ పద్ధతి నుండి నిజం తిరిగి ఇస్తే,భాగం నవీకరించబడుతుంది. ఈ పద్ధతి తిరిగి వస్తేతప్పుడు, భాగం నవీకరణను దాటవేస్తుంది.
- భాగం విల్ అప్‌డేట్ (): టిఅతని పద్ధతి అంటారు jమీ భాగం నవీకరించబడటానికి ముందు. ఈ పద్ధతిలో, మీరు కాల్ చేయడం ద్వారా మీ భాగం స్థితిని మార్చలేరు this.setState .
- రెండర్ (): మీరు తప్పుడు ద్వారా తిరిగి వస్తున్నట్లయితే mustComponentUpdate () , లోపల కోడ్ రెండర్ () మీ భాగం సరిగ్గా ప్రదర్శించబడుతుందని నిర్ధారించడానికి మళ్ళీ ప్రారంభించబడుతుంది.
- భాగం డిడ్ అప్‌డేట్ (): భాగం నవీకరించబడి, అన్వయించబడిన తర్వాత, ఈ పద్ధతి ప్రారంభించబడుతుంది. మీరు ఈ పద్ధతిలో ఏదైనా కోడ్‌ను ఉంచవచ్చు, ఇది భాగం నవీకరించబడిన తర్వాత మీరు అమలు చేయాలనుకుంటున్నారు.
సి. ఆధారాలు దశను మార్చండి - తరువాత ఈ భాగం DOM లోకి ఇవ్వబడింది, దాని ప్రాప్ విలువ మారినప్పుడు రాష్ట్ర మార్పు కాకుండా, భాగం అప్‌డేట్ అవుతుంది. ఆచరణాత్మకంగా ఈ దశ మునుపటి దశ మాదిరిగానే పనిచేస్తుంది, కానీ రాష్ట్రానికి బదులుగా, ఇది ఆధారాలతో వ్యవహరిస్తుంది. అందువల్ల, ఈ దశలో నవీకరణ దశ నుండి ఒక అదనపు పద్ధతి మాత్రమే ఉంది.
- భాగం విల్ రిసీవ్ప్రోప్స్ (): ఈ పద్ధతి ఒక వాదనను అందిస్తుంది, ఇది భాగానికి కేటాయించబోయే కొత్త ప్రాప్ విలువను కలిగి ఉంటుంది.
మిగిలిన జీవితచక్ర పద్ధతులు మేము మునుపటి దశలో చూసిన పద్ధతులకు సమానంగా ప్రవర్తిస్తాయి.
- mustComponentUpdate ()
- భాగం విల్ అప్‌డేట్ ()
- రెండర్ ()
- భాగం డిప్ అప్‌డేట్ ()
d.ది అన్‌మౌంటింగ్ దశ -ఇది భాగాల జీవిత చక్రం యొక్క చివరి దశ, దీనిలో భాగం నాశనం మరియు DOM నుండి పూర్తిగా తొలగించబడుతుంది. ఇది ఒకే పద్ధతిని కలిగి ఉంది:
- భాగం విల్అన్‌మౌంట్ (): ఈ పద్ధతిని ప్రారంభించిన తర్వాత, మీ భాగం DOM నుండి శాశ్వతంగా తొలగించబడుతుంది.ఈ పద్ధతిలో, వైఈవెంట్ శ్రోతలను తొలగించడం, టైమర్‌లను ఆపడం మొదలైన శుభ్రపరిచే సంబంధిత పనులను మీరు చేయగలరు.
మొత్తం జీవిత చక్ర రేఖాచిత్రం క్రిందిది:
ఇది రియాక్ట్ కాంపోనెంట్స్‌లో బ్లాగ్ చివరకి తీసుకువస్తుంది. రియాక్ట్ కాంపోనెంట్స్ అంటే ఏమిటి, అవి ఎలా ఉపయోగించబడుతున్నాయో ఈ బ్లాగులో నేను స్పష్టంగా వివరించగలిగానని ఆశిస్తున్నాను. మీరు నా బ్లాగును చూడవచ్చు , మీరు ReactJS గురించి మరింత తెలుసుకోవాలనుకుంటే.
మీరు రియాక్ట్‌లో శిక్షణ పొందాలనుకుంటే మరియు ఆసక్తికరమైన UI లను మీ స్వంతంగా అభివృద్ధి చేసుకోవాలనుకుంటే, చూడండి ప్రపంచవ్యాప్తంగా విస్తరించి ఉన్న 250,000 మందికి పైగా సంతృప్తికరమైన అభ్యాసకుల నెట్‌వర్క్‌తో విశ్వసనీయ ఆన్‌లైన్ లెర్నింగ్ సంస్థ ఎడురేకా చేత.
మాకు ప్రశ్న ఉందా? దయచేసి వ్యాఖ్యల విభాగంలో పేర్కొనండి మరియు మేము మిమ్మల్ని సంప్రదిస్తాము.