Osvědčené postupy, které lze letos na Reactu dodržovat

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

Některé z doporučených postupů React, které byste měli dodržovat, abyste zlepšili výkon své aplikace, jsou uvedeny níže, abyste je mohli využít. Podívejte se, jak vytvořit chatovací aplikaci pomocí React a Firebase.

1. Místo tříd použijte komponenty a háky

V Reactu můžete používat třídy nebo funkční komponenty s Hooks. 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.

Zde je výňatek z bloku třídy zobrazující data z API NASA.

class NasaData extends React.Component {
 constructor(props) {
 super(props);

this.state = {
 data: [],
 };
 }

componentDidMount() {
 fetch(“
 .then((res) => res.json())
 .then((json) => {
 this.setState({
 data: json,
 });
 });
 }

render() {
 const { data } = this.state;

if (!data.length)
 return (
 <div>
 <h1> Fetching data…. </h1>{“ “}
 </div>
 );

return (
 <>
 <h1> Fetch data using Class component </h1>{“ “}
 {data.map((item) => (
 <div key={item.id}>{item.title}</div>
 ))}
 </>
 );
 }
}

Stejnou klauzuli můžete napsat pomocí Hooks:

const NasaData = () => {
 const [data, setdata] = useState(null);

useEffect(() => {
 fetch(“
 .then((res) => res.json())
 .then((json) => {
 setdata(json);
 });
 }, [data]);

return (
 <>
 <h1> Fetch data using Class component </h1>{“ “}
 {data.map((item) => (
 <div key={item.id}>{item.title}</div>
 ))}
 </>
 );
};

Zatímco výše uvedený kód dělá totéž jako komponenta třídy, je méně složitý, méně ohraničený a snadno pochopitelný.

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

Stav React uchovává data, která po změně způsobí, že se komponenta React znovu objeví. 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 ve své aplikaci uchovat.

Jedním ze způsobů, jak omezit používání stavu, je deklarovat jej 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 jednotlivých vlastností.

Také číst  Jak nainstalovat VPN na Raspberry Pi

místo následujícího:

const [username, setusername] = useState(‘’)
const [password, setpassword] = useState(‘’)

Můžete provést následující:

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

3. Uspořádejte soubory související se stejnou komponentou do jedné složky

Při výběru struktury složek pro vaši aplikaci React zvažte použití struktury orientované na komponenty. To znamená, že všechny soubory související s jednou komponentou jsou uloženy v jedné složce.

Když například vytvoříte zásuvný modul Navbar, vytvoříte složku s názvem Navbar, která obsahuje soubor zásuvného modulu, šablonu stylů, soubory javascriptu a další prostředky používané v zásuvném modulu.

Jediná složka obsahující všechny dílčí soubory usnadňuje jejich opětovné použití, sdílení a ladění. Chcete-li vidět, jak plugin funguje, stačí otevřít složku a procházet její obsah.

Mezi další doporučené postupy pro složku React patří:

  1. Pomocí indexových souborů shrňte podrobnosti implementace vašeho souboru součásti. Podívejte se na příklad Navbar, vytvořte složku Navbar a přidejte do ní dílčí soubor s názvem index.js (nebo .ts).
  2. Opakovaně použitelné díly ukládejte do samostatné složky. Pokud máte komponenty, které používá více než jedna část vaší aplikace, zvažte jejich uložení v pojmenované složce Komponenty. To vám pomůže je snadno najít.
  3. Uložte funkce nástroje do samostatné složky, jako je složka lib nebo složka Assistants. To usnadňuje správu a opětovné použití těchto funkcí později.

4. Nepoužívejte indexy jako hlavní rekvizity

React používá klíče k jedinečné identifikaci prvků v poli. Klávesy umožňují React označit, který prvek byl změněn, přidán nebo odstraněn z pole.

Index můžete použít jako klíč při vykreslování polí.

const Items = () => {
 const arr = [“item1”, “item2”, “item3”, “item4”, “item5”];

return (
 <>
 {arr.map((elem, index) => {
 <li key={index}>{elem}</li>;
 })}
 </>
 );
};

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 = [“item1”, “item2”, “item3”, “item4”, “item5”];

Aktuálně je první položka seznamu „Položka1“ na indexu nula, ale přidáním další položky na začátek seznamu se index změní z „Položka1“ na 1, což změní chování vašeho pole.

Také číst  Přenos souborů na vzdálenou plochu v systému Windows

Řešením je použití jedinečné hodnoty jako indexu, aby bylo zajištěno zachování identity položky seznamu.

5. Kdykoli je to možné, zvolte Divs místo Divs

Komponenty React musí vracet kód uzavřený v jedné značce, obvykle a

nebo Reagovat úryvek. Měli byste si vybrat díly, kdykoli je to možné.

Používat

zvětšete velikost DOM, zejména ve velkých projektech, protože čím více značek nebo uzlů DOM máte, tím více paměti váš web potřebuje, tím více energie prohlížeč spotřebuje k načtení webu. To má za následek nižší rychlost stránky a potenciálně špatnou uživatelskou zkušenost.

Příklad mazání nepotřebných

tagy je nepoužívá při vracení jednoho prvku.

const Button = () => {
 return <button>Display</button>;
};

6. Dodržujte konvence pojmenování

Při pojmenovávání komponent vždy používejte PascalCase (odstraňte mezery a první písmeno každého slova na velké písmeno), abyste je odlišili od jiných nekomponentních souborů JSX. Například: TextField, NavMenu a SuccessButton.

Použijte CamelCase (pište věty bez mezer nebo interpunkce, slova jsou oddělena jedním velkým písmenem) pro funkce deklarované v komponentách React, jako je handleInput() nebo showElement().

7. Vyhněte se redundantnímu kódu

Pokud zjistíte, že píšete redundantní kód, přeměňte jej na opakovaně použitelné komponenty.

Například je smysluplnější vytvořit komponentu pro vlastní navigační nabídku, než opakovaně psát kód do každé komponenty, která vyžaduje nabídku.

To je výhoda blokové architektury. Svůj projekt můžete rozdělit na malé součásti, které můžete znovu použít v celé své aplikaci. Přečtěte si, jak vytvořit přehrávač videa v Reactu.

Také číst  Způsoby, jak zrychlit spuštění systému Windows 11

8. K získání rekvizit použijte atribuci rozkladu

Místo předávání objektu props použijte k předání názvu vlastnosti dekonstrukční mapování objektu. To neguje potřebu odkazovat na objekt Props pokaždé, když jej potřebujete použít.

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

const Button = (props) => {
 return <button>{props.text}</button>;
};

Mapování členění objektů umožňuje odkazovat přímo na text.

const Button = ({text}) => {
 return <button>{text}</button>;
};

9. Zobrazte pole dynamicky pomocí mapy

Použijte map() k dynamickému zobrazení opakovaných bloků HTML. Můžete například použít map() k vložení seznamu prvků

  • zobrazit značky.

    const Items = () => {
     const arr = [“item1”, “item2”, “item3”, “item4”, “item5”];
    
    return (
     <>
     {arr.map((elem, index) => {
     <li key={elem+index}>{elem}</li>;
     })}
     </>
     );
    };

    Pro srovnání zde je návod, jak zobrazit seznam bez map(). Tento přístup se velmi opakuje.

    const List = () => {
     return (
     <ul>
     <li>Item1</li>
     <li>Item2</li>
     <li>Item3</li>
     <li>Item4</li>
     <li>Item5</li>
     </ul>
     );
    };

    10. Napište testy pro každou část reakce

    Pište testy pro komponenty, které sestavujete, protože snižují pravděpodobnost chyb. Testování zajišťuje, že se komponenty chovají tak, jak očekáváte. Jest je jedním z nejoblíbenějších testovacích rámců v Reactu a poskytuje vám prostředí pro spouštění testů. Podívejte se, jak vytvořit objekty přetažením v Reactu.

    React je mocný rámec, ale musíte dodržovat určité postupy

    I když je React velmi flexibilní v tom, jak jej používáte, dodržování konkrétních postupů vám pomůže vytěžit ze své zkušenosti maximum.

    Při dodržování těchto tipů mějte na paměti svůj projekt a cíle, protože různé osvědčené postupy Reactu mohou být v různých kontextech relevantnější. Například projekt s malým týmem a omezeným rozsahem nemusí vyžadovat stejnou úroveň organizace složek jako velký projekt s více týmy spolupracujícími společně. Nyní můžete vidět, jak přispívat do open source projektů jako začátečník.