Kas ir useContext React?

useContext - tas ir React hauss, kas ļauj funkcionālajām komponentēm abonēt izmaiņas kontekstā. Tas nodrošina datu nodošanas veidu caur komponentu koku bez nepieciešamības skaidri nodot propus katrā līmenī.

Darba princips:

1. Konteksta izveide: Izmanto React.createContext() konteksta objekta izveidei. Šis objekts satur Provider un Consumer (vai useContext funkcijās komponentēs).
2. Vērtības nodrošināšana: Konteksta Provider aptver komponentu koku, kam nepieciešama piekļuve vērtībai. Ar value prop tiek nodota vērtība, kas būs pieejama visiem abonentiem.
3. Vērtības saņemšana: useContext(MyContext) tiek izsaukts funkcijas komponentā, kur MyContext ir iepriekš izveidots konteksts. Huks atgriež pašreizējo konteksta vērtību. Kad konteksta vērtība mainās, komponents, kas izmanto useContext, automātiski tiek pārrenderēts.

Priekšrocības:

• Viegla datu nodošana: Izslēdz nepieciešamību prop drilling - nodot propus caur daudzām starpkomponentēm.
• Globālais stāvoklis: Ērti pārvaldīt globālo stāvokli (piemēram, tēma, autentifikācija, lokalizācija).
• Veiktspēja: React optimizē useContext lietojošo komponentu pārrenderēšanu, pārrenderējot tikai tos, kas ir abonējuši šo kontekstu.

Trūkumi:

• Dēbugošanas sarežģītība: Sekot, no kurienes nāk konteksta vērtība, var būt sarežģītāk nekā ar propiem.
• Veiktspēja biežu atjauninājumu gadījumā: Ja konteksta vērtība tiek bieži atjaunināta, tas var novest pie biežiem visu abonēto komponentu pārrenderēšanas.

Piemērs:

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

// 1. Konteksta izveide
const ThemeContext = createContext('light');

// Piegādātāja komponente
function ThemeProvider({ children }) {
  const theme = 'dark'; // Piemēra vērtība
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Konteksta lietošanas komponente
function ThemedComponent() {
  // 3. Vērtības saņemšana
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>Tēma: {theme}</div>;
}

// Lietošana
function App() {
  return (
    <ThemeProvider> {/* 2. Vērtības nodrošināšana */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;