createContext

const SomeContext = createContext(defaultValue)

• Reference
  • createContext(defaultValue)
  • SomeContext.Provider
  • SomeContext.Consumer
• שימוש
  • יצירת context
  • ייבוא וייצוא context מקובץ
• פתרון תקלות
  • אני לא מוצא דרך לשנות את ערך ה-context

Reference

createContext(defaultValue)

קראו ל-createContext מחוץ לכל קומפוננטה כדי ליצור context.

import { createContext } from 'react';

const ThemeContext = createContext('light');

ראו דוגמאות נוספות בהמשך.

Parameters

• defaultValue: הערך שתרצו של-context יהיה כשאין context provider תואם בעץ מעל הקומפוננטה שקוראת את ה-context. אם אין לכם ערך ברירת מחדל משמעותי, ציינו null. ערך ברירת המחדל מיועד כ-fallback של “מוצא אחרון”. הוא סטטי ולעולם לא משתנה לאורך הזמן.

Returns

createContext מחזירה אובייקט context.

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

• SomeContext.Provider מאפשר לספק את ערך ה-context לקומפוננטות.
• SomeContext.Consumer הוא דרך חלופית ונדירה לקרוא את ערך ה-context.

SomeContext.Provider

עטפו את הקומפוננטות שלכם ב-context provider כדי לציין את ערך ה-context הזה לכל הקומפוננטות בתוכו:

function App() {
  const [theme, setTheme] = useState('light');
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

Props

• value: הערך שברצונכם להעביר לכל הקומפוננטות שקוראות את ה-context הזה בתוך ה-provider הזה, לא משנה כמה עמוק. ערך ה-context יכול להיות מכל סוג. קומפוננטה שקוראת ל-useContext(SomeContext) בתוך ה-provider תקבל את ה-value של ה-context provider התואם הפנימי ביותר שמעליה.

SomeContext.Consumer

לפני ש-useContext הייתה קיימת, הייתה דרך ישנה יותר לקרוא context:

function Button() {
  // 🟡 Legacy way (not recommended)
  return (
    <ThemeContext.Consumer>
      {theme => (
        <button className={theme} />
      )}
    </ThemeContext.Consumer>
  );
}

למרות שהדרך הישנה הזו עדיין עובדת, קוד חדש צריך לקרוא context בעזרת useContext() במקום:

function Button() {
  // ✅ Recommended way
  const theme = useContext(ThemeContext);
  return <button className={theme} />;
}

Props

• children: פונקציה. React תקרא לפונקציה שתעבירו עם ערך ה-context הנוכחי שנקבע על ידי אותו אלגוריתם שבו משתמשת useContext(), ותרנדר את התוצאה שתחזירו מהפונקציה הזו. React גם תריץ את הפונקציה הזו שוב ותעדכן את ה-UI בכל פעם שה-context מהקומפוננטות ההורה משתנה.

שימוש

יצירת context

Context מאפשר לקומפוננטות להעביר מידע עמוק יותר בעץ בלי להעביר props במפורש.

קראו ל-createContext מחוץ לכל קומפוננטה כדי ליצור context אחד או יותר.

import { createContext } from 'react';

const ThemeContext = createContext('light');
const AuthContext = createContext(null);

createContext מחזירה אובייקט context. קומפוננטות יכולות לקרוא context על ידי העברתו ל-useContext():

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

function Profile() {
  const currentUser = useContext(AuthContext);
  // ...
}

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

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

function App() {
  const [theme, setTheme] = useState('dark');
  const [currentUser, setCurrentUser] = useState({ name: 'Taylor' });

  // ...

  return (
    <ThemeContext.Provider value={theme}>
      <AuthContext.Provider value={currentUser}>
        <Page />
      </AuthContext.Provider>
    </ThemeContext.Provider>
  );
}

עכשיו קומפוננטת Page וכל קומפוננטה בתוכה, לא משנה כמה עמוק, “יראו” את ערכי ה-context שהועברו. אם ערכי ה-context משתנים, React תרנדר מחדש גם את הקומפוננטות שקוראות את ה-context.

קראו עוד על קריאה וסיפוק context וראו דוגמאות.

ייבוא וייצוא context מקובץ

לעיתים קרובות קומפוננטות בקבצים שונים צריכות גישה לאותו context. לכן מקובל להצהיר על contexts בקובץ נפרד. לאחר מכן אפשר להשתמש ב-export statement כדי להפוך את ה-context לזמין לקבצים אחרים:

// Contexts.js
import { createContext } from 'react';

export const ThemeContext = createContext('light');
export const AuthContext = createContext(null);

קומפוננטות שמוצהרות בקבצים אחרים יכולות להשתמש ב-import כדי לקרוא או לספק את ה-context הזה:

// Button.js
import { ThemeContext } from './Contexts.js';

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

// App.js
import { ThemeContext, AuthContext } from './Contexts.js';

function App() {
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <AuthContext.Provider value={currentUser}>
        <Page />
      </AuthContext.Provider>
    </ThemeContext.Provider>
  );
}

זה עובד בדומה ל-ייבוא וייצוא קומפוננטות.

פתרון תקלות

אני לא מוצא דרך לשנות את ערך ה-context

קוד כזה מציין את ערך ה-context ברירת המחדל:

const ThemeContext = createContext('light');

הערך הזה לעולם לא משתנה. React משתמשת בו רק כ-fallback אם היא לא מוצאת provider תואם מעל.

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