Kontekst w React

Zanim przejdziemy do nauki następnego hooka, musimy rozważyć pojęcie kontekstu w React.

Zwykle przekazywaliśmy dane od komponentów rodzicielskich do komponentów potomnych za pomocą propsów. Ta metoda jest dobra, jeśli masz niewiele komponentów i nie musisz przerzucać propsów od komponentu rodzicielskiego do potrzebnego komponentu przez komponenty potomne więcej niż 2-3 razy.

Ta metoda może również stać się wyjątkowo niewygodna i prowadzić do różnych problemów, jeśli w komponentach pośrednich te propsy w ogóle nie są używane (taki problem nazywa się prop drilling), lub musisz przekazywać te same dane dużej liczbie komponentów.

W tych przypadkach może nam pomóc kontekst, który pozwala udostępnić dane komponentu rodzicielskiego dla dowolnego komponentu potomnego, niezależnie od jego położenia w drzewie komponentów, bez przekazywania ich przez propsy. Odpowiednio, dane będą przyjmować tylko te komponenty, które ich potrzebują.

Aby skorzystać z kontekstu, trzeba go utworzyć. Na początek utwórzmy plik MyContext.js i zaimportujmy do niego funkcję createContext:

import { createContext } from 'react';

Teraz utwórzmy obiekt kontekstu, zapiszmy go w zmiennej MyContext, której nie zapomnijmy wyeksportować. W naszym przypadku, ustawiliśmy w createContext wartość początkową null, ponieważ nie jest to dla nas istotne (można było zostawić po prostu puste nawiasy). Ustawiona wartość domyślna pojawi się przy odczycie kontekstu, jeśli nie zostanie znaleziona żadna inna. Ta wartość może być dowolnego typu:

export const MyContext = createContext(null);

W następnej lekcji utworzymy aplikację z kilku komponentów, znajdujących się w osobnych plikach. Gdyby wszystkie komponenty były w jednym pliku, to do utworzenia kontekstu nie robilibyśmy osobnego pliku i nie eksportowalibyśmy go.

Teraz zaimportujmy MyContext.js do pustego komponentu App - do komponentu, z którego zamierzamy przekazywać dane:

import { MyContext } from './MyContext.js';

Utwórz plik MyContext.js i zaimportuj go do pustego komponentu App, jak opisano w lekcji.