React on JavaScripti jaoks üks populaarsemaid esiotsa raamistikke. Erinevalt teistest raamistikest, nagu Angular, on see väga arvamusetu. Seetõttu on teie otsustada, kuidas soovite oma Reacti koodi kirjutada või struktureerida.

Selles artiklis käsitletakse mõningaid tavasid, mida peaksite oma Reacti rakenduse toimivuse parandamiseks järgima.

1. Funktsionaalsete komponentide ja konksude kasutamine klasside asemel

Reactis saate seda teha kasutage konksudega klassi või funktsionaalseid komponente. Peaksite siiski sagedamini kasutama funktsionaalseid komponente ja konkse, kuna need annavad klassidega võrreldes lakoonilisema ja loetavama koodi.

Mõelge järgmisele klassikomponendile, mis kuvab NASA API andmeid.

klass NasaData laiendab Reacti. Komponent {
 konstruktor (rekvisiidid) {
 super (rekvisiidid);
 this.state = {
 andmed: [],
 };
 }
 komponentDidMount() {
 tõmba(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 this.setState({
 andmed: json,
 });
 });

instagram viewer


 }
 render () {
 const { andmed } = see.olek;
 if (!data.length)
 tagasi (


 Andmete toomine... 
{" "}



 );
 tagasi (
 <>
 Andmete toomine klassi komponendi abil 
{" "}
 {data.map((üksus) => (
{item.title}

 ))}
 );
 }
}

Sama komponendi saab kirjutada konksude abil.

const NasaData = () => {
 const [andmed, setdata] = useState (null);
 useEffect(() => {
 tõmba(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 setdata (json);
 });
 }, [andmed]);
 tagasi (
 <>
 Andmete toomine klassi komponendi abil 
{" "}
 {data.map((üksus) => (
{item.title}

 ))}
 );
};

Kuigi ülaltoodud koodiplokk teeb sama asja kui klassikomponent, on see vähem keeruline, minimaalne ja hõlpsasti mõistetav, mis aitab kaasa paremale arendaja kogemusele.

2. Vältige oleku kasutamist (kui võimalik)

Reaktsiooni olek jälgib andmeid, mille muutmine käivitab komponendi React uuesti renderdamise. Reacti rakenduste loomisel vältige oleku kasutamist nii palju kui võimalik, sest mida rohkem olekut kasutate, seda rohkem andmeid peate kogu rakenduses jälgima.

Üks võimalus riigi kasutust minimeerida on deklareerida seda vaid vajaduse korral. Näiteks kui hankite kasutajaandmeid API-st, salvestage üksikute atribuutide salvestamise asemel terve kasutajaobjekt olekusse.

Selle asemel toimige järgmiselt.

const [kasutajanimi, setusername] = useState('')
const [parool, määrake parool] = useState('')

Tee seda:

const [kasutaja, seadja] = useState({})

Kui otsustate projekti struktuuri üle, vali komponendikeskne. See tähendab, et kõik ühte komponenti puudutavad failid on ühes kaustas.

Kui loote a Navibar komponent, looge kaust nimega navigeerimisriba mis sisaldab Navibar komponent ise, laadileht ja muud komponendis kasutatavad JavaSript ja varafailid.

Üks kaust, mis sisaldab kõiki komponendi faile, muudab selle taaskasutamise, jagamise ja silumise lihtsaks. Kui soovite näha, kuidas mõni komponent töötab, peate avama ainult ühe kausta.

4. Vältige indeksite kasutamist võtmerekvisiidina

React kasutab võtmeid massiivi üksuste ainulaadseks tuvastamiseks. Võtmete abil saab React täpselt määrata, milline üksus on massiivist muudetud, lisatud või eemaldatud.

Enamiku ajast võite massiivide renderdamisel kasutada võtmena indeksit.

const Üksused = () => {
 const arr = ["üks1", "üksus2", "üks 3", "üks 4", "üks 5"];
 tagasi (
 <>
 {arr.map((element, index) => {
{elem}
;
 })}
 );
};

Kuigi see mõnikord töötab, võib indeksi kasutamine võtmena põhjustada probleeme, eriti kui loendit oodatakse. Mõelge sellele loendile.

const arr = ["üks1", "üksus2", "üks 3", "üks 4", "üks 5"];

Praegu on loendi esimene üksus "Üksus1" on indeksis null, kuid kui lisasite loendi algusesse mõne muu üksuse, siis "Üksus1” indeks muutuks 1-ks, mis muudab teie massiivi käitumist.

Lahendus on kasutada unikaalset väärtust indeksina, et tagada loendiüksuse identiteedi säilimine.

5. Võimaluse korral valige osade asemel killud

Reaktsiooni komponendid peavad tagastama koodi, mis on tavaliselt mähitud ühte sildi või Reacti fragment. Võimaluse korral peaksite valima killud.

Kasutades suurendab DOM-i suurust, eriti suurte projektide puhul, sest mida rohkem silte või DOM-sõlmi teil on, seda rohkem mälu teie veebisait vajab ja seda rohkem energiat kasutab brauser teie veebisaidi laadimiseks. See vähendab lehe kiirust ja potentsiaalselt kehva kasutuskogemust.

Üks näide ebavajaliku kõrvaldamisest Tags ei kasuta neid ühe elemendi tagastamisel.

const nupp = () => {
 tagasi Ekraan;
};

6. Järgige nimede andmise tavasid

Komponentide nimetamisel peaksite alati kasutama PascalCase'i, et eristada neid muudest mittekomponentsete JSX-failidest. Näiteks: Tekstiväli, NavMenüü, ja Edunupp.

Kasutage CamelCase'i selliste funktsioonide jaoks, mis on deklareeritud Reacti komponentides nagu handleInput() või showElement().

7. Vältige korduvat koodi

Kui märkate, et kirjutate dubleeritud koodi, teisendage see komponentideks, mida saab uuesti kasutada.

Näiteks on mõttekam luua oma navigeerimismenüü jaoks komponent, mitte kirjutada korduvalt koodi igasse menüüd nõudvasse komponenti.

See on komponendipõhise arhitektuuri eelis. Saate oma projekti jagada väikesteks komponentideks, mida saate oma rakenduses uuesti kasutada.

8. Kasutage rekvisiitide jaoks objektide struktureerimist

Rekvisiidiobjekti edastamise asemel kasutage rekvisiidi nime edastamiseks objektide struktureerimist. See välistab vajaduse viidata rekvisiitide objektile iga kord, kui peate seda kasutama.

Näiteks järgmine on komponent, mis kasutab rekvisiite sellisel kujul.

const nupp = (rekvisiidid) => {
 tagasi {props.text};
};

Objekti destruktureerimisega viitate otse tekstile.

const Button = ({tekst}) => {
 tagasi {text};
};

9. Renderdage massiive dünaamiliselt kaardi abil

Kasuta kaart () korduvate HTML-plokkide dünaamiliseks renderdamiseks. Näiteks võite kasutada kaart () üksuste loendi renderdamiseks sildid.

const Üksused = () => {
 const arr = ["üks1", "üksus2", "üks 3", "üks 4", "üks 5"];
 tagasi (
 <>
 {arr.map((element, index) => {
{elem}
;
 })}
 );
 };

Võrdluseks siin on, kuidas saate loendi ilma renderdada kaart (). See lähenemine on väga korduv.

const Nimekiri = () => {
 tagasi (


Üksus1

Üksus2

Üksus3

Üksus 4

Üksus 5




 );
};

10. Kirjutage iga reageeriva komponendi jaoks testid

Kirjutage loodud komponentide jaoks testid, kuna see vähendab vigade tõenäosust. Testimine tagab, et komponendid käituvad ootuspäraselt. Üks levinumaid Reacti testimisraamistikke on Jest ja see pakub keskkonda, kus saate oma teste läbi viia.

Kuigi React on selle kasutamise osas mõnevõrra paindlik, aitab konkreetsete tavade järgimine teil oma kogemustest maksimumi võtta.

Neid nõuandeid järgides pidage meeles oma konkreetset projekti ja eesmärke; mõned neist on teatud juhtudel asjakohasemad kui teised.

API-de kasutamine Reactis, kasutades funktsiooni Fetch ja Axios

Kas soovite teada, kuidas API-sid kasutada? API-de kasutamise mõistmine Reactis on API kasutamise põhielement.

Loe edasi

Autori kohta