React-இல் useState பயன்பாட்டு வழிகாட்டி
நீங்கள் தட்டச்சு செய்யும்போது உங்கள் கடவுச்சொல் பார் (password bar) பலவீனமானதிலிருந்து வலிமையானதாக மாறுகிறது. React உங்கள் தட்டச்சு முறையை state மூலம் நினைவில் வைத்துக்கொள்கிறது.
State தரவுகளைத் தன்னுள் வைத்திருக்கிறது. நீங்கள் என்ன தட்டச்சு செய்கிறீர்கள் அல்லது எதைக் கிளிக் செய்கிறீர்கள் என்பதைக் கண்காணிக்கிறது.
உங்கள் பெயரை நீங்கள் தட்டச்சு செய்வதாகக் கற்பனை செய்து கொள்ளுங்கள்.
- உங்கள் தொடக்க நிலை (starting state) ஒரு காலியான சரம் (empty string).
- நீங்கள் J என்று தட்டச்சு செய்கிறீர்கள்.
- "" என்பதிலிருந்து "J" என state-ஐப் புதுப்பிக்க ஒரு செயல்பாட்டை (function) அழைக்கிறீர்கள்.
- நீங்கள் o என்று தட்டச்சு செய்கிறீர்கள்.
- state-ஐ "Jo" என மாற்ற அந்தச் செயல்பாட்டை அழைக்கிறீர்கள்.
ஒவ்வொரு முறை நீங்கள் state-ஐப் புதுப்பிக்கும் போதும், React UI-ஐ மீண்டும் உருவாக்குகிறது (re-renders). Re-rendering என்பது React பழைய காட்சியை நீக்கிவிட்டு, உங்கள் புதுப்பிக்கப்பட்ட தரவுகளுடன் புதிய காட்சியை வரைவதைக் குறிக்கும்.
ஏன் சாதாரண மாறிகளை (regular variables) பயன்படுத்தக்கூடாது? ஒரு சாதாரண மாறி உங்கள் குறியீட்டில் (code) மாறலாம், ஆனால் அது திரையைப் புதுப்பிக்காது. உங்கள் பயனர்கள் பழைய தரவையே காண்பார்கள். React state உங்கள் தரவை உங்கள் UI உடன் இணைப்பதன் மூலம் இதைச் சரிசெய்கிறது.
useState-ஐப் பயன்படுத்துவது எப்படி:
React-லிருந்து இறக்குமதி செய்யவும் (Import).
import { useState } from 'react';அதை அறிவிக்கவும் (Declare).
const [age, setAge] = useState(20);
இந்த உதாரணத்தில்:
- age என்பது உங்கள் தற்போதைய மதிப்பு.
- setAge என்பது மதிப்பை மாற்றும் செயல்பாடு.
- 20 என்பது உங்கள் தொடக்க மதிப்பு.
இதை இப்போதே முயற்சி செய்து பாருங்கள். ஒரு React திட்டத்தைத் (project) திறக்கவும். ஒரு கவுண்டரை (counter) உருவாக்கவும். எண்ணிக்கையைப் புதுப்பிக்க ஒரு பொத்தானைக் கிளிக் செய்யவும். திரை உடனடியாக மாறுவதைக் கவனியுங்கள்.
ஆதாரம்: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i