Kako koristiti funkcionalne komponente u Reactu

Jeste li se pitali kako stvoriti komponentu u Reactu?

Odgovoriti je jednostavno kao stvoriti funkciju koja vraća sintaksu sličnu HTML-u.

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

Sada da vidimo što se dogodilo u gornjem kodu.  Counterje funkcija koja pretvara broj u HTML. A ako pogledate pažljivije, Counterto je čista funkcija. Točno, vrsta funkcije koja vraća rezultat na temelju svojih unosa i nema nuspojava.

Ovo objašnjenje dolazi s novim pitanjem. Što je nuspojava?

Ukratko, nuspojava je svaka preinaka okoline izvan funkcije ili bilo koja pročitana informacija iz vanjske okoline koja se može promijeniti.

Možda ste primijetili da sam upotrijebio sintaksu dodjele destrukturiranja na popisu parametara za izvlačenje nulaznog broja. To je zato što komponente uzimaju kao ulaz jedan objekt nazvan "rekviziti" koji ima sva svojstva koja su im poslana.

Evo kako se nparametar može postaviti iz bilo koje druge komponente:

U određenom smislu, ovu sintaksu možemo zamisliti kao poziv funkcije Counter({n: 1}). Zar ne?

Nastavimo naše putovanje.

Mogu li funkcionalne komponente imati stanje? Kao što je naziv komponente sugerirao, želim spremiti i promijeniti brojač. Što ako samo deklariramo varijablu koja sadrži broj unutar komponente? Hoće li uspjeti?

Hajde da vidimo.

Započet ću deklaracijom varijable unutar funkcionalne komponente.

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

Dodajmo sada funkciju koja povećava broj i bilježi ga na konzolu. Koristit ću funkciju kao voditelj događaja za događaj klika.

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

Ako pogledamo konzolu, vidimo da se broj zapravo povećava, ali to se ne odražava na zaslonu. Ima li ideja?

Dobro ste shvatili ... moramo promijeniti broj, ali također ga moramo ponovno prikazati na zaslonu.

Ovdje dolazi do izražaja korisnost funkcije React Hooks. Inače, ove korisne funkcije nazivaju se kuke i započinju riječju "upotreba". Koristit ćemo jedan od njih, useState. Također ću zabilježiti tekst "ponovno prikazati" na konzolu kako bih vidio koliko je puta Counterfunkcija zapravo pozvana.

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;

Pročitajmo što se useState()događa.

Što se useStatevraća? Vraća par vrijednosti: trenutno stanje i funkciju koja ga ažurira.

U našem je slučaju ntrenutno stanje i setN()funkcija koja ga ažurira. Jeste li provjerili na konzoli da vidite koliko se puta prikazuje tekst "ponovno prikazati"? Ostavit ću to da vi saznate.

Stanje možemo ažurirati ne samo postavljanjem nove vrijednosti već i pružanjem funkcije koja vraća novu vrijednost.

U našem će se slučaju pozvati funkcija koja pruža novu vrijednost increment(). Kao što vidite, increment()to je čista funkcija.

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;

Da bismo razumjeli što setN(increment)radi, pročitajmo dokumentaciju.

Prolazak funkcije ažuriranja omogućuje vam pristup trenutnoj vrijednosti stanja unutar programa za ažuriranje.

U redu, pa increment()se poziva s trenutnim nstanjem i koristi se za izračunavanje nove vrijednosti stanja.

Završne misli

Sažeti što smo saznali.

U Reactu možemo jednostavno definirati komponentu pomoću funkcije koja vraća sintaksu sličnu HTML-u.

React Hooks omogućuje nam definiranje stanja u takve funkcionalne komponente.

I posljednje, ali ne najmanje važno, napokon smo se riješili thispseudo-parametara u komponentama. Možda ste primijetili da to thispostaje neugodno mijenjajući kontekst kad to ne očekujete. Bez brige oko toga. Nećemo koristiti thisu funkcionalnim komponentama.

Ako ste stigli tako daleko, možete pogledati i moje knjige.

Discover Functional JavaScript proglašen je jednim odnajbolje knjige o funkcionalnom programiranju by BookAuthority !

Za više informacija o primjeni tehnika funkcionalnog programiranja na React pogledajte Functional React.

Naučite funkcionalni React , na način temeljen na projektu, uz Funkcionalnu arhitekturu s Reactom i Reduxom .

Pošaljite mi svoje povratne informacije.