React je jedním z nejpopulárnějších front-end frameworků pro JavaScript. Na rozdíl od jiných frameworků, jako je Angular, je velmi neopodstatněný. Je tedy na vás, abyste se rozhodli, jak chcete napsat nebo strukturovat svůj kód React.

Tento článek zkoumá některé postupy, které byste měli dodržovat, abyste zlepšili výkon své aplikace React.

1. Použití funkčních součástí a háčků místo tříd

V React můžete použijte třídu nebo funkční komponenty s háčky. Funkční komponenty a háčky byste však měli používat častěji, protože ve srovnání s třídami mají za následek stručnější a čitelnější kód.

Zvažte následující komponentu třídy, která zobrazuje data z API NASA.

třída NasaData rozšiřuje React. Komponent {
 konstruktor (rekvizity) {
 super (rekvizity);
 this.state = {
 údaje: [],
 };
 }
 komponentDidMount() {
 vynést(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 this.setState({
 údaje: json,
 });
 });
 }
 poskytnout() {
 const { data } = this.state;
 if (!data.length)





instagram viewer


 vrátit se (


 Načítání dat... 
{" "}



 );
 vrátit se (
 <>
 Načtěte data pomocí komponenty Class 
{" "}
 {data.map((položka) => (
{item.title}

 ))}
 );
 }
}

Stejnou komponentu lze zapsat pomocí háčků.

const NasaData = () => {
 const [data, setdata] = useState (null);
 useEffect(() => {
 vynést(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 setdata (json);
 });
 }, [data]);
 vrátit se (
 <>
 Načtěte data pomocí komponenty Class 
{" "}
 {data.map((položka) => (
{item.title}

 ))}
 );
};

I když výše uvedený blok kódu dělá totéž jako komponenta třídy, je méně složitý, minimální a snadno pochopitelný, což přispívá k lepší zkušenosti vývojáře.

2. Vyhněte se použití stavu (pokud je to možné)

Stav React sleduje data, která při změně spouštějí opětovné vykreslení komponenty React. Při sestavování aplikací React se co nejvíce vyhýbejte používání stavu, protože čím více stavu používáte, tím více dat musíte v aplikaci sledovat.

Jedním ze způsobů, jak minimalizovat používání státu, je jeho vyhlášení pouze v případě potřeby. Pokud například načítáte uživatelská data z rozhraní API, uložte celý objekt uživatele ve stavu namísto ukládání jednotlivých vlastností.

Místo toho:

const [uživatelské jméno, setusername] = useState('')
const [heslo, setpassword] = useState('')

Udělej tohle:

const [uživatel, setuser] = useState({})

Při rozhodování o struktuře projektu jděte na součást zaměřenou na jeden. To znamená mít všechny soubory týkající se jedné komponenty v jedné složce.

Pokud jste vytvářeli a Navbar komponentu, vytvořte složku s názvem navigační lišta obsahující Navbar samotnou komponentu, šablonu stylů a další soubory JavaSript a asset používané v komponentě.

Jediná složka obsahující všechny soubory komponenty usnadňuje opětovné použití, sdílení a ladění. Pokud potřebujete vidět, jak komponenta funguje, stačí otevřít jednu jedinou složku.

4. Nepoužívejte indexy jako klíčové rekvizity

React používá klíče k jedinečné identifikaci položek v poli. Pomocí klíčů může React určit, která položka byla změněna, přidána nebo odstraněna z pole.

Většinu času při vykreslování polí můžete jako klíč použít index.

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

I když to někdy funguje, použití indexu jako klíče může způsobit problémy, zejména pokud se očekává, že se seznam změní. Zvažte tento seznam.

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

Aktuálně první položka seznamu, „Položka 1” je na indexu nula, ale pokud jste na začátek seznamu přidali další položku,Položka 1” index se změní na 1, což změní chování vašeho pole.

Řešením je použít jako index jedinečnou hodnotu, která zajistí zachování identity položky seznamu.

5. Kde je to možné, volte místo divů fragmenty

Komponenty React musí vracet kód zabalený do jediné značky, obvykle a nebo fragment React. Pokud je to možné, měli byste se rozhodnout pro fragmenty.

Použitím zvyšuje velikost DOM, zejména u velkých projektů, protože čím více značek nebo uzlů DOM máte, tím více paměti vaše webové stránky potřebují a tím více energie prohlížeč spotřebuje k načtení vašeho webu. To vede k nižší rychlosti stránky a potenciálně špatné uživatelské zkušenosti.

Jeden příklad odstranění nepotřebných tagy je nepoužívá při vracení jednoho prvku.

tlačítko const = () => {
 vrátit se Zobrazit;
};

6. Dodržujte konvence pojmenování

Při pojmenovávání komponent byste měli vždy používat PascalCase, abyste je odlišili od jiných nekomponentních souborů JSX. Například: Textové pole, NavMenu, a Tlačítko úspěchu.

Použijte camelCase pro funkce deklarované v komponentách React, jako je handleInput() nebo showElement().

7. Vyhněte se opakujícímu se kódu

Pokud si všimnete, že píšete duplicitní kód, převeďte jej na komponenty, které lze znovu použít.

Například je smysluplnější vytvořit komponentu pro vaši navigační nabídku namísto opakovaného psaní kódu do každé komponenty, která vyžaduje nabídku.

To je výhoda architektury založené na komponentách. Svůj projekt můžete rozdělit na malé součásti, které můžete znovu použít ve své aplikaci.

8. Použijte Object Destructuring pro rekvizity

Namísto předání objektu props použijte k předání názvu podpěry destrukci objektu. Tím odpadá nutnost odkazovat na objekt rekvizity pokaždé, když jej potřebujete použít.

Následuje například komponenta, která používá rekvizity tak, jak jsou.

tlačítko const = (rekvizity) => {
 vrátit se {props.text};
};

S destrukcí objektů odkazujete přímo na text.

const Button = ({text}) => {
 vrátit se {text};
};

9. Dynamicky vykreslovat pole pomocí mapy

Použití mapa() dynamicky vykreslovat opakované bloky HTML. Můžete například použít mapa() vykreslit seznam položek v značky.

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

Pro účely srovnání zde je návod, jak můžete vykreslit seznam bez mapa(). Tento přístup se velmi opakuje.

const List = () => {
 vrátit se (


Položka 1

Položka 2

Položka 3

Položka 4

Položka 5




 );
};

10. Napište testy pro každou komponentu React

Pište testy pro komponenty, které vytvoříte, protože to snižuje možnosti chyb. Testování zajišťuje, že se komponenty chovají tak, jak byste očekávali. Jedním z nejběžnějších testovacích rámců pro React je Jest a poskytuje prostředí, kde můžete provádět své testy.

Ačkoli je React poněkud flexibilní, pokud jde o to, jak jej můžete používat, dodržování konkrétních postupů vám pomůže získat ze své zkušenosti maximum.

Při dodržování těchto tipů mějte na paměti svůj konkrétní projekt a cíle; některé budou v určitých případech relevantnější než jiné.

Jak používat API v React Using Fetch a Axios

Chcete vědět, jak používat API? Pochopení toho, jak používat API v Reactu, je klíčovým prvkem používání API.

Přečtěte si další

O autorovi