ממשק API של React Context הוא כלי לניהול מצב המשמש לשיתוף נתונים בין רכיבי React. גלה כיצד להשתמש ב-Context API כדי לעקוב אחר משתמשים מאומתים ברכיבים פונקציונליים.

מהו ממשק API של React Context?

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

לדוגמה, ייתכן שתרצה לשתף את שם המשתמש של המשתמש הנוכחי מה- התחברות רכיב לרכיבים אחרים ביישום שלך. הֶקשֵׁר מקל על שיתוף שם המשתמש על ידי ביטול הצורך להעביר נתונים דרך כל רכיב בעץ הרכיבים.

מתי כדאי להשתמש ב-React Context API?

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

שימוש בהקשר כדי לעקוב אחר מצב אימות המשתמש

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

createContext()

כדי להתחיל עם ה-Context API, תחילה עליך ליצור אותו באמצעות תחביר זה.

const Context = React.createContext (defaultValue);

ערך ברירת המחדל מיותר ומשמש בדרך כלל למטרות בדיקה.

ספק

לכל הקשר יש ספק שמקבל ערך הנצרך מהרכיבים שהוא עוטף. זה מאפשר לרכיבים אלה להירשם לשינויי הקשר.

useContext

useContext() הוא וו תגובה המאפשר לרכיבים לצרוך הקשר. אתה רק צריך לעבור בהקשר.

const contextValue = useContext (הקשר)

כעת ניצור את הקשר האימות כדי לעקוב אחר מצב האימות.

התחל ביצירת קובץ חדש, AuthContext.js, והוסיפו את הדברים הבאים.

ייבוא ​​{ createContext } מ-"react";
const AuthContext = createContext();
ייצוא ברירת מחדל AuthContext;

לאחר מכן, צור AuthProvider.js ולהוסיף את פונקציית הספק.

ייבוא ​​{ useState, useEffect } מ-'react';
יבא את { getUser } מ-'./auth.js'
ייבוא ​​AuthContext מ-'./AuthContext'
ייצוא const AuthProvider = ({ ילדים }) => {
 const [משתמש, setUser] = useState (null);
 useEffect(() => {
 const currentUser = getUser()
 setUser (currentUser)
 }, []);
לחזור (
{יְלָדִים}
 );
 };

הנה, אתה מחזיר את המשתמש הנוכחי מזיוף getUser() פוּנקצִיָה. ביישום אמיתי, זה יהיה שירות הקצה שלך.

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

AuthProvider.js גם מקבל את הילדים עם גישה להקשר.

השלב הבא הוא ליצור וו מותאם אישית שיאפשר לרכיבים עטופים עם הספק לגשת להקשר.

צור קובץ חדש useAuthContext.js והוסיפו את הדברים הבאים.

ייבוא ​​AuthContext מ-"./AuthContext";
const useAuthContext.js = () => {
 const user = useContext (AuthContext);
 if (משתמש לא מוגדר) {
 throw new Error("ניתן להשתמש ב-useAuthContext רק בתוך AuthProvider");
 }
 משתמש חוזר;
};

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

השלב האחרון הוא לעטוף את הרכיבים באמצעות הקשר עם AuthProvider.js.

ייבוא ​​{ AuthProvider } מ-"./AuthContext";
ReactDOM.render(




,
 rootElement
);

הנה דוגמה לאופן שבו תשתמש בהקשר כדי להגן על דף מפני משתמשים לא מאומתים.

ייבוא ​​useAuthContext מ-"./useAuthContext";
ייבוא ​​{ ניווט } מ-"react-router-dom";
const Profile = () => {
 const { user } = useAuthContext();
 if (!user) {
 לַחֲזוֹר ;
 }
 לחזור (
 <>
פּרוֹפִיל

 );
};

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

מתי לא להשתמש ב-React Context API

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

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

קרא הבא

על הסופר