JSX sintakse un bultas funkcija / React

Komponenti kā funkciju izteiksmes

Līdz šim jūs, iespējams, novērojāt tikai ES5 funkciju deklarācijas, kas tika izmantotas, lai definētu komponentus programmā React. Tomēr tas nav vienīgais veids, kā to izdarīt.

Šajā rakstā jūs uzzināsiet par dažām alternatīvām pieejām, jo īpaši izmantojot funkciju izteiksmes un bultiņu funkcijas.

Funkciju izteiksmes

Sāksim ar funkcijas deklarāciju, kas tiek izmantota kā React komponents:

function Nav(props) {
    return (
        <ul>
            <li>{props.first}</li>
        </ul>
    )
}

Šī komponenta kods atgriež saraksta vienumu, kurā ir “first” rekvizīta vērtība.

Tagad mainīsim šo funkcijas deklarāciju uz funkcijas izteiksmi:

const Nav = function(props) {
    return (
        <ul>
            <li>{props.first}</li>
        </ul>
    )
}

Komponents lielākoties ir vienāds. Vienīgais, kas ir mainījies, ir tas, ka jūs tagad izmantojat anonīmu (bezvārdu “nameless“) funkciju un piešķirat šo anonīmās funkcijas deklarāciju mainīgajam, kas deklarēts, izmantojot atslēgvārdu const un nosaukumu Nav. Pārējā koda daļa ir identiska.

Komponenta maiņa no funkcijas deklarācijas uz funkcijas izteiksmi nemaina tā darbību vai koda rakstīšanas veidu, lai renderētu Nav komponentu. Tas joprojām ir tas pats:

<Nav first="Home" />

Varat arī spert šo koncepciju soli tālāk, izmantojot bultiņu funkcijas.

Komponenti kā bultiņu funkcijas

Bultiņu funkcijas ir JavaScript ES6 versijas galvenā funkcija.

Viena no galvenajām bultiņu funkciju izmantošanas priekšrocībām ir tās īsākā sintakse.

Apsveriet Nav funkcijas izteiksmi, kas rakstīta kā bultiņas funkcija:

const Nav = (props) => {
    return (
        <ul>
            <li>{props.first}</li>
        </ul>
    )
}

Tātad, veids, kā par to domāt, ir šāds:

  • Pašu bultiņu var uzskatīt par funkcijas atslēgvārda aizstājēju.
  • Parametri, ko pieņem šī bultiņas funkcija, ir norādīti pirms pašas bultiņas.

Lai atkārtotu, izmantojiet mazāko iespējamo anonīmo ES5 funkciju:

const example = function() {}
Un pēc tam novērojiet, kā tas ir uzrakstīts kā bultiņas funkcija:
const example = () => {}

Vēl viens svarīgs noteikums attiecībā uz bultiņu funkcijām ir tāds, ka iekavu izmantošana nav obligāta, ja funkcija pieņem vienu parametru.

Citiem vārdiem sakot, vēl viens pareizs veids, kā uzrakstīt iepriekšējo Nav bultiņas funkcijas komponentu, būtu nomest iekavas ap rekvizītiem, jeb “props”:

const Nav = props => {
    return (
        <ul>
            <li>{props.first}</li>
        </ul>
    )
}

Visos citos gadījumos, kad rakstāt bultiņu funkcijas, jebkuram parametru skaitam, izņemot vienu parametru, ap parametriem ir obligāti jāizmanto iekavas.

Piemēram, ja jūsu Nav komponents nepieņēma nevienu parametru, jums tas jākodē ar tukšām iekavām:

const Nav = () => {
    return (
        <ul>
            <li>Home</li>
        </ul>
    )
}

Vēl viena interesanta lieta par bultiņu funkcijām ir netiešā atgriešanās jeb implicit return. Tomēr tas darbojas tikai tad, ja tas atrodas tajā pašā koda rindā, kurā atrodas pati bultiņa. Citiem vārdiem sakot,implicit return. darbojas, ja visa jūsu sastāvdaļa ir viena koda rindiņa.

Lai parādītu, kā tas darbojas, pārrakstīsim Nav komponentu kā vienu rindiņu:

const Nav = () => <ul><li>Home</li></ul>

Ņemiet vērā, ka, izmantojot netiešo atgriešanos, visos citos gadījumos jums pat nav jāizmanto figūriekavas, kas ir obligātās funkcijas ķermeņa norobežotāji.

Bultiņu funkciju izmantošana citās situācijās

Programmā React, tāpat kā vienkāršā JavaScript, bultiņu funkcijas var izmantot daudzās dažādās situācijās. Viena no šādām situācijām ir tā izmantošana, piemēram, ar iebūvēto masīva metodi forEach().

Piemēram:

[10, 20, 30].forEach(item => item * 10)

Iepriekš minētās vanilla JavaScript koda rindiņas izvadei būtu trīs skaitļu vērtības:

100
200
300

Papildu piezīme: termins “vanilla JavaScript” bieži tiek lietots, lai aprakstītu vienkāršu, parasto JavaScript valodas sintaksi bez ietvariem vai bibliotēkai raksturīga koda. Piemēram, React ir bibliotēka, tāpēc šajā kontekstā, sakot, ka koda gabals ir “vaniļas JavaScript”, tas nozīmē, ka tā palaišanai nav nepieciešama īpaša bibliotēka. Tas var darboties “vienkāršā” JavaScript bez papildu atkarībām.

Varat arī rakstīt šo kodu ES5 sintaksē:

[10, 20, 30].forEach(function(item) {
        return item * 10
    }
)
Neatkarīgi no tā, kā to rakstāt, metodi forEach() var palaist masīvā. Metode forEach() pieņem vienu parametru: anonīmu funkciju. Ja jūs ierakstāt šo anonīmo funkciju ES5 sintaksē, tajā būs atgriešanas paziņojums:
function(item) {
    return item * 10
}
Ja rakstāt to kā ES6 funkciju, to var vienkāršot kā vienu rindiņu:
item => item * 10

Abas šīs funkcijas veic tieši to pašu uzdevumu. Atšķiras tikai sintakse. ES6 funkcija ir daudz īsāka, jo:

  • Bultiņas funkcijai ir viens parametrs, tāpēc jums nav jāpievieno iekavas ap vienuma parametru (pa kreisi no bultiņas)
  • Tā kā bultiņas funkcija iekļaujas vienā koda rindiņā, ap funkcijas pamattekstu vai atgriešanas atslēgvārdu nav jāizmanto figūriekavas.

Bultiņu funkcijas tiek plaši izmantotas JSX programmā React, un pierašana pie to sintakses un spēja to “garīgi parsēt” lasīšanas laikā ir svarīga prasme, kas palīdz jums labāk rakstīt React lietotnes.

Tagad, kad esat pabeidzis šo rakstu, esat uzzinājis par dažām alternatīvām pieejām, jo īpaši izmantojot funkciju izteiksmes un bultiņu funkcijas.

 

Loading

Noderīgs raksts? Dalies ar citiem:
Dalīties: