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í.

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.

Ř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

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

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

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

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

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

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