אחד הדברים השימושיים באפליקציות ריאקט ובכלל, הוא global state management, שהוא למעשה האובייקט הלוקלי של האפליקציה שלכם שמחזיק בתוכו את המידע של היואיי , ואחד היותר שימושיים בריאקט הוא react context . אז כמובן , ריאקט השמישו HOOK מתאים , שהינו useContext.
אז מה זה useContext ? \ react Context
ריאקט יישמו מנגנון של global state management בטכנולוגיה שלהם, ישנם אפשרויות שונות ל GSM כמו Redux שהינו מאד פופולארי . מה שמאפשר לכם להנל מידע מעל כל הריכיבים ולתקשר בעזרת המידע בין כולם. למשל תרצו שרכיב אחד ידע לקבל מידע ואם מידע זה משתנה מחוץ לרכיב למשל ברכיב אחר לגמרי, עדיין תרצו שאותו רכיב או כל רכיב אחד שעושה שימוש באותו המידע , יתעדכן בהתאם למידע הגלובלי.
להלן תרשים להמחשה:
איך משתשמשים ב useContext ?
להלן דוגמה והסבר בהמשך,
import React, { createContext, ReactElement, useState ,useEffect } from 'react' export const Context = createContext(); export function ContextProvider({ children }) { const [gameStatus, startGame] = useState(false); return ( <Context.Provider value={{gameStatus, startTheGame: startGame}}> {children} </Context.Provider> ) }
import React, { ReactElement, useContext } from 'react'; import logo from './logo.svg'; import './App.css'; import ButtonClicked from './buttonClicked'; import { Context } from './context'; function App(props: any): ReactElement<any> { const {startTheGame} = useContext(Context); return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <ButtonClicked /> <button onClick={()=>startTheGame(true)}>Start the Game</button> </header> </div> ); } export default App;
import React, { useContext, useEffect, useState } from 'react' import { Context } from './context'; export default function ButtonClicked() { const [totalCrocs, addCrocs] = useState(0); const {gameStatus} = useContext(Context); useEffect(() => { },[totalCrocs]); useEffect(() => { return () =>{ addCrocs(4) } }, []); return ( <div> <p> {totalCrocs} </p> <button disabled={!gameStatus} onClick={()=>addCrocs(totalCrocs+1)}> click me </button> </div> ) }
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { ContextProvider } from './context'; ReactDOM.render( <React.StrictMode> <ContextProvider> <App /> </ContextProvider> </React.StrictMode>, document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();
הרבה קבצים , אבל זה מאד פשוט ככה,
- למעשה יש לנו קובץ (הקובץ הראשון) שמטפל ב createContext שממנו נשאב את הcontext בעזרת useContext .
- משמה נמשיך לindex.tsx ונעטוף את כל APP בcontext שיצרו , כן שזה מאפשר לנו להשתמש בתוך app בuseContext.
- APP עושה את השימוש שמעדכן את את המידע בעזרת הפונקציה startTheGame
- והרכיב שגם מאזין גם כן ל context , למשתנה gameStatus.
הערה חשובה,
לרוב תראו שעוטפים בתוך APP עם provider אבל אז לא תוכלו לעשות שימוש בuseContext בAPP. ולכן עטפנו עם provider בקובץ אינדקס. יש אפשרות לעטוף חלקים מהאפליקציה כמובן אבל זה כבר הסבר יותר מעמיק בפוסט אחר על שימוש ב context.
סיכום פוסט useContext
כפי שאתם רואים זה הוק יותר מורכב ואפילו ספציפי , לא תמיד תשתמשו בGSM ולא תמיד תבחרו את context של react . אבל כמובן שמפתחי ריאקט ירצו לתת פתרון נוח לטכנולוגיות שלהם. בהמשך נדבר על useReducer שגם עוזר לנו לעדכן מידע בצורה קצת יותר מתוחכמת.