Před pár měsíci konečně vyšel dlouho očekávaný React v18. Přestože nedošlo k žádným zásadním změnám, byly přidány některé zajímavé funkce, které stojí za pozornost. Tento článek se bude zabývat některými novými doplňky a tím, jak upgradovat na React v18.

Jak upgradovat na React 18

Chcete-li nainstalovat nejnovější verzi Reactu, spusťte tento příkaz v terminálu:

npm Nainstalujte reagovat reagovat-dom

Nebo pokud používáte přízi:

příze přidat reagovat reagovat-dom

Jakmile nainstalujete nejnovější verzi, můžete začít využívat její nové funkce.

V Reactu 18 je několik dodatků; zde jsou čtyři z nejpozoruhodnějších.

1. Přísný režim

StrictMode je funkce, kterou můžete použít ke zvýraznění potenciálních problémů v aplikaci. Kontroly přísného režimu probíhají pouze ve vývojovém režimu a neovlivní produkční sestavení. Mohou však být velmi užitečné při identifikaci potenciálních problémů ve vašem kódu.

Přísný režim můžete povolit pro kteroukoli část vaší aplikace. Můžete jej například povolit pro všechny vaše komponenty nebo jen pro některé z nich.

instagram viewer 
import Reagovat z 'reagovat';
funkceDemoPříklad() {
vrátit se (
<div>
<První složka />
<Reagovat. StrictMode>
<Druhá složka />
<Třetí složka />
</React.StrictMode>
<Čtvrtá složka />
</div>
 );
}

Ve výše uvedeném kódu by všechny čtyři součásti byly zkontrolovány na potenciální problémy. Přísné kontroly režimu se však budou vztahovat pouze na a .

StrictMode také pomáhá jinými způsoby, například:

  • Identifikace součástí s nebezpečnými životními cykly: Pokud má komponenta metodu životního cyklu, která je označena jako nebezpečná, přísný režim vás na to upozorní.
  • Upozornění na použití staršího řetězce ref API: Pokud používáte starší API string ref, přísný režim vás upozorní na jeho použití.
  • Upozornění na zastaralé použití findDOMNode: Pokud používáte zastaralé findDOMNode API, přísný režim vás na to upozorní.
  • Detekce neočekávaných vedlejších účinků: Pokud komponenta spouští vedlejší efekty (jako je setState) na neočekávaných místech, přísný režim vás na to upozorní.
  • Detekce staršího kontextového rozhraní API: Pokud používáte starší kontextové API (které je nyní zastaralé), přísný režim vás na to upozorní.
  • Zajištění znovupoužitelného stavu: Pokud máte stav, který používá více komponent, přísný režim pomůže zajistit jeho správnou synchronizaci.

Celkově může být přísný režim užitečnou funkcí ve vývoji, která pomůže identifikovat potenciální problémy ve vašem kódu.

2. Přechody

Přechody vám umožňují označit určité aktualizace uživatelského rozhraní jako nenaléhavé. To znamená, že React může upřednostňovat další aktualizace, které jsou důležitější.

Pokud máte například dvě textová pole – jedno pro vyhledávací dotaz a druhé pro jeho výsledky – budete chtít textové pole výsledků vyhledávání označit jako přechodové. Tímto způsobem React ví, že nemusí naléhavě znovu vykreslovat toto textové pole pokaždé, když uživatel zadá něco do textového pole vyhledávacího dotazu.

K označení aktualizace uživatelského rozhraní jako přechodu můžete použít funkci startTransition. Zde je příklad:

import { startTransition } z 'reagovat';
startTransition(() => {
// Označte všechny aktualizace stavu, které nejsou naléhavé, jako přechody
});

Tento kód by označil všechny aktualizace stavu uvnitř funkce startTransition jako přechody. React se tak může soustředit na další důležitější aktualizace uživatelského rozhraní.

3. Automatické dávkování

React poskytuje užitečnou funkci zvanou batching, která snižuje počet opakovaných renderů, ke kterým dochází při změně stavu. To může být velmi užitečné při optimalizaci výkonu, zejména když práce s asynchronním kódem.

Pokud jste dříve měli příslib nebo prováděli síťové volání, aktualizace stavu by nebyly dávkovány a React by se musel několikrát znovu vykreslit. S automatickým dávkováním v React 18 jsou však všechny aktualizace stavu dávkovány, a to i v rámci slibů, setTimeoutů a zpětných volání událostí. To výrazně snižuje práci, kterou musí React dělat na pozadí.

Aktualizace stavu můžete dávkovat ručně pomocí funkce flushSync, ale od React 18 je tento proces nyní automatický. Výsledkem je mnohem lepší výkon, protože React počká na dokončení mikroúlohy, než ji znovu vykreslí.

4. Nové háky

Verze 18 přináší mnoho novinek Reagovat háčky, včetně useId, useTransition a useDeferredValue. Tyto nové háčky poskytují skvělý způsob, jak přidat další funkce do aplikací React s minimálním úsilím.

Reagovat 18 Přináší zvýšený výkon aplikací

React 18 je tady a přináší s sebou několik skvělých vylepšení výkonu webových aplikací. S novou verzí Reactu můžete snadno vytvářet webové aplikace, které lépe reagují a celkově fungují lépe. Pokud tedy chcete vytvořit webovou aplikaci, která běží hladce a vypadá skvěle, určitě se podívejte na React 18.