מדריך ל-useState ב-React
שורת הסיסמה שלך משתנה מ"חלשה" ל"חזקה" בזמן ההקלדה. React זוכרת את מה שאתה מקליד באמצעות state.
state מחזיק נתונים. הוא עוקב אחרי מה שאתה מקליד או לוחץ עליו.
דמיין שאתה מקליד את שמך.
- ה-state ההתחלתי שלך הוא מחרוזת ריקה.
- אתה מקליד J.
- אתה קורא לפונקציה כדי לעדכן את ה-state מ-"" ל-"J".
- אתה מקליד o.
- אתה קורא לפונקציה כדי לשנות את ה-state ל-"Jo".
בכל פעם שאתה מעדכן את ה-state, React מבצעת re-render ל-UI. re-rendering פירושו ש-React מנקה את התצוגה הישנה ומציירת תצוגה חדשה עם הנתונים המעודכנים שלך.
למה לא להשתמש במשתנים רגילים? משתנה רגיל משתנה בקוד שלך אך אינו מעדכן את המסך. המשתמשים שלך יראו נתונים ישנים. React state פותר זאת על ידי חיבור הנתונים שלך ל-UI.
איך להשתמש ב-useState:
מייבאים אותו מ-React. import { useState } from 'react';
מצהירים עליו. const [age, setAge] = useState(20);
בדוגמה זו:
- age הוא הערך הנוכחי שלך.
- setAge היא הפונקציה לשינוי הערך.
- 20 הוא הערך ההתחלתי שלך.
נסה זאת עכשיו. פתח פרויקט React. צור מונה (counter). לחץ על כפתור כדי לעדכן את המונה. צפה במסך משתנה באופן מיידי.
מקור: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i