כיצד לנהל ביעילות מצב ב-React

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

למד כיצד אתה יכול לשנות את הקוד שלך כדי להשתמש במדינה המקומית ומדוע לעשות זאת הוא תמיד רעיון טוב.

דוגמה בסיסית למדינה ב-React

הנה מאוד יישום נגד פשוט שמדגים את האופן שבו המדינה מטופלת בדרך כלל ב-React:

יְבוּא {useState} מ'לְהָגִיב'
יְבוּא {דֶלְפֵּק} מ'דֶלְפֵּק'
פוּנקצִיָהאפליקציה(){
const [count, setCount] = useState(0)
לַחֲזוֹר<דֶלְפֵּקלספור={לספור}setCount={setCount} />
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה

בשורות 1 ו-2, אתה מייבא את useState() וו ליצירת המדינה, ואת דֶלְפֵּק רְכִיב. אתה מגדיר את לספור מדינה ו setCount שיטה לעדכון המדינה. ואז אתה מעביר את שניהם למטה ל- דֶלְפֵּק רְכִיב.

ה דֶלְפֵּק הרכיב לאחר מכן מעבד את לספור ושיחות setCount להגדיל ולהקטין את הספירה.

פוּנקצִיָהדֶלְפֵּק({count, setCount}) {
לַחֲזוֹר





instagram viewer
 (


 setCount(הקודם => הקודם - 1)}>-</button>
{count}</span>
 setCount(הקודם => הקודם + 1)}>+</button>
 </div>
 )
}

לא הגדרת את לספור משתנה ו setCount לתפקד מקומית בתוך דֶלְפֵּק רְכִיב. במקום זאת, העברתם אותו מהרכיב האב (אפליקציה). במילים אחרות, אתה משתמש במדינה גלובלית.

הבעיה עם מדינות גלובליות

הבעיה בשימוש במצב גלובלי היא שאתה מאחסן את המצב ברכיב אב (או אב של הורה) ואז להעביר את זה בתור אביזרים לרכיב שבו המדינה הזו נחוצה בפועל.

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

העברת המדינה למרכיב הילד

כאשר אתה מעביר את המדינה ל- דֶלְפֵּק רכיב, זה ייראה כך:

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


 setCount(הקודם => הקודם - 1)}>-</button>
{count}</span>
 setCount(הקודם => הקודם + 1)}>+</button>
 </div>
 )
}

ואז בתוך שלך אפליקציה רכיב, אתה לא צריך להעביר שום דבר ל- דֶלְפֵּק רְכִיב:

// יבוא
פוּנקצִיָהאפליקציה(){
לַחֲזוֹר<דֶלְפֵּק />
}

המונה יעבוד בדיוק כמו שהוא פעל בעבר, אבל ההבדל הגדול הוא שכל המדינות שלך נמצאות באופן מקומי בתוך זה דֶלְפֵּק רְכִיב. אז אם אתה צריך מונה נוסף בדף הבית, אז יהיו לך שני מונים עצמאיים. כל דלפק הוא עצמאי ודואג לכל המצב שלו.

מצב טיפול ביישומים מורכבים יותר

מצב נוסף שבו אתה משתמש במדינה גלובלית הוא עם טפסים. ה אפליקציה הרכיב שלהלן מעביר את נתוני הטופס (דוא"ל וסיסמה) ואת שיטת המגדיר אל ה- טופס כניסה רְכִיב.

יְבוּא { useState } מ"לְהָגִיב";
יְבוּא { טופס התחברות } מ"./LoginForm";
פוּנקצִיָהאפליקציה() {
const [formData, setFormData] = useState({
 אימייל: "",
 סיסמה: "",
 });
פוּנקצִיָהupdateFormData(מידע חדש) {
 setFormData((הקודם) => {
לַחֲזוֹר { ...prev, ...newData };
 });
 }
פוּנקצִיָהב-Submit() {
לְנַחֵם.log (formData);
 }
לַחֲזוֹר (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

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

פוּנקצִיָהטופס כניסה({ onSubmit, data, updateData }) {
פוּנקצִיָהhandleSubmit(ה) {
 e.preventDefault();
 onSubmit();
 }
לַחֲזוֹר (


"אימייל">אימייל</label>
 סוג="אימייל"
 id="אימייל"
 value={data.email}
 onChange={(e) => updateData({ אימייל: e.target.value })}
 />
"סיסמה">סיסמה</label>
 סוג="סיסמה"
 id="סיסמה"
 value={data.password}
 onChange={(e) => updateData({ סיסמה: e.target.value })}
 />
"שלח">שלח</button>
 </form>
 );
}

במקום לנהל את המדינה על רכיב האב, עדיף להעביר את המדינה אליה LoginForm.js, שם תשתמש בקוד. פעולה זו הופכת כל רכיב לעצמאי ואינו תלוי ברכיב אחר (כלומר האב) עבור נתונים. להלן הגרסה המעודכנת של טופס כניסה:

יְבוּא { useRef } מ"לְהָגִיב";
פוּנקצִיָהטופס כניסה({ onSubmit }) {
const emailRef = useRef();
const passwordRef = useRef();

פוּנקצִיָהhandleSubmit(ה) {
 e.preventDefault();
 onSubmit({
 דוא"ל: emailRef.current.value,
 סיסמה: passwordRef.current.value,
 });
 }
לַחֲזוֹר (


"אימייל">אימייל</label>
"אימייל" id="אימייל" ref={emailRef} />
"סיסמה">סיסמה</label>
"סיסמה" id="סיסמה" ref={passwordRef} />
"שלח">שלח</button>
 </form>
 );
}

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

ברכיב האב (App.js), אתה יכול להסיר גם את המצב הגלובלי וגם updateFormData() שיטה כי אתה כבר לא צריך את זה. הפונקציה היחידה שנותרה היא onSubmit(), שאתה מפעיל מתוך ה טופס כניסה רכיב לרישום פרטי הכניסה במסוף.

פוּנקצִיָהאפליקציה() {
פוּנקצִיָהב-Submit(טופס מידע) {
לְנַחֵם.log (formData);
 }
לַחֲזוֹר (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

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

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

טיפול ב-Shared State

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

דוגמה לכך היא שיש א TodoContainer רכיב אב עם שני רכיבי צאצא: רשימת מטלות ו TodoCount.

פוּנקצִיָהTodoContainer() {
const [todos, setTodos] = useState([])
לַחֲזוֹר (
 <>


 </>
 )
}

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

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

עבור יישומים גדולים, ניהול המדינה רק עם useState() וו יכול להתגלות כקשה. במקרים כאלה, ייתכן שיהיה עליך לבחור ב- ממשק API של React Context אוֹ תגובה Redux לנהל את המדינה בצורה יעילה.

למידע נוסף על React Hooks

ווים מהווים את הבסיס של React. על ידי שימוש ב-hooks ב-React, אתה יכול להימנע מכתיבת קוד ארוך שאחרת היה משתמש בשיעורים. ה- useState() הוא ללא ספק ה-React Hook הנפוץ ביותר, אך ישנם רבים אחרים כגון useEffect(), useRef() ו-useContext().

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