useContext() Hook :Lad os forbruge det

Introduktion

I den foregående del har jeg forklaret om den grundlæggende idé bag useReducer() kroge. I denne artikel vil jeg forsøge at forklare om en anden nyttig hook useContext . Vi vil diskutere, hvordan man bruger hvad useContext er og hvordan man bruger det. Vi vil også diskutere Context API.

Problemet

Overvej en React-Native-applikation med indlejret komponent, og du skal videregive dataene til underordnet på nederste niveau. Lad mig forklare problemet med et simpelt kodeeksempel.

const App = () => {
  const [info, SetUserInfo] = useState({
    name: 'Rajshekhar',
    about: 'Mobile Application Developer',
  });
  return (
    <SafeAreaView style={styles.parent}>
      <Component1 userInfo={info} />
    </SafeAreaView>
  );
};
const Component1 = props => {
  return (
    <View style={styles.sectionContainer}>
      <Text style={styles.sectionTitle}>
        This is Level 1. We don't need user info
      </Text>
      <Component2 userInfo={props.userInfo}></Component2>
    </View>
  );
};
const Component2 = props => {
  return (
    <View style={styles.sectionContainer}>
      <Text style={styles.sectionSubtitle}>
        This is Level 2. We don't need user info
      </Text>
      <Component3 userInfo={props.userInfo}></Component3>
    </View>
  );
};
const Component3 = props => {
  return (
    <View style={styles.sectionContainer}>
      <Text style={styles.sectionDescription}>
        This is Level 3. I need the user info.
      </Text>
      <Text style={styles.sectionDescription}>Hi {props.userInfo.name}!!</Text>
    </View>
  );
};
  };

  return (
    <SafeAreaView style={styles.parent}>
      <Component1 userName={name} />
    </SafeAreaView>
  );
};

Som du kan se, skal vi udtrykkeligt videregive props til selv de komponenter, som ikke engang bruger det kun til at gøre dataene tilgængelige for hierarkiet nedenfor. Vi opretholder overheaden ved konstant at videregive props data i hele hierarkiet.

Jeg håber, du er i stand til at forstå problemet, som jeg forsøger at forklare med ovenstående kodestykke. For at løse dette problem har vi en redningsmand Context API .

Context API

Context API giver mulighed for at videregive dataene til komponenttræet uden at overføre dataene til alle niveauer. Context API reducerer koblingen mellem de ikke-relaterede komponenter. For at implementere Context ApI har vi brug for nedenstående ting

• Vi skal oprette en Context , ved hjælp af Reacts createContext() metode.
• Vi bruger Provider i komponenten på højt niveau for at angive kontekstværdien.
• Vi bruger derefter kontekstværdien ved hjælp af gengivelsesrekvisitter.

export const UserInfoContext = React.createContext();
const App = () => {
  const [info, SetUserInfo] = useState({
    name: 'Rajshekhar',
    about: 'Mobile Application Developer',
  });
  return (
    <SafeAreaView style={styles.parent}>
      <UserInfoContext.Provider value={info}>
        <Component1 />
      </UserInfoContext.Provider>
    </SafeAreaView>
  );
};

const Component3 = () => {
  return (
    <UserInfoContext.Consumer>
      {userInfo => {
        return (
          <View style={styles.sectionContainer}>
            <Text style={styles.sectionDescription}>
              This is Level 3. I need the user info.
            </Text>
            <Text style={styles.sectionDescription}>Hi {userInfo.name}!!</Text>
          </View>
        );
      }}
    </UserInfoContext.Consumer>
  );
};

Lad mig forklare dig ovenstående kodestykke.

• Jeg har oprettet en UserInfoContext ved at ringe til React.createContext()
• For at give konteksten skal vi indpakke vores overordnede komponent med UserInfoContext.Provider .
• Så er vi nødt til at angive den værdi, som vi vil sende ned i komponenttræet på value prop
• For at forbruge de angivne oplysninger skal vi indpakke vores barn (som har brug for dataene) med UserInfoContext.Consumer komponent.

Jeg fandt et problem med denne tilgang. Antag, at vi har flere kontekster, så går det grimt, når vi forbruger den angivne værdi fra Provider

 return (
    <UserInfoContext.Consumer>
      {userInfo => {
        return (
          <NetworkContext.Consumer>
            {status => {
              return (
                <View style={styles.sectionContainer}>
                  <Text style={styles.sectionDescription}>
                    This is Level 3. I need the user info.
                  </Text>
                  <Text style={styles.sectionDescription}>
                    NetworkStatus : {status}
                  </Text>
                  <Text style={styles.sectionDescription}>
                    Hi {userInfo.name}!!
                  </Text>
                </View>
              );
            }}
          </NetworkContext.Consumer>
        );
      }}
    </UserInfoContext.Consumer>

Denne kode vil virke. Men af ​​hensyn til læsbarheden kan jeg personligt ikke lide det.

Jeg håber, jeg er i stand til at forklare den grundlæggende idé med Context API .

useContext()

Som vi diskuterede om Context API . useContext er en anden måde at forbruge kontekst på. Det accepterer et kontekstobjekt og returnerer den aktuelle kontekstværdi for den kontekst.

Erklæring af useContext()

Importer useContext() pakke fra react .

import React, { useContext} from 'react';

Oprettelse af en kontekst

Vi kan skabe en kontekst ved at bruge React.createContext()

export const UserInfoContext = React.createContext();

Giv komponenterne kontekst

For at give værdien til vores komponent. Vi skal pakke vores komponent med Provider Komponent.

 <UserInfoContext.Provider value={info}>
      <SafeAreaView style={styles.parent}>
        <Component1 />
      </SafeAreaView>
    </UserInfoContext.Provider>

Forbruger konteksten

I stedet for at bruge gengivelsesrekvisitter kan vi videregive hele kontekstobjektet til React.useContext() at forbruge kontekst i toppen af ​​vores komponent.

 const userInfo = useContext(UserInfoContext);
  return (
    <View style={styles.sectionContainer}>
      <Text style={styles.sectionDescription}>
        This is Level 3. I need the user info.
      </Text>
      <Text style={styles.sectionDescription}>Hi {userInfo.name}!!</Text>
    </View>
  );

Glem ikke, at argumentet for at brugeContext skal være selve kontekstobjektet:

Konklusion

Lad os tage hovedpunkterne om useContext() ned Krog.

• Det fjerner omkostningerne ved at sende data via props gennem en indlejret komponent. Med et enkelt ord, hvis du vil have dataene, skal du bare forbruge dem.
• Vi kan følge tre enkle trin for at bruge det.
  • Opret en kontekst ved hjælp af React.createContext() .
  • Indpak den overordnede komponent med YourContext.Provider komponent og videregive værdien
  • Forbrug det, hvor det er nødvendigt med useContext(YourContext) .

Tak, fordi du læste denne artikel. Jeg har forsøgt at forklare min forståelse af useContext kroge. Tilføj gerne forslag. Lad os oprette forbindelse på Twitter