எதிர்வினைக் கூறுகள் - எடுத்துக்காட்டுகளுடன் ReactJS இல் முட்டுகள் மற்றும் மாநிலங்கள்

'எதிர்வினையில், எல்லாம் ஒரு கூறு'

நீங்கள் ரியாக்ட் தெரிந்திருந்தால், இந்த சொற்றொடரை நீங்கள் பலமுறை கேட்டிருக்க வேண்டும் அல்லது படித்திருக்க வேண்டும். ஆனால் அது சரியாக என்ன அர்த்தம், அது எவ்வாறு பயன்படுத்தப்படுகிறது என்பது உங்களுக்குத் தெரியுமா? நீங்கள் இல்லையென்றால், எதிர்வினை கூறுகள் மற்றும் வாழ்க்கைச் சுழற்சியின் வெவ்வேறு கட்டங்களைப் பற்றி அறிய இந்த வலைப்பதிவைப் படியுங்கள். நீங்கள் முடிக்கும் நேரத்தில் நான் உறுதியாக இருக்கிறேன் இந்த வலைப்பதிவைப் படிக்கும்போது எதிர்வினை கூறுகள் மற்றும் அதைச் சுற்றியுள்ள கருத்துகள் பற்றிய முழுமையான புரிதல் உங்களுக்கு இருக்கும். ஆனால் தொடர்வதற்கு முன், நான் விவாதிக்கவிருக்கும் தலைப்புகளை விரைவாகப் பாருங்கள்:

• எதிர்வினை கூறுகள் என்றால் என்ன?
• எதிர்வினை கூறுகளின் நன்மைகள்
• முட்டுகள்
• மாநிலங்களில்
• மாநிலங்கள் Vs முட்டுகள்
• உபகரண வாழ்க்கை சுழற்சியை எதிர்வினை

எதிர்வினை கூறுகள் என்றால் என்ன?

முன்னதாக டெவலப்பர்கள் ஒரு எளிய ஒற்றை பக்க பயன்பாட்டை உருவாக்க 1000 வரி குறியீடுகளை எழுத வேண்டியிருந்தது. அந்த பயன்பாடுகளில் பெரும்பாலானவை பாரம்பரிய DOM கட்டமைப்பைப் பின்பற்றி அவற்றில் மாற்றங்களைச் செய்வது மிகவும் சவாலானது மற்றும் டெவலப்பர்களுக்கு ஒரு கடினமான பணி.மாற்றம் தேவைப்படும் உறுப்பை அவர்கள் கைமுறையாக தேட வேண்டும், அதற்கேற்ப புதுப்பிக்க வேண்டும். ஒரு சிறிய தவறு கூட பயன்பாட்டு தோல்விக்கு வழிவகுக்கும். மேலும், DOM ஐப் புதுப்பிப்பது மிகவும் விலை உயர்ந்தது. இதனால், கூறு அடிப்படையிலான அணுகுமுறை அறிமுகப்படுத்தப்பட்டது. இந்த அணுகுமுறையில், முழு பயன்பாடும் தர்க்கரீதியான பகுதிகளாக பிரிக்கப்பட்டுள்ளன, அவை கூறுகள் என அழைக்கப்படுகின்றன. இந்த அணுகுமுறையைத் தேர்ந்தெடுத்த கட்டமைப்புகளில் ரியாக் ஒன்றாகும்.வலை வளர்ச்சியில் உங்கள் வாழ்க்கையை உருவாக்க நீங்கள் திட்டமிட்டால், ஆரம்ப தொடக்கமானது உங்களுக்கு நிறைய வாய்ப்புகளைத் திறக்கும்.

இந்த கூறுகள் என்ன என்பதை இப்போது புரிந்துகொள்வோம்.

எதிர்வினை கூறுகள் பயனர் இடைமுகத்தின் கட்டுமான தொகுதிகளாக கருதப்படுகின்றன. இந்த கூறுகள் ஒவ்வொன்றும் ஒரே இடத்தில் உள்ளன, ஆனால் ஒருவருக்கொருவர் சுயாதீனமாக இயங்குகின்றன. எதிர்வினை கூறுகள் அவற்றின் சொந்த அமைப்பு, முறைகள் மற்றும் API களைக் கொண்டுள்ளன. அவை மீண்டும் பயன்படுத்தக்கூடியவை மற்றும் தேவைக்கேற்ப இடைமுகங்களில் செலுத்தப்படலாம். சிறந்த புரிதலைப் பெற, முழு UI ஐ ஒரு மரமாக கருதுங்கள்.இங்கே தொடக்கக் கூறு வேராகவும், சுயாதீனமான துண்டுகள் ஒவ்வொன்றும் கிளைகளாகவும் மாறும், அவை மேலும் துணை கிளைகளாக பிரிக்கப்படுகின்றன.

இது எங்கள் UI ஐ ஒழுங்கமைத்து வைத்திருக்கிறது மற்றும் தரவு மற்றும் நிலை மாற்றங்களை தர்க்கரீதியாக வேரிலிருந்து கிளைகளுக்கும் பின்னர் துணை கிளைகளுக்கும் செல்ல அனுமதிக்கிறது. கூறுகள் கிளையன்ட் பக்கத்திலிருந்து நேரடியாக சேவையகத்திற்கு அழைப்புகளைச் செய்கின்றன, இது பக்கத்தை புதுப்பிக்காமல் DOM மாறும் வகையில் புதுப்பிக்க அனுமதிக்கிறது. ஏனென்றால், எதிர்வினை கூறுகள் அஜாக்ஸ் கோரிக்கைகளின் கருத்தில் உருவாக்கப்பட்டுள்ளன. ஒவ்வொரு கூறுக்கும் அதன் சொந்த இடைமுகம் உள்ளது, அது சேவையகத்திற்கு அழைப்புகளைச் செய்து புதுப்பிக்க முடியும். இந்த கூறுகள் ஒருவருக்கொருவர் சுயாதீனமாக இருப்பதால், ஒவ்வொன்றும் மற்றவர்களை அல்லது ஒட்டுமொத்த UI ஐ பாதிக்காமல் புதுப்பிக்க முடியும்.

நாம் பயன்படுத்த React.createClass () ஒரு கூறு உருவாக்கும் முறை. இந்த முறை ஒரு பொருள் வாதத்தை அனுப்ப வேண்டும், இது எதிர்வினை கூறுகளை வரையறுக்கும். ஒவ்வொரு கூறுகளும் சரியாக ஒன்றைக் கொண்டிருக்க வேண்டும் வழங்க () முறை. இது ஒரு கூறுகளின் மிக முக்கியமான சொத்து, இது ஜாவாஸ்கிரிப்ட், JSX இல் HTML ஐ பாகுபடுத்துவதற்கு பொறுப்பாகும். இது வழங்க () கூறுகளின் HTML பிரதிநிதித்துவத்தை DOM கணுவாக வழங்கும். எனவே, அனைத்து HTML குறிச்சொற்களும் உள்ளே ஒரு இணைக்கும் குறிச்சொல்லில் இணைக்கப்பட வேண்டும் வழங்க () .

ஒரு கூறுகளை உருவாக்குவதற்கான மாதிரி குறியீடு பின்வருமாறு.

இறக்குமதி 'எதிர்வினை' இலிருந்து எதிர்வினை இறக்குமதி 'எதிர்வினை-டோம்' வகுப்பிலிருந்து ReactDOM MyComponent React.Component {render () {return (
உங்கள் ஐடி {this.state.id is
)}} ReactDOM.render (, document.getElementById ('content'))

மாநிலங்கள் Vs முட்டுகள்

உபகரண வாழ்க்கை சுழற்சியை எதிர்வினை

ரியாக்ட் பல்வேறு முறைகளை வழங்குகிறது, இது ஒரு கூறுகளின் வாழ்க்கைச் சுழற்சியில் ஒரு குறிப்பிட்ட நிலை ஏற்படும் போது தெரிவிக்கும். இந்த முறைகள் வாழ்க்கை சுழற்சி முறைகள் என்று அழைக்கப்படுகின்றன. இந்த வாழ்க்கை சுழற்சி முறைகள் மிகவும் சிக்கலானவை அல்ல. இந்த முறைகளை ஒரு சிறப்பு நிகழ்வு கையாளுபவர்களாக நீங்கள் நினைக்கலாம், அவை ஒரு கூறுகளின் வாழ்க்கையின் போது பல்வேறு புள்ளிகளில் அழைக்கப்படுகின்றன. பல்வேறு பணிகளைச் செய்ய இந்த முறைகளில் உங்கள் சொந்த குறியீட்டைக் கூட சேர்க்கலாம். கூறுகளின் வாழ்க்கை சுழற்சியைப் பற்றி பேசுகையில், வாழ்க்கை சுழற்சி 4 கட்டங்களாக பிரிக்கப்பட்டுள்ளது. அவை:

1. ஆரம்ப கட்டம்
2. கட்டத்தைப் புதுப்பித்தல்
3. முட்டுகள் கட்டத்தை மாற்றுகின்றன
4. கட்டம் கட்டுதல்

இந்த கட்டங்கள் ஒவ்வொன்றிலும் சில வாழ்க்கை சுழற்சி முறைகள் உள்ளன, அவை அவற்றுக்கு மட்டுமே குறிப்பிட்டவை. எனவே இந்த ஒவ்வொரு கட்டத்திலும் என்ன நடக்கிறது என்பதைக் கண்டுபிடிப்போம்.

a. ஆரம்ப கட்டம் - ஒரு எதிர்வினை கூறுகளின் வாழ்க்கைச் சுழற்சியின் முதல் கட்டம் ஆரம்ப கட்டம் அல்லது ஆரம்ப ரெண்டரிங் கட்டமாகும். இந்த கட்டத்தில்,கூறு அதன் பயணத்தைத் தொடங்கி DOM க்குச் செல்லவிருக்கிறது. இந்த கட்டம் பின்வரும் முறைகளைக் கொண்டுள்ளது, அவை முன் வரையறுக்கப்பட்ட வரிசையில் பயன்படுத்தப்படுகின்றன.

1. getDefaultProps (): இன் இயல்புநிலை மதிப்பைக் குறிப்பிட இந்த முறை பயன்படுத்தப்படுகிறது this.props . உங்கள் கூறு உருவாக்கப்படுவதற்கு முன்பே அல்லது பெற்றோரிடமிருந்து ஏதேனும் முட்டுகள் அனுப்பப்படுவதற்கு முன்பே இது அழைக்கப்படுகிறது.
2. getInitialState (): இந்த முறை பயன்படுத்தப்படுகிறதுகுறிப்பிடவும் இன் இயல்புநிலை மதிப்பு this.state உங்கள் கூறு உருவாக்கப்படுவதற்கு முன்பு.
3. கூறு வில்மவுண்ட் (): உங்கள் கூறு DOM இல் வழங்கப்படுவதற்கு முன்பு நீங்கள் அழைக்கக்கூடிய கடைசி முறை இதுவாகும். ஆனால் நீங்கள் அழைத்தால் setState () இந்த முறைக்குள் உங்கள் கூறு மீண்டும் வழங்கப்படாது.
4. வழங்க (): வது ஒற்றை ரூட் HTML கணுவைத் திருப்புவதற்கு முறை பொறுப்பு மற்றும் ஒவ்வொரு கூறுகளிலும் வரையறுக்கப்பட வேண்டும். நீங்கள் திரும்பலாம் ஏதுமில்லை அல்லது பொய் நீங்கள் எதையும் வழங்க விரும்பவில்லை என்றால்.
5. கூறு டிட்மவுண்ட் (): கூறு காண்பிக்கப்பட்டு DOM இல் வைக்கப்பட்டவுடன், இது முறை என்று அழைக்கப்படுகிறது. இங்கே நீங்கள் எந்த DOM வினவல் நடவடிக்கைகளையும் செய்யலாம்.

b. கட்டத்தைப் புதுப்பித்தல் - DOM இல் கூறு சேர்க்கப்பட்டதும், ஒரு மாநில மாற்றம் ஏற்பட்டால் மட்டுமே அவை புதுப்பித்து மீண்டும் வழங்க முடியும். ஒவ்வொரு முறையும் நிலை மாறும்போது, ​​கூறு அதன் அழைப்பு வழங்க () மீண்டும். இந்த கூறுகளின் வெளியீட்டை நம்பியிருக்கும் எந்தவொரு கூறுகளும் அதன் அழைப்பை அழைக்கும் வழங்க () மீண்டும். இது செய்யப்படுகிறது, எங்கள் கூறு அதன் சமீபத்திய பதிப்பைக் காண்பிப்பதை உறுதிசெய்ய. இதனால் கூறுகளின் நிலையை வெற்றிகரமாக புதுப்பிக்க, கொடுக்கப்பட்ட வரிசையில் பின்வரும் முறைகள் பயன்படுத்தப்படுகின்றன:

1. shouldComponentUpdate (): இந்த முறையைப் பயன்படுத்தி, உங்கள் கூறுகளின் புதுப்பிப்பைக் கட்டுப்படுத்தலாம். இந்த முறையிலிருந்து நீங்கள் உண்மையைத் திருப்பினால்,கூறு புதுப்பிக்கப்படும். இந்த முறை திரும்பினால் வேறுபொய், கூறு புதுப்பிப்பைத் தவிர்க்கும்.
2. கூறுவில் புதுப்பிப்பு (): டிஅவரது முறை அழைக்கப்படுகிறது jஉங்கள் கூறு புதுப்பிக்கப்படுவதற்கு முன்பு. இந்த முறையில், அழைப்பதன் மூலம் உங்கள் கூறு நிலையை மாற்ற முடியாது this.setState .
3. வழங்க (): நீங்கள் தவறான வழியாக திரும்பி வருகிறீர்கள் என்றால் mustComponentUpdate () , உள்ளே குறியீடு வழங்க () உங்கள் கூறு சரியாகக் காண்பிக்கப்படுவதை உறுதிசெய்ய மீண்டும் செயல்படுத்தப்படும்.
4. componentDidUpdate (): கூறு புதுப்பிக்கப்பட்டு வழங்கப்பட்டவுடன், இந்த முறை செயல்படுத்தப்படுகிறது. இந்த முறைக்குள் நீங்கள் எந்த குறியீட்டையும் வைக்கலாம், இது கூறு புதுப்பிக்கப்பட்டவுடன் இயக்க வேண்டும்.

c. முட்டுகள் கட்டத்தை மாற்றுகின்றன - பிறகு இந்த கூறு DOM இல் வழங்கப்பட்டுள்ளது, அதன் முட்டு மதிப்பு மாறும்போது மாநில மாற்றத்தைத் தவிர்த்து, கூறு புதுப்பிக்கப்படும் ஒரே நேரம். நடைமுறையில் இந்த கட்டம் முந்தைய கட்டத்தைப் போலவே செயல்படுகிறது, ஆனால் மாநிலத்திற்குப் பதிலாக, அது முட்டுகள் மூலம் கையாள்கிறது. எனவே, இந்த கட்டத்தில் புதுப்பித்தல் கட்டத்திலிருந்து ஒரு கூடுதல் முறை மட்டுமே உள்ளது.

ஜாவா முழு எண்ணாக மாற்றவும்

1. கூறுவில்ரெசிவ் ப்ராப்ஸ் (): இந்த முறை ஒரு வாதத்தை அளிக்கிறது, இது கூறுக்கு ஒதுக்கப்படவிருக்கும் புதிய முட்டு மதிப்பைக் கொண்டுள்ளது.
   மீதமுள்ள வாழ்க்கை சுழற்சி முறைகள் முந்தைய கட்டத்தில் நாம் கண்ட முறைகளுக்கு ஒத்ததாகவே செயல்படுகின்றன.
   
2. mustComponentUpdate ()
3. கூறுவில் புதுப்பிப்பு ()
4. வழங்க ()
5. componentDidUpdate ()

d.கணக்கிடப்படாத கட்டம் -இது கூறுகளின் வாழ்க்கைச் சுழற்சியின் கடைசி கட்டமாகும், இதில் கூறு அழிக்கப்பட்டு DOM இலிருந்து முற்றிலும் அகற்றப்படுகிறது. இது ஒரே ஒரு முறையைக் கொண்டுள்ளது:

1. கூறு வில்அன்மவுண்ட் (): இந்த முறை செயல்படுத்தப்பட்டதும், உங்கள் கூறு DOM இலிருந்து நிரந்தரமாக அகற்றப்படும்.இந்த முறையில், ஒய்நிகழ்வு கேட்பவர்களை அகற்றுதல், டைமர்களை நிறுத்துதல் போன்ற எந்தவொரு தூய்மைப்படுத்தும் பணிகளையும் செய்ய முடியும்.

முழு வாழ்க்கை சுழற்சி வரைபடம் பின்வருமாறு:

இது எதிர்வினை கூறுகள் குறித்த வலைப்பதிவின் முடிவிற்கு நம்மை அழைத்துச் செல்கிறது. இந்த வலைப்பதிவில் எதிர்வினை கூறுகள் என்ன, அவை எவ்வாறு பயன்படுத்தப்படுகின்றன என்பதை என்னால் தெளிவாக விளக்க முடிந்தது என்று நம்புகிறேன். எனது வலைப்பதிவை நீங்கள் குறிப்பிடலாம் , நீங்கள் ReactJS பற்றி மேலும் அறிய விரும்பினால்.

நீங்கள் ரியாக்டில் பயிற்சி பெற விரும்பினால், சுவாரஸ்யமான UI ஐ சொந்தமாக உருவாக்க விரும்பினால், அதைப் பாருங்கள் உலகெங்கிலும் பரவியுள்ள 250,000 க்கும் மேற்பட்ட திருப்தியான கற்றவர்களின் வலைப்பின்னலுடன் நம்பகமான ஆன்லைன் கற்றல் நிறுவனமான எடுரேகாவால்.

எங்களுக்கு ஒரு கேள்வி கிடைத்ததா? கருத்துகள் பிரிவில் இதைக் குறிப்பிடவும், நாங்கள் உங்களைத் தொடர்புகொள்வோம்.