Než se seznámíme s úžasnou funkcí kontextového API, musíme nejprve vědět, proč tento háček potřebujeme. Podobně jako hák useReducer je to pokročilý koncept React.
Vrtání podpěr
Existuje koncept zvaný Prop Drilling. Když vytváříme jakoukoli malou aplikaci, často se s ní nesetkáme. Jakmile ale začneme vyvíjet středně složitou webovou aplikaci, státní správa začne být opravdu únavná.
V poslední době pracuji na osobním projektu, zpočátku nebylo řízení státu tak těžké, ale jakmile jsem začal dělat různé nové komponenty a stránky, bylo trochu těžké to sledovat. I když jsem věděl o Context API a jiném konceptu zvaném Redux. Svůj projekt jsem nenaplánoval dostatečně dobře, abych je mohl použít, a měl jsem s tím problém.
Proč to řekl? No, co jsem v podstatě musel udělat, bylo vrtání vrtulí.
Když je funkce nebo stav deklarován v nejvyšší úrovni stromu komponent a je předán dolů do dolní části stromu s alespoň některými komponentami mezi deklarovanou komponentou a požadovanými komponentami, nazývá se to Prop Drilling.
Myslím tím, že máte stav nazvaný userpost a funkci setUserPost a byl deklarován na stránce indexu, kde máte další komponentu s názvem Feed. Nyní má tato komponenta Feed v sobě další komponentu nazvanou FeedForm.
Potřebujete státní uživatelský příspěvek ve formuláři FeedForm, který byl deklarován na stránce indexu. Jak to získáme? Nejprve jej musíme odeslat do komponenty Feed a poté jej odešleme do komponenty FeedForm.
Protože se jedná o relativně malou mezeru, nemusíte si toho všimnout. Ale představte si velkou webovou aplikaci, která má více různých komponent. Předpokládám, že obrázek chápete. Komponenty mezi deklarovanými a požadovanými komponentami nepotřebují stav, přesto musí získat přístup k prop, aby jej mohly odeslat další komponentě.
Zde přichází na řadu koncepty jako Context API a Redux.
Kontextové API nebo useContext Hook
Takže, jak jsem již řekl, tento háček nám pomáhá spravovat stavy mnohem snadněji. Ačkoli se počáteční deklarace a způsob jejího vyvolání může rozšířit na 3-4 řádky kódu navíc, nakonec řeší problém vrtání podpěr.
Zpočátku musíme importovat háček createContext z Reag.
Poté máme přístup ke komponentě s názvem Provider. Je to jako distributor, který je obalený kolem kořenové komponenty, často je to hlavní aplikace nebo směrování.
Je zabalena pomocí proměnné Name.Provider.
Příklad použití ContextAPI:
import { createContext, useReducer } from "react";
import RouteConfig from "./Router";
import { reducer, initialState } from "./reducers/userReducer";
export const UserContext = createContext();
const App = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<UserContext.Provider value={{ state, dispatch }}>
<RouteConfig UserContext={UserContext} />
</UserContext.Provider>
);
};
export default App;
Jakmile je kořenová komponenta zabalena, můžeme ji snadno importovat do jiných komponent. Musíme jen importovat useContext Hook a poté zavolat stav a odeslat s ním.
//Inside A different component
import React, { useContext, useEffect } from "react";
import { UserContext } from "../../App";
const Example =()=>{
const { state, dispatch } = useContext(UserContext);
return (
console.log(state)
)
}
Z výše uvedeného kódu můžeme použít stav a odeslání, jak chceme, a představit si to jako několik úrovní hluboko uvnitř stromu DOM.
Dejte mi vědět své myšlenky a sledujte můj Twitter a LinkedIn.