React היא מסגרת JavaScript חזיתית. בעוד שבניית דפי HTML וניהולם יכולים להיות מייגעים, React מקל על הדברים על ידי פירוק אלמנטים על המסך והלוגיקה שלהם לרכיבים.

React מביא הרבה לשולחן, אבל אחת התכונות השימושיות ביותר היא ניהול מצב. במאמר זה, תלמד כיצד לנהל מצב באמצעות React Hooks. לפני שתמשיך הלאה, מאמר זה מניח שאתה מכיר את היסודות של React.

מה הם הוקס ב-ReactJS?

הוו הוא מושג חדש שהוצג ב-React לניהול מצבים ואחרים תכונות של React. על ידי שימוש ב-hooks ב-React, אתה יכול להימנע מכתיבת קוד ארוך שאחרת היה משתמש בשיעורים. הדוגמה הבאה מדגימה דוגמה של useState וו.

const [משתנה, setVariable] = useState (ערך התחלתי);

הנה ה מִשְׁתַנֶה היא המדינה וה setVariable היא הפונקציה שקובעת את המצב. useState הוא הוו שמחזיק את הערך ההתחלתי של משתנה המצב. אל תדאג אם זה לא נשמע לך הגיוני. בסוף המדריך הזה, תהיה לך הבנה מוצקה על ווים.

ישנם שני סוגים של ווים:

• ווים בסיסיים
  1. useState
  2. useEffect
  3. useContext
• ווים נוספים
  1. useRef
  2. השתמש ב-Memo
  3. useReducer

useState()

ה useState וו עוזר לנהל מצב. מוקדם יותר בפיתוח React, ניהול המדינה נעשה באמצעות שיעורים. תחביר המצב נכתב בתוך הבנאי והשתמש ב-

זֶה מילת מפתח. עם הצגת ה-React hooks, למפתחים יש את החופש לנהל מצב באמצעות רכיבים פונקציונליים.

אתה יכול לעיין בדוגמה הקודמת עבור התחביר של React hooks. הדוגמה הכי פשוטה להסבר useState() הוא דוגמה למשתנה הספירה:

לייבא את {useState} מ-"react";
function App() {
const [count, setCount] = useState (0);
לחזור (


דוגמה ווים

{לספור}

setCount (count+1)}>הוסף
setCount (count-1)}>הפחת



);
}

ה useState ל-hook יש משתנה ושיטה המשמשים להגדרת הערך של המשתנה. ה useState hook מקבל את הערך ההתחלתי של המדינה כפרמטר. אתה יכול להגדיר כל ערך עבור משתנה הספירה באמצעות ה- setCount שיטה.

ישנם שני לחצנים בקוד לעיל כדי להגדיל ולהקטין את הערך של לספור מִשְׁתַנֶה. בזמן ההגדלה, אתה יכול להוסיף +1 למצב הספירה הנוכחי ו-1 כדי להקטין את הספירה ב-1.

useEffect

ה useEffect hook מעדכן את המצב בדף האינטרנט לאחר כל שינוי במצב. ה useEffect הוק הוצג כדי להסיר את תופעות הלוואי של רכיבים מבוססי כיתה. לפני הצגת רכיבים מבוססי פונקציות, עקבו אחר שינויים במצב באמצעות רכיבי מחזור החיים: componentDidMount ו componentDidUpdate. ה useEffect hook מקבל מערך תלות. כל השינויים במשתני המצב המוזכרים במערך התלות עוברים מעקב ומוצגים באמצעות ה- useEffect וו.

דוגמה קלאסית לשימוש ב- useEffect וו הוא שליפת נתונים מ-API או חישוב הלייקים או המנויים בפוסט.

useEffect(()=>{
// קוד
},[מערך תלות]);

בהתחשב בדוגמה לעיל

ייבוא ​​{ useState, useEffect } מ-"react";
function App() {
const [count, setCount] = useState (0);
useEffect(() => {
document.title = `לחצת במשך ${count} פעמים`;
}, [לספור]);
לחזור (


דוגמה ווים

{לספור}

 setCount (ספירה + 1)}>הוסף



);
}

במעבר ה לספור משתנה מצב ב- useEffect מערך תלות, הוא בודק אם המצב השתנה או לא. לאחר מכן הוא מגדיר את כותרת המסמך למשתנה הספירה.

useContext

ה useContext hook עוזר להעביר נתונים דרך הרכיב מבלי לעשות זאת באופן ידני באמצעות אביזרים. זה הופך את השימוש ב-Context API מהיר וקל. תהיה לך הבנה טובה יותר לאחר שתעבור על דוגמה.

ראשית, הבן כיצד הקוד נראה מבלי להשתמש בהקשר. כפי שאתה יכול לראות, עליך להעביר את הטקסט באמצעות אביזרים לרכיב הילד. כדי למנוע מורכבויות, אתה יכול להשתמש ב- useContext וו.

ייצוא פונקציית ברירת המחדל App() {
let text = "שלום, ברוכים הבאים ל-MUO";
לחזור (






);
}
const ChildComponent = ({ טקסט }) => {
לַחֲזוֹר 
{טֶקסט}
;
};

ראשית, צור ספק בקובץ הראשי שלך (App.js).

const Context = React.createContext (null);

ה אפליקציה רכיב הוא הרכיב ברמה העליונה או רכיב ה"אב". אתה צריך לעטוף את כל הרכיב ב- והעבירו את האובייקט או הנתונים שברצונכם לעבד על רכיב הילד.

ייצוא פונקציית ברירת המחדל App() {
let text = "שלום, ברוכים הבאים ל-MUO";
לחזור (








);
}

כעת, צור רכיב צאצא וגשת לאביזר הטקסט באמצעות ה- useContext וו. תעביר את ה הֶקשֵׁר משתנה באמצעות ליצור הקשר.

const ChildComponent = () => {
let text = useContext (הקשר);
console.log (טקסט);
לַחֲזוֹר 
{טֶקסט}
;
};

קָשׁוּר: מסגרות JavaScript שכדאי ללמוד​​​​​

עוד הרבה מה לחקור עם React

זה עתה למדת את היסודות של ווים. זו אחת התכונות הטובות ביותר של React, וגם די ידידותית למפתחים. React היא אחת מהמסגרות החזיתיות הטובות ביותר ללמוד היום עבור הזדמנויות עבודה, יצירת אפליקציות בעמוד בודד, או פשוט כדי להרחיב את הידע שלך בתכנות.

אם כבר מדברים על הרחבת הידע שלך, ניהול מצב הוא רק מיומנות אחת שמפתחי React צריכים לתרגל. תכונות מפתח אחרות, כגון אביזרים, ראויות לא פחות מתשומת הלב שלך.

כיצד להשתמש באביזרים ב-ReactJS

אם אתה מחפש טיפים כיצד להשתמש באביזרים ב-ReactJS, אתה במקום הנכון.

קרא הבא

על הסופר