28. Czym jest kontekst w React i jak go używać?

Czym jest kontekst w React i jak go używać?

Kontekst w React umożliwia przekazywanie danych w drzewie komponentów bez konieczności ręcznego przekazywania propsów na każdym poziomie. Jest zaprojektowany do udostępniania danych, które mogą być uznawane za 'globalne' dla drzewa komponentów React, takich jak obecnie uwierzytelniony użytkownik, motyw czy preferowany język.

Jak stworzyć i używać kontekstu w React

1. Stwórz Kontekst: Użyj React.createContext(), aby stworzyć obiekt kontekstu. Obiekt kontekstu zawiera Provider i Consumer, ale we współczesnym React częściej używa się hooka useContext zamiast Consumer.

   import React from 'react';
   
   const ThemeContext = React.createContext('light');

2. Udostępnij Kontekst: Użyj Provider, aby udostępnić wartość kontekstu wszystkim komponentom dzieciom.

   function App() {
     return (
       <ThemeContext.Provider value="dark">
         <Toolbar />
       </ThemeContext.Provider>
     );
   }

3. Konsumuj Kontekst: Uzyskaj dostęp do wartości kontekstu używając hooka useContext.

   import React, { useContext } from 'react';
   
   function Toolbar() {
     const theme = useContext(ThemeContext);
     return <div style={{ background: theme === 'dark' ? '#333' : '#FFF' }}>Toolbar</div>;
   }

Korzyści z używania kontekstu w React

• Efektywność: Unika przekazywania propsów przez wiele poziomów, co ułatwia zarządzanie stanami, które muszą być dostępne dla wielu komponentów.
• Przejrzystość: Kontekst może sprawić, że struktura aplikacji będzie bardziej intuicyjna dzięki grupowaniu powiązanych wartości.

Rozważania

Chociaż kontekst jest potężny, powinien być używany oszczędnie, ponieważ może skomplikować ponowne użycie komponentów. W małych i średnich aplikacjach działa dobrze, ale dla bardziej rozbudowanego zarządzania stanem, biblioteki takie jak Redux mogą być bardziej odpowiednie.