React je jedným z najpopulárnejších front-end frameworkov pre JavaScript. Na rozdiel od iných rámcov, ako je Angular, je veľmi bez názorov. Preto je na vás, aby ste sa rozhodli, ako chcete napísať alebo štruktúrovať svoj kód React.

Tento článok skúma niektoré postupy, ktoré by ste mali dodržiavať, aby ste zlepšili výkon svojej aplikácie React.

1. Používanie funkčných komponentov a háčikov namiesto tried

V React môžete použite triedu alebo funkčné komponenty s háčikmi. Funkčné komponenty a háčiky by ste však mali používať častejšie, pretože ich výsledkom je stručnejší a čitateľnejší kód v porovnaní s triedami.

Zvážte nasledujúci komponent triedy, ktorý zobrazuje údaje z API NASA.

trieda NasaData rozširuje React. Komponent {
 konštruktor (rekvizity) {
 super (rekvizity);
 this.state = {
 údaje: [],
 };
 }
 componentDidMount() {
 načítať (" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 this.setState({
 údaje: json,
 });
 });
 }
 render() {
 const { data } = this.state;





instagram viewer


 ak (!data.length)
 vrátiť (


 Načítavajú sa údaje... 
{" "}



 );
 vrátiť (
 <>
 Načítajte údaje pomocou komponentu Class 
{" "}
 {data.map((položka) => (
{item.title}

 ))}
 );
 }
}

Rovnaký komponent je možné napísať pomocou háčikov.

const NasaData = () => {
 const [data, setdata] = useState (null);
 useEffect(() => {
 načítať (" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 setdata (json);
 });
 }, [údaje]);
 vrátiť (
 <>
 Načítajte údaje pomocou komponentu Class 
{" "}
 {data.map((položka) => (
{item.title}

 ))}
 );
};

Aj keď vyššie uvedený blok kódu robí to isté ako komponent triedy, je menej zložitý, minimálny a ľahko pochopiteľný, čo prispieva k lepšej skúsenosti vývojárov.

2. Vyhnite sa používaniu stavu (ak je to možné)

Stav React sleduje údaje, ktoré pri zmene spúšťajú opätovné vykreslenie komponentu React. Pri vytváraní aplikácií React sa čo najviac vyhýbajte používaniu stavu, pretože čím viac stavu používate, tým viac údajov musíte sledovať vo svojej aplikácii.

Jedným zo spôsobov, ako minimalizovať používanie štátu, je vyhlásiť ho len v prípade potreby. Ak napríklad získavate údaje používateľa z rozhrania API, uložte celý objekt používateľa v stave namiesto ukladania jednotlivých vlastností.

Namiesto toho:

const [username, setusername] = useState('')
const [heslo, setpassword] = useState('')

To urobiť:

const [user, setuser] = useState({})

Pri rozhodovaní o štruktúre projektu choďte na komponent zameraný na jeden. To znamená mať všetky súbory týkajúce sa jedného komponentu v jednom priečinku.

Ak ste vytvárali a Navbar komponent, vytvorte priečinok s názvom navigačná lišta obsahujúce Navbar samotný komponent, šablónu so štýlmi a ďalšie súbory JavaSript a asset používané v komponente.

Jediný priečinok obsahujúci všetky súbory komponentu uľahčuje opätovné použitie, zdieľanie a ladenie. Ak potrebujete vidieť, ako komponent funguje, stačí otvoriť jeden priečinok.

4. Vyhnite sa používaniu indexov ako kľúčových rekvizít

React používa kľúče na jedinečnú identifikáciu položiek v poli. Pomocou kľúčov môže React určiť, ktorá položka bola zmenená, pridaná alebo odstránená z poľa.

Väčšinu času pri vykresľovaní polí môžete ako kľúč použiť index.

const Items = () => {
 const arr = ["položka1", "položka2", "položka3", "položka4", "položka5"];
 vrátiť (
 <>
 {arr.map((prvok, index) => {
{elem}
;
 })}
 );
};

Aj keď to niekedy funguje, použitie indexu ako kľúča môže spôsobiť problémy, najmä ak sa očakáva zmena zoznamu. Zvážte tento zoznam.

const arr = ["položka1", "položka2", "položka3", "položka4", "položka5"];

V súčasnosti je prvá položka zoznamu „Položka 1“ má index nula, ale ak ste na začiatok zoznamu pridali ďalšiu položku, „Položka 1” index sa zmení na 1, čo zmení správanie vášho poľa.

Riešením je použiť jedinečnú hodnotu ako index, aby sa zabezpečilo zachovanie identity položky zoznamu.

5. Ak je to možné, rozhodnite sa pre fragmenty namiesto prvkov Div

Komponenty React potrebujú vrátiť kód zabalený do jednej značky, zvyčajne a alebo fragment React. Ak je to možné, mali by ste sa rozhodnúť pre fragmenty.

Použitím zväčšuje veľkosť DOM, najmä pri veľkých projektoch, pretože čím viac značiek alebo uzlov DOM máte, tým viac pamäte potrebuje vaša webová lokalita a tým viac energie používa prehliadač na načítanie vašej webovej stránky. To vedie k nižšej rýchlosti stránky a potenciálne zlej používateľskej skúsenosti.

Jeden príklad odstraňovania nepotrebných tagy ich nepoužíva pri vrátení jedného prvku.

tlačidlo const = () => {
 vrátiť Displej;
};

6. Dodržiavajte konvencie pomenovania

Pri pomenovávaní komponentov by ste mali vždy použiť PascalCase, aby ste ich odlíšili od iných nekomponentných súborov JSX. Napríklad: Textové pole, NavMenua SuccessButton.

Použite camelCase pre funkcie deklarované v komponentoch React, ako napr handleInput() alebo showElement().

7. Vyhnite sa opakovanému kódu

Ak si všimnete, že píšete duplicitný kód, skonvertujte ho na komponenty, ktoré možno znova použiť.

Napríklad je zmysluplnejšie vytvoriť komponent pre vašu navigačnú ponuku namiesto opakovaného zapisovania kódu do každého komponentu, ktorý vyžaduje ponuku.

To je výhoda architektúry založenej na komponentoch. Svoj projekt môžete rozdeliť na malé komponenty, ktoré môžete opätovne použiť vo svojej aplikácii.

8. Použite deštrukciu objektov pre rekvizity

Namiesto odovzdania objektu rekvizity použite deštrukciu objektu na odovzdanie názvu rekvizity. Tým odpadá potreba odkazovať na objekt rekvizity zakaždým, keď ho potrebujete použiť.

Nasleduje napríklad komponent, ktorý používa rekvizity tak, ako sú.

tlačidlo const = (rekvizity) => {
 vrátiť {props.text};
};

Pri deštrukcii objektu odkazujete priamo na text.

tlačidlo const = ({text}) => {
 vrátiť {text};
};

9. Dynamicky vykresľovať polia pomocou mapy

Použite mapa() dynamicky vykresľovať opakované bloky HTML. Môžete použiť napr mapa() na vykreslenie zoznamu položiek v značky.

const Items = () => {
 const arr = ["položka1", "položka2", "položka3", "položka4", "položka5"];
 vrátiť (
 <>
 {arr.map((prvok, index) => {
{elem}
;
 })}
 );
 };

Na účely porovnania uvádzame, ako môžete zoznam vykresliť bez mapa(). Tento prístup sa veľmi opakuje.

const List = () => {
 vrátiť (


Položka 1

Položka 2

Položka 3

Položka 4

Položka 5




 );
};

10. Napíšte testy pre každý komponent React

Napíšte testy pre komponenty, ktoré vytvoríte, pretože to znižuje možnosti chýb. Testovanie zaisťuje, že sa komponenty správajú tak, ako by ste očakávali. Jedným z najbežnejších testovacích rámcov pre React je Jest a poskytuje prostredie, kde môžete vykonávať svoje testy.

Aj keď je React do istej miery flexibilný, pokiaľ ide o to, ako ho môžete použiť, dodržanie konkrétnych postupov vám pomôže vyťažiť z vášho zážitku maximum.

Pri dodržiavaní týchto tipov majte na pamäti svoj konkrétny projekt a ciele; niektoré budú v určitých prípadoch relevantnejšie ako iné.

Ako používať API v React Using Fetch a Axios

Chcete vedieť, ako používať API? Pochopenie toho, ako používať API v Reacte, je kľúčovým prvkom používania API.

Prečítajte si ďalej

O autorovi