En kort genomgång av när du ska använda den Reagerar Sammanhang API

En kort genomgång av när du ska använda den Reagerar Sammanhang API

Ge en blomma är ett trevligt sätt att lägga till romantiska sammanhang till en situation. Foto av Evan Kirby på Unsplash

Som ni förmodligen redan vet, Reagera Kontext API bara blev äntligen officiell i version 16.3. Fram tills nu har Det varit en experimentell API och var allmänt anses vara en “advanced” – funktionen, som “de Flesta program kommer aldrig behöver använda kontext“.

Nu med de nya API äntligen ut och all hype runt det, jag kände att det uppmuntrar till användning som kan vara påtvingad och inte nödvändigt.

jag tänkte twittra om Sammanhang genom att Dan Abramov och jag tycker att den ska användas som utgångspunkt för denna diskussion:

Så vad har förändrats sedan juli 2016? Låt oss undersöka alla tre om – satser:

  • första paragraf anges att om du är ett bibliotek författare och behöver skicka ner något djupt, bör du vara bra med API-förändringar och buggy uppdateringar. Dock, nu med de nya API officiella — det är mest sannolikt ingen anledning att oroa sig buggy uppdateringar eller ofta, att bryta API förändringar.
  • Den andra bestämmelsen ber dig att använda en “Högre Ordning Komponent' (HOC) i stället för att använda API för direkt. Jag känner att detta fortfarande står stark — det passar bra med mönster som normalt används med Ramen API. Man nämner också typisk användning-fall i olika sammanhang.
  • Den tredje och sista klausul som uppmanar dig att registrera ett ärende om ett bibliotek ber dig att använda sammanhang och be dem att ge en HOC, för att ytterligare främja idén om att med hjälp av HOCs att passera sammanhang.

namn=ea36>Så sammantaget kan vi dra slutsatsen att eftersom Ramen API är nu mer tillförlitlig och säkrare att använda, kan vi bekymra dig mindre om du använder det — men utvecklare bör ändå tänka på när du ska använda den med försiktighet.

Låt oss ta en titt på två typiska fall använda för Sammanhanget API:

#1: Dependency Injection

Som jag förklarade i min artikel om några mycket användbara Reagera tips, kan du använda Reagera Kontext API för att skicka data till en djupt kapslade komponenter utan att förorena gränssnitt, hela vägen.

Låt oss se hur det går med den nya Sammanhang API:

const ctx = { title: 'Fin Titel', meddelande: "Pannkakor är underbara' };
const { Konsument, Leverantör } = Reagera.createContext(ctx);
const Title = () =>
<Konsument - >{({ title }) => <h1>{title}</h1>}</Consumer>;
const Meddelande = () =>
<Konsument - >{({ message }) => <p>{message}</p>}</Consumer>;
const Post - = titel => (
<Reagera.Fragment>
<Titel />
<Meddelande />
</Reagera.Fragment>
);
klass App sträcker sig Reagera.Komponent {
render() {
return (
<Leverantör värde={ctx}>
<Post />
</Leverantör>
);
}
}

I det här exemplet, App gör Inlägg – komponent innanför Leverantör , HOC tillhandahålls av createContext – funktionen. Detta gör det möjligt för dig att förvärva sammanhang, oavsett hur djupt kapslade användningen kan vara, genom att göra det Konsumenternas HOC, också av samma mekanism.

Inlägg gör en Titel och en Meddelande , som förbrukar motsvarande värden från den gått sammanhang objekt innanför Konsumenternas .

Detta enkla exempel visar att enkelhet och klarhet i det nya API, eftersom den är mycket lättläst och lätt att använda.

#2: Teman

Bygga på dokumentationen exempel, låt oss se hur vi kan temat komponenter med hjälp av sammanhang:

const teman = {
bakgrund: { förgrunden: '#ffffff', bakgrund: '#222222' },
den mörka: { förgrunden: '#000000', bakgrund: '#eeeeee' }
};
const ThemeContext = Reagera.createContext(teman.mörk);
funktion ThemedLabel(rekvisita) {
return (
<ThemeContext.Konsument - >
{tema => (
<span
{...rekvisita}
style={{ color: tema.förgrunden }}>
{rekvisita.text}
</span>
)}
</ThemeContext.Konsument - >

}
funktion ThemedButton(rekvisita) {
return (
<ThemeContext.Konsument - >
{tema => (
<knappen
{...rekvisita}
style={{ backgroundColor: tema.bakgrunden }}>
{rekvisita.etikett}
</ - knappen>
)}
</ThemeContext.Konsument - >
);
}
klass App sträcker sig Reagera.Komponent {
konstruktör(rekvisita) {
super(rekvisita);
detta.state = {
tema: teman.ljus,
};
 här.toggleTheme = () => {
detta.setState(state => ({
tema:
staten.tema === teman.mörka
? teman.ljus
: teman.mörk,
}));
};
}
render() {
return (
<div>
<ThemeContext.Leverantör värde={detta.stat.tema}>
<ThemedButton label={<ThemedLabel text='Fantastiskt!' />} />
</ThemeContext.Leverantör>
<div>
< - knappen onClick={detta.toggleTheme}>Ändra Tema</ - knappen>
</div>
</div>
);
}
}

Här har vi två tema-möjlighet komponenter — ThemedButton och ThemedLabel . Knappen gör en etikett, som återger text.
Genom att växla mellan teman på staten (med extra knapp), komponenter växla mellan de två teman — ljus text på mörk knapp och mörk text på en ljus-knappen. Detta görs med lätthet som tema sammanhang leverantör är ett ‘inre källa av sanning” för teman alternativ, och ändå kan temat vara lätt att konsumeras av alla tema-möjlighet komponenter.

Sista ord

jag är glad Samband API blev officiella. Det är ett kraftfullt verktyg som ger enkelhet och elegans i en annars besvärlig mönster att genomföra.
tänk Bara på att använda den endast när det är passande.