Sådan bruges funktionelle komponenter i React

Har du spekuleret på, hvordan du opretter en komponent i React?

For at svare er det så simpelt som at oprette en funktion, der returnerer en HTML-lignende syntaks.

import React from 'react'; function Counter({n}) { return ( {n} ); } export default Counter;

Lad os nu se, hvad der skete i koden ovenfor.  Counterer en funktion, der omdanner et tal til HTML. Og hvis du ser mere nøje, Counterer det en ren funktion. Det er rigtigt, den slags funktion, der returnerer resultatet baseret på dets input og har ingen bivirkninger.

Denne forklaring kommer med et nyt spørgsmål. Hvad er en bivirkning?

Kort sagt er en bivirkning enhver ændring af miljøet uden for funktionen eller enhver læst information fra det ydre miljø, der kan ændre sig.

Du har muligvis bemærket, at jeg brugte destruktureringsopgavens syntaks i parameterlisten til at udtrække ninputnummeret. Det skyldes, at komponenter som input tager et enkelt objekt kaldet “rekvisitter”, der har alle egenskaberne sendt til dem.

Her er hvordan nparameteren kan indstilles fra enhver anden komponent:

På en måde kan denne syntaks forestilles som et funktionsopkald Counter({n: 1}). Er det ikke rigtigt?

Lad os fortsætte vores rejse.

Kan funktionelle komponenter have tilstand? Som komponentnavnet foreslog, vil jeg gemme og ændre en tæller. Hvad hvis vi bare erklærer en variabel, der indeholder et tal inde i komponenten? Vil det fungere?

Lad os finde ud af det.

Jeg starter med at erklære variablen inde i den funktionelle komponent.

import React from 'react'; function Counter() { let n = 0; return ( {n} ); } export default Counter;

Lad os nu tilføje den funktion, der forøger antallet og logger det til konsollen. Jeg vil bruge funktionen som begivenhedshåndterer til klikhændelsen.

import React from 'react'; function Counter() { let n = 0; function increment(){ n = n + 1; console.log(n) } return ( {n} Increment ); } export default Counter;

Hvis vi ser på konsollen, ser vi, at antallet faktisk er steget, men det afspejles ikke på skærmen. Nogle ideer?

Du fik det rigtigt ... vi skal ændre nummeret, men vi skal også gengive det igen på skærmen.

Her er hvor hjælpefunktionen fra React Hooks kommer til spil. Forresten kaldes disse hjælpefunktioner kroge, og de starter med ordet "brug". Vi skal bruge en af ​​dem, useState. Jeg vil også logge "re-render" teksten til konsollen for at se, hvor mange gange Counterfunktionen faktisk kaldes.

import React, { useState } from 'react'; function Counter() { const [n, setN] = useState(0); console.log('re-render'); function increment(){ setN(n + 1); console.log(n) } return ( {n} Increment ); } export default Counter;

Lad os læse hvad der useState()gør.

Hvad useStatevender tilbage? Det returnerer et par værdier: den aktuelle tilstand og en funktion, der opdaterer den.

I vores tilfælde ner den aktuelle tilstand og setN()er den funktion, der opdaterer den. Har du tjekket konsollen for at se, hvor mange gange "gengivelse" -teksten vises? Jeg overlader det til dig at finde ud af.

Vi kan opdatere tilstanden ikke kun ved at indstille den nye værdi, men også ved at levere en funktion, der returnerer den nye værdi.

I vores tilfælde kaldes den funktion, der giver den nye værdi increment(). Som du ser, increment()er det en ren funktion.

import React, { useState } from 'react'; function increment(n){ return n + 1; } function Counter() { const [n, setN] = useState(0); return ( {n}  setN(increment)}> Increment ); } export default Counter;

setN(increment)Lad os læse dokumentationen for at forstå, hvad der gør.

Ved at passere en opdateringsfunktion kan du få adgang til den aktuelle tilstandsværdi inde i opdateringen.

OK så increment()kaldes med den aktuelle ntilstand, og den bruges til at beregne den nye tilstandsværdi.

Afsluttende tanker

Lad os opsummere, hvad vi fandt ud af.

I React kan vi simpelthen definere en komponent ved hjælp af en funktion, der returnerer en HTML-lignende syntaks.

React Hooks giver os mulighed for at definere tilstand i sådanne funktionelle komponenter.

Og sidst men ikke mindst slap vi endelig af med thispseudo-parameter i komponenter. Måske har du bemærket, at det thisbliver irriterende ved at ændre kontekst, når du ikke forventer det. Ingen bekymringer om det. Vi vil ikke bruge thisfunktionelle komponenter.

Hvis du er kommet så langt, kan du også se på mine bøger.

Discover Functional JavaScript blev udnævnt til et afbedste bøger til funktionel programmering af BookAuthority !

For mere om anvendelse af funktionelle programmeringsteknikker til React, se Funktionel React.

Lær funktionel reaktion på en projektbaseret måde med funktionel arkitektur med React og Redux .

Tweet mig din feedback.