15 Reagujte na doporučené postupy, které musíte dodržovat v roce 2020

15 Reagujte na doporučené postupy, které musíte dodržovat v roce 2020

15 Reagujte na doporučené postupy, které musíte dodržovat v roce 2020
СОДЕРЖАНИЕ
02 июня 2020

Reagujte na osvědčené postupy


Pokud jste vývojovým klientem frontendu, který se zabývá budováním vysoce interaktivních uživatelských rozhraní, máte pravděpodobně ve svém balíčku nástrojů React. Při práci na kreacích založených na React byste měli být opatrní a dělat věci v souladu s doporučenými postupy React. Pomůže vám to lépe uspořádat váš kód.

Jak víte, React je knihovna vytvořená společností Facebook a umožňuje integraci s mnoha zajímavými komponentami. Ve skutečnosti může každý vývojář vytvořit své vlastní komponenty a zpřístupnit je komunitě.

Dnes si vezmeme téma a ukážeme vám nejzákladnější osvědčené postupy React:

�� 1. Udržujte součásti malé a specifické podle funkce

Jak všichni víme, s Reactem je možné mít obrovské komponenty, které vykonávají řadu úkolů. Lepší způsob, jak navrhnout komponenty, je však udržet je malý, takže jedna součást odpovídá jedné funkci. V ideálním případě by jedna součást měla vykreslit konkrétní bit vaší stránky nebo upravit určité chování. Existuje mnoho výhod:

  • Komponenty specifické pro jednotlivé funkce mohou být samostatné, což usnadňuje testování a údržbu.
  • Každá malá součást může být znovu použita ve více projektech.
  • Komponenty provádějící obecné funkce mohou být zpřístupněny komunitě.
  • U menších součástí je snazší implementovat optimalizace výkonu.
  • Je snazší aktualizovat menší součásti.
  • Větší komponenty musí pracovat tvrději a jejich údržba může být obtížná.

Rovnováha mezi vytvořením jedné stručné komponenty a vytvořením více komponent specifických pro jednotlivé funkce se může v jednotlivých organizacích lišit. Koneckonců můžete mít tolik komponent, kolik chcete, a znovu je kombinovat jakýmkoli způsobem, chcete-li dosáhnout stejného konečného výsledku.

♻️ 2. Opakovaná použitelnost je důležitá, proto udržujte vytváření nových součástí na minimu

Dodržováním pravidla jedné funkce = jedné komponenty můžete zlepšit opětovnou použitelnost komponent. To znamená, že byste měli vynechat pokus o sestavení nové komponenty pro funkci, pokud již pro tuto funkci existuje.

Opakovaným použitím komponent v celém projektu nebo v libovolném počtu projektů nejen dosáhnete konzistence, ale také přispějete do komunity.

Na druhou stranu, pokud se některá součást stane obrovskou, těžkopádnou a obtížně udržovatelnou, je lepší ji rozdělit na tolik menších součástí, kolik je potřeba.

Například můžete dokonce jít dále a vytvořit komponentu Button, která zvládne ikony. Poté, kdykoli budete potřebovat tlačítko, budete muset použít komponentu. Jeho modulárnější vám umožní pokrýt mnoho případů stejným kódem. Musíte namířit někam uprostřed. Vaše komponenty by měly být dostatečně abstraktní, ale neměly by být příliš složité.

třída IconButton rozšiřuje React.Component {
[…]
poskytnout() {
vrátit se (

);
}
}

�� 3. Upevněte duplicitní kód – VYSUŠTE kód

Společným pravidlem pro veškerý kód je udržovat jej co nejkratší a výstižný.

Tady se to také neliší, protože nejlepší postupy React vám také dávají pokyn, aby byl kód stručný a přesný. Jedním ze způsobů, jak toho dosáhnout, je zabránit duplicitě – Don’t Repeat Yourself (DRY).

Toho můžete dosáhnout prozkoumáním kódu z hlediska vzorců a podobností. Pokud nějaký najdete, je možné, že opakujete kód a existuje prostor pro vyloučení duplikace. S největší pravděpodobností může trochu přepisování učinit stručnější.

To se silně spoléhá na princip opakovaného použití v React. Řekněme, že chcete přidat více tlačítek, která obsahují ikony, namísto přidání označení pro každé tlačítko můžete jednoduše použít komponentu IconButton, kterou jsme zobrazili výše. Mohli byste dokonce jít dále mapováním všeho do pole.

const buttons = [‘facebook’, ‘twitter’, ‘youtube’];

vrátit se (

{
buttons.map ((button) => {
vrátit se (

);
})
}

);

�� 4. Vložte CSS do JavaScriptu

Když začnete pracovat na projektu, je běžné udržovat všechny styly CSS v jediném souboru SCSS. Použití globální předpony zabraňuje případným kolizím názvů. Když se však váš projekt rozšíří, nemusí být toto řešení proveditelné.

Existuje mnoho knihoven, které umožňují psát CSS v JS. EmotionJS a Okouzlující jsou dvě nejpopulárnější CSS v knihovnách JS.

Zde je příklad použití EmotionJS ve vašem projektu. EmotionJS může pro vaši produkci generovat kompletní CSS soubory. Nejprve nainstalujte EmotionJS pomocí npm.

npm install –save @ emotion / core

Dále musíte do aplikace importovat EmotionJS.

importovat {jsx} z ‘@ emotion / core’

Můžete nastavit vlastnosti prvku podle níže uvedeného úryvku:

nechť komponenta = rekvizity => {
vrátit se (

)
}

Zde je odkaz na kompletní dokumentace EmotionJS.

�� 5. Komentář pouze v případě potřeby

K kódu připojujte komentáře pouze v případě potřeby. To není jen v souladu s osvědčenými postupy React, ale také slouží dvěma účelům současně:

  • Udržuje kód vizuálně nepřehledný.
  • Vyhnete se potenciálnímu konfliktu mezi komentářem a kódem, pokud se náhodou změníte později.

Name 6. Pojmenujte komponentu podle funkce

Je vhodné pojmenovat komponentu podle funkce, kterou provádí, aby byla snadno rozpoznatelná.

Například ProductTable – okamžitě zprostředkovává, co komponenta dělá. Na druhou stranu, pokud pojmenujete komponentu podle potřeby kódu, může vás to v budoucnu zmást..

Jiným příkladem je lepší pojmenovat součást Avatar, aby ji bylo možné použít kdekoli – pro autory, uživatele nebo v komentářích. Místo toho, pokud pojmenujeme komponentu AuthorAvatar v kontextu jejího použití, omezíme její užitečnost.

Kromě toho, pojmenování komponenty po této funkci činí komunitu užitečnější, protože je pravděpodobnější, že bude objevena.

�� 7. Pro názvy komponent použijte velká písmena

Pokud stejně jako většina lidí používáte JSX (rozšíření JavaScriptu), musí názvy vytvořených komponent začínat velkými písmeny. Například pojmenujete komponenty jako SelectButton namísto selectbutton, nebo Menu namísto menu. Děláme to proto, aby je JSX mohla identifikovat odlišně od výchozích značek HTML.

Dřívější verze React udržovaly seznam všech vestavěných jmen, aby se odlišily od vlastních jmen. Ale protože seznam potřeboval neustálé aktualizace, bylo to vyřazeno a hlavní města se stala normou.

V případě, že JSX není vaším jazykem, můžete použít malá písmena. To však může snížit opakovatelnost součástí mimo váš projekt.

�� 8. Nezapomeňte na další konvence pojmenování

Při práci s Reactem obvykle používáte soubory JSX (JavaScript Extension). Každá součást, kterou vytvoříte pro React, by proto měla být pojmenována v Pascalu nebo v případě velkého velblouda. To se překládá na jména bez mezer a velká písmena prvního písmena každého slova.

Pokud chcete vytvořit funkci, která odešle formulář, měli byste jej pojmenovat SubmitForm v horním velbloudu, spíše než submitForm, submit_form nebo submit_form. Horní případ velblouda se běžně nazývá Pascal. Tady je další seznam příkladů názvů proměnných a funkcí v případě Pascalu.

�� 9. Oddělte stavové aspekty od vykreslování

Složky v React mohou být stavové nebo bez státní příslušnosti. Stavové komponenty ukládají informace o stavu komponenty a poskytují nezbytný kontext. Naproti tomu komponenty bez státní příslušnosti nemají paměť a nemohou dávat kontext jiným částem uživatelského rozhraní. Dostanou pouze rekvizity (vstupy) z nadřazené komponenty a vrátí vám prvky JSX. Jsou škálovatelné a znovu použitelné a podobné čisté funkci v JavaScriptu.

Jednou z doporučených postupů React je udržovat vaši stavovou logiku načítání dat odděleně od logiky vykreslování bez státní příslušnosti. Pro načtení dat je lepší mít jednu stavovou komponentu a druhou složku bez státní příslušnosti, která tato data zobrazí. To snižuje složitost komponent.

Novější verze React v16.8 mají novou funkci – React Hooks, která zapisuje stavové komponenty související s funkcemi. To může nakonec eliminovat potřebu komponent založených na třídě.

Vaše aplikace například načítá některá data na připojovacím zařízení. Chcete spravovat data v hlavní komponentě a předat složitou úlohu vykreslení do dílčí komponenty jako rekvizity.

import RenderTable z ‘./RenderTable’;

třída tabulka rozšiřuje komponentu {
state = {loading: true};

poskytnout() {
const {loading, tableData} = this.state;
zpětné načítání? :;
}

componentDidMount () {
fetchTableData (). then (tableData => {
this.setState ({loading: false, tableData});
});
}
}

�� 10. Kód by měl být spuštěn podle očekávání a měl by být testovatelný

Ve skutečnosti toto pravidlo nepotřebuje žádné vysvětlení. Kód, který píšete, by se měl chovat podle očekávání a měl by být snadno a rychle testovatelný. Doporučujeme pojmenovat testovací soubory shodné se zdrojovými soubory s příponou .test. Poté bude snadné najít testovací soubory.

Pomocí JEST můžete otestovat svůj kód React.

�� 11. Všechny soubory související s jednou komponentou by měly být v jedné složce

Uchovávejte všechny soubory týkající se jedné komponenty v jedné složce, včetně stylingových souborů.

Pokud nějaká malá komponenta používá pouze konkrétní komponenta, má smysl ponechat tyto menší komponenty pohromadě ve složce komponenty. Hierarchie bude potom snadno srozumitelná – velké komponenty mají svou vlastní složku a všechny jejich menší části jsou rozděleny do podsložek. Tímto způsobem můžete snadno extrahovat kód do jakéhokoli jiného projektu nebo ho kdykoli upravit.

Například pro komponentu Form by všechny kusy, jako jsou soubory CSS, ikony, obrázky, testy a jakékoli další podsložky související s formulářem, měly být všechny umístěny ve stejné složce. Pokud soubory pojmenováváte rozumně a související soubory logicky udržujete pohromadě, nebudete mít potíže najít je později.

�� 12. Používejte nástroje jako Bit

Jednou z osvědčených postupů React, která pomáhá organizovat všechny vaše komponenty React, je použití nástrojů jako Bit.

Tyto nástroje pomáhají udržovat a znovu používat kód. Kromě toho pomáhá kódu stát se objevitelným a podporuje týmovou spolupráci při vytváření komponent. Kód lze také synchronizovat napříč projekty.

�� 13. Používejte knihovny úryvků

Úryvky kódu vám pomohou držet krok s nejlepší a nejnovější syntaxí. Pomáhají také udržovat váš kód relativně bez chyb, takže je to jeden z doporučených postupů React, na který byste si neměli nechat ujít.

Existuje mnoho knihoven úryvků, které můžete použít, například ES7 React, Redux, JS Snippets atd..

✍️ 14. Napište testy pro všechny kódy

V jakémkoli programovacím jazyce zajišťuje odpovídající testování, že jakýkoli nový kód přidaný do projektu se dobře integruje s existujícím kódem a nenaruší stávající funkčnost. Je dobré psát testy pro všechny nové komponenty, které vytvoříte. Doporučujeme vytvořit adresář __Test__ v adresáři komponenty, ve kterém budou umístěny všechny relevantní testy.

Testy v React můžete rozdělit do dvou částí: testování funkčnosti komponent pomocí aplikace React a testy v kompletní aplikaci, jakmile se vykreslí v prohlížeči. K testování ve druhé kategorii můžete použít testovací nástroje pro více prohlížečů.

Pro první z nich můžete použít testovací běžec JavaScript, Žert emulovat HTML DOM pomocí jsdom k testování komponent React. Zatímco zcela přesný test je možný pouze v prohlížeči na reálném zařízení, Jest poskytuje dobrou aproximaci skutečného testovacího prostředí během vývojové fáze projektu.

�� 15. Řiďte se pravidly o linkování, rozdělte příliš dlouhé čáry

Linting je proces, ve kterém spouštíme program, který analyzuje kód na možné chyby.

Většinou je používáme pro jazykové problémy. Může však také automaticky opravit mnoho dalších problémů, zejména styl kódu. Použití linteru v kódu React pomáhá udržet váš kód relativně bez chyb a bez chyb.

Závěrečná slova o doporučených postupech React

Doufám, že tento seznam doporučených postupů React vám pomůže uvést vaše projekty na správnou cestu a vyhnout se případným problémům později na cestě.

Pokud máte nějaké dotazy týkající se Reactu, můžete je odeslat do níže uvedených komentářů.

Nezapomeňte se připojit k našemu havarijnímu kurzu při urychlení vašeho webu WordPress. Pomocí několika jednoduchých oprav můžete zkrátit dobu načítání až o 50–80%:

Příklady kódu Andrei Băicuș. Aktualizace obsahu od Shaumik Daityari

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector