Context Reactissa on tehokas ominaisuus, jonka avulla dataa voidaan jakaa komponenttien välillä ilman, että propseja tarvitsee välittää eksplisiittisesti jokaisella komponenttipuun tasolla. Contextin avulla voimme välittää tietoa alas komponenttihierarkiassa, jolloin se on helposti saatavilla mille tahansa komponentille, riippumatta sen sijainnista puussa.

Huomio

Aloitetaan perehtymällä syntaksiin. Tarjoamme vaiheittaisen oppaan, jotta ymmärrät jokaisen käsitteen matkan varrella. Contextin käyttö vaatii tiettyjen koodirakenteiden toteuttamista eri komponenttitasoilla. Kun olemme käyneet syntaksin perusteellisesti läpi, siirrymme käytännön esimerkkiin.

Syntaksi:

1. vaihe: Luomme uuden Contextin käyttämällä React-kirjaston createContext()-funktiota ja tallennamme sen muuttujaan. Tämä tehdään sovelluksen ylimmällä tasolla. Tyypillisesti tämä tehdään erillisessä tiedostossa (esim. context.js). Tämä tiedosto vastaa Context-olion määrittelystä.

context.js

import { createContext } from "react";

// Create a new React context using the `createContext` function.
const Context = createContext();

// Export the created context so that it can be used in other parts of the application.
export default Context;

2. vaihe: App-tiedostossa kaikki komponentit, jotka tarvitsevat pääsyn jaettuun dataan, kääritään luodun Provider-olion Context-komponenttiin. Provider-komponentin avulla voidaan määrittää kontekstin arvo ja tehdä se saataville kaikille lapsikomponenteille, jotka käyttävät kyseistä kontekstia.

App.jsx

import React from "react";

// Import the `Context` object from `../context`.
import Context from "../context";

// Import child components that need access to the shared data.
import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  return (
    // Wrap the child components with `Context.Provider`.
    <Context.Provider>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

3. vaihe: App-tiedostossa tulee myös tarjota kontekstidata. Tämä tehdään käyttämällä value-komponentin Context.Provider-propia. Kaikki tarvittava data asetetaan value-propille.

App.jsx

import React from "react";

import Context from "../context";

import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  // Define any data that you want to share across child components.
  const sharedData = "Some shared data";

  return (
    // Provide the shared data as a value to `Context.Provider`.
    <Context.Provider value={sharedData}>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

4. vaihe: Lapsikomponenteissa (ChildCompOne tai ChildCompTwo) jaettu data voidaan hakea useContext-hookin avulla. useContext-hookille annetaan argumenttina luotu Context-olio tiedostosta context.js.

ChildCompOne.jsx

import React, { useContext } from "react";

// Import the `Context` object from "../context"
import Context from "../context";

const ChildComponentOne = () => {
  // Use the `useContext` hook to access data from the `Context`
  const data = useContext(Context);

  // You can now use the shared data in this component

  return <div>{data} in the first component</div>;
};

export default ChildComponentOne;

Koko sovelluksen koodi:

Huomio

Käy jokainen vaihe huolellisesti läpi, avaa jokainen tiedosto ja kansio varmistaaksesi, että ymmärrät prosessin selkeästi. Seuraavassa luvussa jatketaan esimerkillä, jossa yhdistetään Context ja hookit. Näin näet, miten nämä käsitteet toimivat yhdessä käytännössä.