Kontext i React

Innan vi går vidare till studiet av nästa hook måste vi överväga begreppet kontext i React.

Vanligtvis har vi skickat data från föräldrakomponenter till barnkomponenter med hjälp av props. Denna metod är bra om du inte har många komponenter och du inte behöver skicka props från föräldern till den önskade komponenten genom barnkomponenter mer än 2-3 gånger.

Denna metod kan också bli extremt obekväm och leda till olika problem, om dessa props inte används alls i mellankomponenterna (ett sådant problem kallas prop drilling), eller om du behöver skicka samma data till ett stort antal komponenter.

I dessa fall kan kontext hjälpa oss, som gör föräldrakomponentens data tillgänglig för alla barnkomponenter, oavsett deras placering i komponentträdet, utan att skicka dem via props. Följaktligen kommer endast de komponenter som behöver datan att ta emot den.

För att använda kontext måste du skapa den. Låt oss först skapa en fil MyContext.js och importera funktionen createContext till den:

import { createContext } from 'react';

Låt oss nu skapa ett kontextobjekt, spara det i variabeln MyContext, som vi inte får glömma att exportera. I vårt fall satte vi initialvärdet i createContext till null, eftersom det inte är viktigt för oss (kunde ha lämnat bara tomma parenteser). Standardvärdet kommer att visas när kontexten läses om inga andra värden hittas. Detta värde kan vara av vilken typ som helst:

export const MyContext = createContext(null);

I nästa lektion kommer vi att skapa en applikation med flera komponenter placerade i separata filer. Om alla komponenter var i en fil, skulle vi inte skapa en separat fil för kontexten och inte exportera den.

Låt oss nu importera MyContext.js till en tom komponent App - till den komponent från vilken vi tänker skicka data:

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

Skapa en fil MyContext.js och importera den till en tom komponent App, enligt beskrivningen i lektionen.