UseState לעומת useReducer ב-React: בחירת ה-State Management Hook הנכון

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

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

סקירה כללית של useState Hook

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

const [state, setState] = useState (initialStateValue);

בבלוק הקוד למעלה, ה- מדינה משתנה מחזיק נתונים בזיכרון בין עיבודים. ו setState היא פונקציית ה"מגדיר" שמתפעלת את מדינה מִשְׁתַנֶה.

ה useState hook מחזיר מערך עם שני אלמנטים בדיוק. הוא גם מקבל ערך התחלתי עבור משתנה המצב.

לדוגמה, אם רוצים להגדיר משתנה מצב המייצג את גיל המשתמש, עם ערך התחלתי של 17, כך תעשו זאת:

const [userAge, setUserAge] = useState(17);

ה setUserAge הפונקציה אחראית לשינוי גיל משתמש משתנה מצב.

setUserAge(19);

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

ב-React, לא מומלץ לשנות את המצב ישירות (כפי שמוצג בבלוק הקוד למטה), מכיוון ששינויים במשתנים שאינם מצבים אינם נמשכים בין עיבודי הרכיבים.

UserAge = 19;

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

פוּנקצִיָהאפליקציה(){
לַחֲזוֹר (




 </div>
 )
}

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

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

סקירה כללית של ה-Reducer Hook

useReducer הוא הוק של React זה יכול להיות שימושי בכל פעם שאתה רוצה לטפל במספר מצבים קשורים בו-זמנית. התחביר עבור useReducer נראה משהו כזה:

const [state, dispatch] = useReducer (reducer, initialState)

לְעוּמַת useState, ב useReducer, יש מדינה משתנה וא לְשַׁגֵר פונקציה ששולחת פעולות עד ל- מפחית פונקציה שמטפלת במטענים ומעדכנת את מדינה.

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

פוּנקצִיָהדֶלְפֵּק(){
const [count, setCount] = useState(0);
לַחֲזוֹר(


 הספירה היא: {count}


 setCount (ספירה + 1)}>הגדל את הספירה</button>
 setCount(0)}>אפס</button>
 setCount (ספירה - 1)}>הקטנת ספירה</button>
 </div>
 </div>
 )
}

היישום לעיל עובד בצורה מושלמת. אבל אתה יכול גם להשיג את אותן תוצאות בעזרת ה useReducer וו.

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

useReducer מקל על הטיפול במצבים קשורים והיגיון מורכב המבוסס על סוּג עבר בשולח פעולה לְהִתְנַגֵד.

לדוגמה, פונקציית השיגור יכולה לשלוח פעולה אובייקט שנראה בערך כך:

{סוּג:"סוג פעולה", מטען:מדינה * 2}

ראשית ייבא את useReducer וו, ואז הגדר את מפחית פונקציה עם הפרמטרים: מדינה והמפורקים פעולה לְהִתְנַגֵד.

יְבוּא {useReducer} מ"לְהָגִיב";
פוּנקצִיָהמפחית(מדינה, { סוג, מטען }) {
אם (סוּג 'מספר הגדלה') {
לַחֲזוֹר מטען;
 } אַחֵראם (סוּג 'countDecrease') {
לַחֲזוֹר מטען;
 } אַחֵראם (סוּג 'countReset') {
לַחֲזוֹר מטען;
 } אַחֵר {
לַחֲזוֹר מדינה;
 }
}

לאחר הגדרת ה מפחית פונקציה, אתה יכול לבנות את דֶלְפֵּק רכיב עם ה useReducer וו.

פוּנקצִיָהדֶלְפֵּק() {
const [ספירה, שיגור] = useReducer (מפחית, 0);
לַחֲזוֹר (


 הספירה היא: {count}


 לְשַׁגֵר({ סוּג: 'מספר הגדלה', מטען: לספור + 1 })}>
 הגדל את הספירה
 </button>
 לְשַׁגֵר({ סוּג: 'countReset', מטען: 0 })}>
 אפס את הספירה
 </button>
 לְשַׁגֵר({ סוּג: 'countDecrease', מטען: לספור - 1 })}>
 הגדל את הספירה
 </button>
 </div>
 </div>
 );
}

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

הכפתור השני משגר פעולה מסוג countReset עם מטען של 0 שמאפס את ערך הספירה בחזרה ל-0.

הכפתור השלישי משגר פעולה מסוג ספירה ירידה עם מטען של ספירה - 1 מה שמקטין את ערך הספירה ב-1.

בחירה בין useState ל-useReducer Hooks

עכשיו, שאתה מבין איך להשתמש useState ו useReducer ווים, חשוב לדעת מתי להשתמש נכון.

אם המדינה שלך לא דורש היגיון מורכב, אז ברור להשתמש useReducer יכול להיות מוגזם.

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

ככל שהיישום שלך גדל במורכבות, זה הופך להיות קשה לטפל במצב רק עם useState ו useReducer ווים.

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

הפיכת ניהול המדינה לקל יותר עם ספריות JavaScript

לספריות כמו React, Vue ו-Svelte יש דרכים משלהן לטפל במצב. טיפול בניהול מצב בעצמך עם וניל JavaScript הוא בהחלט משהו שאתה יכול לנסות, אבל הרבה יותר קל ונוח להשתמש בספריית JavaScript שנבדקה בקרב.

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