Kas yra useContext React?

useContext - tai React kabliukas, leidžiantis funkciniams komponentams prenumeruoti konteksto pokyčius. Jis suteikia būdą perduoti duomenis per komponentų medį be būtinybės aiškiai perduoti props kiekviename lygyje.

Veikimo principas:

1. Konteksto sukūrimas: Naudojama React.createContext() konteksto objekto sukūrimui. Šis objektas apima Provider ir Consumer (arba useContext naudojimą funkciniuose komponentuose).
2. Reikšmės teikimas: Konteksto Provider apgaubia komponentų medį, kuriems reikia prieigos prie reikšmės. Per value prop perduodama reikšmė, kuri bus prieinama visiems prenumeruojantiems komponentams.
3. Reikšmės gavimas: useContext(MyContext) kviečiamas funkciniame komponente, kur MyContext yra anksčiau sukurtas kontekstas. Hukas grąžina dabartinę konteksto reikšmę. Kai konteksto reikšmė keičiasi, naudojantis useContext komponentas automatiškai perrenderinamas.

Privalumai:

• Lengvas duomenų perdavimas: Pašalina poreikį prop drilling - perduoti props per daug tarpininkaujančių komponentų.
• Globalus būsenos valdymas: Patogu valdyti globalią būseną (pvz., temos, autentifikacijos, lokalizacijos).
• Našumas: React optimizuoja useContext naudojančių komponentų perrenderinimą, perrenderindamas tik tuos, kurie prenumeruoja šį kontekstą.

Trūkumai:

• Derinimo sudėtingumas: Sekti, iš kur ateina konteksto reikšmė, gali būti sudėtingiau nei su props.
• Našumas dažnų atnaujinimų atveju: Jei konteksto reikšmė dažnai keičiasi, tai gali sukelti dažnus visų prenumeruojančių komponentų perrenderinimus.

Pavyzdys:

import React, { createContext, useContext } from 'react';

// 1. Konteksto sukūrimas
const ThemeContext = createContext('light');

// Teikėjo komponentas
function ThemeProvider({ children }) {
  const theme = 'dark'; // Pavyzdinė reikšmė
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Konteksto naudojimo komponentas
function ThemedComponent() {
  // 3. Reikšmės gavimas
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>Tema: {theme}</div>;
}

// Naudojimas
function App() {
  return (
    <ThemeProvider> {/* 2. Reikšmės teikimas */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;