Met behulp van de Compositie te Delen Functionaliteit Tussen Reageren Onderdelen

0
12

Het delen van functionaliteit tussen Reageren componenten is een vrij veel voorkomende nodig. Het concept is dat we het gedrag bepalen op één plek en vervolgens uit te breiden in de verschillende componenten. Hogere-Orde-Onderdelen zijn een manier om dit te doen. Toch is er nog een andere manier met behulp van een bibliotheek genaamd de Compositie.

GitHub Repo

Wat is de Compositie?

De documentatie helpt ons antwoord:

De compositie is een Reageren utility belt voor de functie-onderdelen en van een hogere orde componenten. Denk aan het als lodash voor het Reageren.

Kortom, het is een bibliotheek voor het Reageren bevat een heleboel helpers die verschillende retourneren van een hogere orde componenten — dat is leuk, want het duurt enkele van de grunt uit het definiëren van een gemeenschappelijke Reageren patronen en waardoor ze onmiddellijk beschikbaar om uit te breiden naar andere onderdelen.

Wat kan hij doen? Goed, laten we een paar voorbeelden samen.

Add staat voor functionele staatloze onderdelen

Als je niet kon raden door de naam van een functionele staatloze geldt niet voor het onderdeel staten. Het louter accepteert rekwisieten en geeft UI aan de voorkant.

const Greeting = props =>
<p>
Hallo, {rekwisieten.naam}!
</p>

In scenario ‘ s waarbij u gebruik wilt maken van de staat in het functioneel staatloze component, moet je om het te converteren naar een klasse component. Dit is waar de Compositie van pas komt.

De compositie biedt u de withState() helper toevoegen staat om uw functionele staatloze onderdelen. Het beheert een enkele staat die waarde. U kunt niet beheren meer dan één lidstaat waarde in withState (), zoals u in uw klas component. U passeert in een functie voor het bijwerken van de staat waarde en een optionele standaard aangegeven waarde.

Hier is hoe withState() is opgebouwd:

withState(
stateName: string, // de naam noemen wij onze staat
stateUpdaterName: string, // de naam van de functie te bellen
initialState: alle | (props: Object) => een // optioneel standaard staat doorgeven
): HigherOrderComponent

Een teller is een typisch voorbeeld dat wordt gebruikt voor het demonstreren van een concept. Hier is hoe we kunnen zorgen voor een super eenvoudige teller met de Compositie van de withState() helper:

const App = withState(“aantal”, “handleCounter”, 0)(({ count, handleCounter }) => {
return (
<div>
<p>{count}</p>
<button onClick={() => handleCounter(n => n + 1)}>Toename</button>
<button onClick={() => handleCounter(n => n – 1)}>Decrement</button>
</div>
);
});

Sinds de withState() helper is al beschikbaar voor ons, we noemen het meteen en het te voorzien van de parameters nodig. Nogmaals, dit zijn:

  • stateName: De naam noemen wij onze staat
  • stateUpdaterName: de naam van De functie te bellen
  • initialState: Optioneel standaard staat doorgeven

Deze parameters worden vervolgens geïntegreerd in de UI markup we willen maken op de front-end.

Er is een andere manier konden we gemaakt hebben onze teller component en het is de moeite waard om meer praktijk zetten van een Compositie helper te gebruiken.

Eerst maken we een hogere-orde component met behulp van withState() en de vereiste parameters in.

const verbeterde = withState(“teller”, “handleCounter”, 0);

Vervolgens maken we de Teller component, werken in de withState() parameters:

const Teller = ({ teller, handleCounter }) => (
<div>
<h1>{teller}</h1>
<button onClick={() => handleCounter(n => n + 1)}>Toename</button>
<button onClick={() => handleCounter(n => n – 1)}>Decrement</button>
</div>
);

Merk op dat de naam van de staat en de updater-functie wordt doorgegeven als rekwisieten voor de Teller component.

Tot slot maken we onze App component door het wikkelen van de Teller component in de hogere-orde verbeterde component.

const App = enhanced(Teller);

Zie de Pen om de Compositie van withState door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

Hier is een andere populaire aanpak:

const verbeterde = withState(“aantal”, “handleCounter”, 0);
const App = enhanced(({ count, handleCounter }) => {
return (
<div>
<p>{count}</p>
<button onClick={() => handleCounter(n => n + 1)}>Toename</button>
<button onClick={() => handleCounter(n => n – 1)}>Decrement</button>
</div>
);
});

Zie de Pen om de Compositie van withState v2 door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

Handvat staat met de withHandlers()

De compositie heeft ook een withHandlers() helper waarmee je het handvat staat door het definiëren van functies die zullen worden gebruikt voor de update van een component staat. En, u kunt gebruik maken van het recht naast withState()!

Deze zijn in principe hogere-orde functies die in de rekwisieten en het retourneren van een functie-handler. Laten we breken de structuur zoals we in het vorige voorbeeld.

withHandlers({
incrementCounter: props => event => {
evenement.preventDefault();
props.handleCounter(rekwisieten.teller + 1);
}
})

Ten eerste, we hebben geïdentificeerd incrementCounter, die beschikbaar zijn op onze Teller component voor het bijwerken van de graaf waarde op te klikken.

Vervolgens construeren we de teller, zoals we dat ook eerder als een hogere-orde component met behulp van withState():

const enhancedState = withState(“aantal”, “handleCounter”, 0);

Nu bepalen we onze functies zetten withHandlers() gebruiken:

const enhancedHandler = withHandlers({
incrementCounter: props => event => {
evenement.preventDefault();
props.handleCounter(rekwisieten.teller + 1);
},
decrementCounter: props => event => {
evenement.preventDefault();
props.handleCounter(rekwisieten.count – 1);
}
});

We hebben gebouwd een hogere-orde component we noemen enhancedHandler en gebruikt withState() definiëren twee functie-handlers in het: incrementCounter en decrementCounter. Deze handlers parameters bevatten die worden ontvangen als rekwisieten door de componenten die ze bellen. Ze zijn nodig willen we een update van de toestand van de component gedefinieerd met behulp van withState().

Oke, op te maken van onze teller onderdeel:

const Teller = ({ count, incrementCounter, decrementCounter }) => (
<div>
<h1>{count}</h1>
<button onClick={incrementCounter}>Toename</button>
<button onClick={decrementCounter}>Decrement</button>
</div>
);

Dat zien? De staat en werken, zullen naar verwachting worden doorgegeven als rekwisieten voor de teller component.

Om gebruik te maken van de hogere orde componenten die we gedefinieerd hebben, hebben we passeren de Teller onderdeel te enhancedHandler en wikkel dat als een parameter voor enhancedState.

In andere woorden:

const App = enhancedState(enhancedHandler(Teller));

Zie de Pen om de Compositie van withState & withHandlers door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

Het componeren van meerdere hogere orde componenten

In het laatste voorbeeld hebben we gebruik gemaakt van twee hogere orde componenten. Is er een betere van het koppelen ze aan elkaar? Absoluut! De compositie biedt ons een compose() helper om precies dat te doen. We kunnen gebruik maken van componeren() om een component te creëren die componeert zowel een hogere orde componenten in één klap.

const verbeterde = compose(
withState(“aantal”, “handleCounter”, 0),
withHandlers({
incrementCounter: props => event => {
evenement.preventDefault();
props.handleCounter(rekwisieten.teller + 1);
},
decrementCounter: props => event => {
evenement.preventDefault();
props.handleCounter(rekwisieten.count – 1);
}
})
);

Nu, we kunnen gebruik maken van de uitgebreide component in onze App onderdeel:

const App = enhanced(({ count, incrementCounter, decrementCounter }) => {
return (
<div>
<p>{count}</p>
<button onClick={incrementCounter}>Toename</button>
<button onClick={decrementCounter}>Decrement</button>
</div>
);
});

Zie de Pen om de Compositie – opstellen withState & withHandlers door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

Beheren staat met de Redux zoals verdunner

Een ander leuk ding om de Compositie doet is dat je om het beheer van de staat met behulp van een verloopstuk functie (withReducer). Een reducer updates van de status van een component in reactie op een bepaalde actie.

De structuur van de withReducer() ziet er zo uit:

withReducer<S>(
stateName: string,
dispatchName: string,
verdunner: (staat: S, action: A) => S,
initialState: S | (ownerProps: Object) => S
): HigherOrderComponent</S>

De eerste parameter is de naam van de staat. De tweede is de verzending methode. de verzending worden gebruikt in de verzending acties, zoals we in de Redux. Vervolgens hebben we de drukregelaar en het in zijn oorspronkelijke staat.

In de context van onze teller component, withReducer() zal een update van de stand van de graaf: de graaf zal omhoog gaan met een actie noemen we verhogen en, omgekeerd, de graaf zal gaan met een actie noemen we verlagen.

Eerst maken we een uitgebreide component door het componeren van withReducer en withHandlers.

const verbeterde = compose(
withReducer(
“count”,
“verzending”,
(staat, actie) => {
switch (actie.type) {
geval “INCREMENT”:
terug staat + 1;
geval “VERLAGEN”:
terug state – 1;
standaard:
terug state;
}
},
0
),
withHandlers({
incrementCounter: ({ verzending }) => e => verzending({ type: “INCREMENT” }),
decrementCounter: ({ verzending }) => e => verzending({ type: “VERLAGEN” })
})
);

incrementCounter en decrementCounter zal reageren op DOM-gebeurtenissen en verzending van een type actie. De staat zal worden bijgewerkt, afhankelijk van het type actie. We moeten gebruik maken van deze in onze component.

const App = enhanced(({ count, incrementCounter, decrementCounter }) => {
return (
<div>
<p>{count}</p>
<button onClick={incrementCounter}>Toename</button>
<button onClick={decrementCounter}>Decrement</button>
</div>
);
});

Zie de Pen om de Compositie – reducer door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

Best netjes toch?

Hopelijk dit geeft u een goed idee van wat de Compositie is en hoe de bibliotheek van de rijkdom van de helpers kunnen stroomlijnen Reageren ontwikkeling, in het bijzonder wanneer het gaat om het beheren en bellen staten.

Natuurlijk, er is veel meer om Compositie dan wat we hier besproken. Een quick scan van de API-documentatie zal laten zien dat er veel hogere orde componenten die u kunt gebruiken, afhankelijk van uw toepassing van de vereisten. Ga weer op te bouwen, en gelieve te voelen vrij om te laat een reactie in als je vragen hebt!