Mis on useContext Reactis?

useContext - see on Reacti haak, mis võimaldab funktsionaalsetel komponentidel registreeruda konteksti muudatustele. See pakub viisi andmete edastamiseks komponentide puus ilma, et peaks selgelt propse igal tasandil edasi andma.

Tööpõhimõte:

1. Konteksti loomine: Kasutatakse React.createContext() konteksti objekti loomiseks. See objekt sisaldab Providerit ja Consumerit (või kasutatakse useContext funktsionaalsetes komponentides).
2. Väärtuse pakkumine: Konteksti Provider ümbritseb komponentide puu, millele on vaja väärtusele juurdepääsu. value prop kaudu antakse väärtus, mis on kättesaadav kõigile tellitud komponentidele.
3. Väärtuse saamine: useContext(MyContext) kutsutakse funktsionaalses komponendis, kus MyContext on eelnevalt loodud kontekst. Hook tagastab praeguse konteksti väärtuse. Kui konteksti väärtus muutub, renderdatakse kasutav komponent automaatselt uuesti.

Eelised:

• Lihtne andmete edastamine: Eemaldab vajaduse prop drilling-i, st propide edastamise paljude vahekomponentide kaudu.
• Globaalse oleku haldamine: Mugav globaalse oleku (nt teema, autentimine, lokaliseerimine) haldamiseks.
• Tõhusus: React optimeerib useContext kasutavate komponentide uuesti renderdamist, uuendades ainult neid, mis on selle konteksti muutustele registreeritud.

Puudused:

• Debugimise keerukus: Konteksti väärtuse päritolu jälgimine võib olla keerulisem kui propide puhul.
• Tõhusus sagedaste uuenduste korral: Kui konteksti väärtus uuendatakse väga sageli, võib see põhjustada kõigi registreeritud komponentide sagedase uuesti renderdamise.

Näide:

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

// 1. Konteksti loomine
const ThemeContext = createContext('light');

// Pakkuva komponendi
function ThemeProvider({ children }) {
  const theme = 'dark'; // Näidise väärtus
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Konteksti kasutav komponent
function ThemedComponent() {
  // 3. Väärtuse saamine
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>Teema: {theme}</div>;
}

// Kasutamine
function App() {
  return (
    <ThemeProvider> {/* 2. Väärtuse pakkumine */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;