Kontekstin käyttäminen useContextilla
Lukekaa kontekstin arvot mistä tahansa sisäkkäisestä komponentista useContext-hookilla ilman props-ominaisuuksien välittämistä välikomponenttien läpi.
Kontekstin käyttäminen useContextilla on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Contextin lukeminen useContextilla
useContext(ContextObject)-hookin avulla mikä tahansa funktiokomponentti voi tilata contextin ja lukea sen nykyisen arvon. Se korvaa vanhemman Consumer render prop -mallin yksinkertaisella hook-kutsulla. Komponentti renderöidään automaattisesti uudelleen aina, kun contextin arvo muuttuu.
import { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';
function Header() {
const { theme } = useContext(ThemeContext);
return (
<View style={{ backgroundColor: theme === 'dark' ? '#1a1a2e' : '#fff' }}>
<Text>My App</Text>
</View>
);
}Prop-arvojen välittämistä ei tarvita
useContextin tärkein hyöty on, ettei käyttävän komponentin tarvitse vastaanottaa prop-arvoja vanhemmaltaan. Edellisen esimerkin Header-komponentti voi sijaita missä tahansa puun osassa — kolme tasoa syvemmällä, modaalin sisällä tai kokonaan eri haarassa — ja se voi silti lukea saman teema-arvon suoraan contextista.
// Without context: theme prop drills through App→Screen→Section→Card→Header
// With context: Header reads theme directly from context
function DeepComponent() {
const { user } = useContext(AuthContext); // no props needed
return <Text>Welcome, {user.name}</Text>;
}Toimintojen kutsuminen contextista
Context voi tarjota datan lisäksi myös funktioita, jotka päivittävät dataa. Kutsukaa näitä funktioita suoraan käyttävästä komponentista tarvitsematta tietää, missä tila sijaitsee. Provider huolehtii tilan päivityksestä, ja kaikki arvosta riippuvat käyttäjäkomponentit renderöidään automaattisesti uudelleen.
function LogoutButton() {
const { logout } = useContext(AuthContext);
return (
<Button title='Sign Out' onPress={logout} />
);
}Useiden contextien käyttäminen yhdessä komponentissa
Komponentti voi käyttää useita contexteja kutsumalla useContext-hookia useita kertoja eri context-objektien kanssa. Jokainen kutsu on itsenäinen — ThemeContextin muutos aiheuttaa uudelleenrenderöinnin vain ThemeContextia käyttävissä komponenteissa, ei AuthContextia käyttävissä komponenteissa, elleivät ne ole riippuvaisia myös ThemeContextista.
function ProfileScreen() {
const { user } = useContext(AuthContext);
const { theme } = useContext(ThemeContext);
return (
<View style={styles[theme]}>
<Text style={styles[theme + 'Text']}>
{user.name}
</Text>
</View>
);
}Contextin arvo on viimeisimmän renderöinnin arvo
useContext antaa aina lähimmän vastaavan Providerin tarjoaman uusimman arvon. Kun Provider renderöidään uudelleen uuden arvon kanssa, React välittää päivityksen välittömästi kaikille käyttäjäkomponenteille, vaikka Providerin ja käyttäjän välissä olevia komponentteja ei olisi renderöity uudelleen. Tämä on yksi tärkeistä eduista verrattuna prop-arvojen välittämiseen sellaisten välikomponenttien kautta, jotka eivät välttämättä renderöidy.
useAuth-mukautetun hookin luominen
Sen sijaan että tuotaisiin ja kutsuttaisiin useContext(AuthContext)-funktiota jokaisessa komponentissa, kääritään se mukautettuun useAuth-hookiin. Tämä piilottaa context-objektin tuonnin, tekee kutsuvasta koodista luettavampaa ja mahdollistaa virhetarkistusten tai johdettujen arvojen lisäämisen yhteen paikkaan.
// context/AuthContext.js
export function useAuth() {
const ctx = useContext(AuthContext);
if (!ctx) throw new Error('useAuth must be inside AuthProvider');
return ctx;
}
// In any component
function NavBar() {
const { user, logout } = useAuth(); // clean and simple
return <Text>{user.email}</Text>;
}Reittien suojaaminen contextilla
Yleinen malli on lukea todennustila contextista ja renderöidä ehdollisesti joko todennetun käyttäjän sovelluspino tai kirjautumisnäkymä. Juurinavigaattori lukee user-arvon AuthContextista — kun user on null, se renderöi todennusnäkymät, ja kun arvolla on sisältöä, se renderöi sovelluksen päänäkymät.
function RootNavigator() {
const { user } = useAuth();
return (
<NavigationContainer>
{user ? <AppStack /> : <AuthStack />}
</NavigationContainer>
);
}Ehdollinen renderöinti contextin perusteella
Komponentit voivat käyttää context-arvoja renderöintipäätösten tekemiseen. Premium-ominaisuuden komponentti tarkistaa käyttäjän tilaustason contextista ja renderöi joko koko ominaisuuden tai maksumuurin toimintakehotteen. Tämä logiikka kuuluu käyttävälle komponentille, jolloin Provider pysyy yleiskäyttöisenä ja uudelleenkäytettävänä.
function PremiumFeature({ children }) {
const { user } = useAuth();
const isPro = user?.subscription === 'pro';
if (!isPro) {
return <UpgradePrompt />;
}
return children;
}Context luettelokohteissa
Context toimii myös FlatListin renderItem-komponenteissa. Kukin luettelokohde voi lukea contextista ilman prop-arvoja. Huomioikaa, että context-arvon muuttuessa jokainen näkyvä luettelokohde renderöidään uudelleen — käyttäkää React.memoa ja varmistakaa, että context-arvo on vakaa (memoisoitu), jotta vaikutus pysyy mahdollisimman pienenä.
const CartItem = React.memo(({ item }) => {
const { addToCart } = useContext(CartContext);
return (
<View style={styles.row}>
<Text>{item.name}</Text>
<Button title='Add' onPress={() => addToCart(item)} />
</View>
);
});Context vai props: milloin kumpaakin käytetään
Käyttäkää prop-arvoja datalle, jonka vanhempi luonnostaan omistaa ja joka liittyy suoraan lapsen näyttöön. Käyttäkää contextia globaaleihin tai poikkileikkaaviin huolenaiheisiin, kuten todennukseen, teemaan, kieleen ja ostoskorin tilaan. Contextin liiallinen käyttö paikalliseen dataan tekee komponenteista vaikeammin ymmärrettäviä ja erillään uudelleenkäytettäviä, koska niiden riippuvuudet ovat implisiittisiä eivätkä eksplisiittisiä.
useContextin palauttama arvo
useContext palauttaa täsmälleen sen arvon, joka välitettiin lähimmän Providerin value-propille. Jos komponentin yläpuolelta ei löydy Provideria, se palauttaa createContext()-funktiolle annetun oletusarvon. Hajottakaa palautettu objekti suoraan kutsukohdassa, jotta koodista tulee selkeämpää ja luettavampaa.
// Full value object
const themeContext = useContext(ThemeContext);
themeContext.theme; // 'light' or 'dark'
// Destructured (preferred)
const { theme, toggleTheme } = useContext(ThemeContext);
// From custom hook
const { user, login, logout } = useAuth();Pikatarkistus
Testatkaa tässä oppitunnissa oppimanne contextin käyttämisestä useContextilla.
Oppitunnin yhteenveto
Tässä oppitunnissa opitte, että useContext(ContextObject) lukee lähimmän Providerin arvon ilman prop-arvojen välittämistä komponenttiketjussa, komponentti voi käyttää useita contexteja kutsumalla useContextia useita kertoja ja useContextin kääriminen mukautettuun hookiin tarjoaa selkeän rajapinnan virhetarkistuksineen. Seuraavaksi rakennamme teemacontextin tumman tilan vaihtotoiminnolla.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Kontekstin käyttäminen useContextilla” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Kontekstin käyttäminen useContextilla”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Kontekstin käyttäminen useContextilla”?
Lukekaa kontekstin arvot mistä tahansa sisäkkäisestä komponentista useContext-hookilla ilman props-ominaisuuksien välittämistä välikomponenttien läpi. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Kontekstin käyttäminen useContextilla”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?
Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Kontekstin luominen ja tarjoaminen
- Kontekstin käyttäminen useContextilla
- Teemakonteksti ja tumman tilan vaihtokytkin
- Kontekstin suorituskykyongelmien välttäminen