Co je nového v React 18: Klíčové funkce k vyzkoušení

React je velmi populární open-source JavaScript knihovna vytvořená Facebookem v roce 2013. Díky jeho flexibilitě mnoho vývojářů využívá některé z jeho funkcí při vytváření rychlých, efektivních a opakovaně použitelných komponent uživatelského rozhraní (UI).

V březnu 2022 tým spustil nejnovější a očekávanou verzi knihovny React, React 18, která obsahuje nové funkce, které se zaměřují na zlepšení výkonu aplikace.

Nové funkce v React 18

React 18 obsahuje některé užitečné nové funkce přidané do open-source JavaScriptová knihovna. Mnohé z těchto změn nebyly v předchozí verzi, zatímco jiné funkce byly vylepšeny. Některé z těchto funkcí zahrnují; nové kořenové API, automatické dávkování, Transition API, Suspense API a vydání nových háčků.

Nové kořenové API

Kořenové API v Reactu sleduje, jak se komponenta nejvyšší úrovně vykresluje ve stromu. V předchozích verzích Reactu, poskytnout byla použita k provedení vykreslování, které se nyní nazývá starší kořenové API.

React 18 však přichází s novým kořenovým API, které vytváří root pomocí createRoot a poté vykreslí komponentu React do vytvořeného kořenového adresáře pomocí poskytnout metoda.

Toto nové kořenové rozhraní API vám umožní přístup k funkcím v této nedávné verzi, jako je funkce přechodového rozhraní API, o které se bude mluvit později. Zatímco starý způsob bude v React 18 stále fungovat, v budoucnu může být vyřazen.

Níže uvedený úryvek ukazuje, jak je strukturováno kořenové rozhraní API ve starších i nových způsobech.

Legacy Root API

import ReactDOM z'react-dom';
import Aplikace z'./Aplikace';
ReactDOM.render(<Aplikace />, dokument.getElementById('aplikace'))

Nové kořenové API

import ReactDOM z'react-dom/client';
import Aplikace z'./Aplikace';
konst root = ReactDOM.createRoot(dokument.getElementById('aplikace'));
root.render(<Aplikace />)

Automatické dávkování

Dávkování v Reactu zahrnuje více aktualizací stavu v jediném opětovném vykreslení při každé události prohlížeče, například a klikněte na událost. Žádné změny stavu, ke kterým došlo mimo událost, jako je příslib nebo zpětné volání, nebudou dávkovány.

S React 18 se dávkové aktualizace stavu provádějí automaticky bez ohledu na to, kde k těmto aktualizacím dochází. Tato funkce poskytuje hned po vybalení vylepšení výkonu a doby vykreslování. Pokud však máte stav komponenty, který nechcete dávkovat, můžete se z něj odhlásit pomocí flushSync metoda. Níže je ukázkový úryvek, jak to lze provést;

import { flushSync } z'react-dom';
funkcekliknout na kliku() {
 flushSync(() => {
 setCount(počet => počítat + 1);
]});
 flushSync(() => {
 setStore(obchod => !obchod);
});
}

Přechodové API

V Reactu lze aktualizace provedené v uživatelském rozhraní kategorizovat jako naléhavé a přechodové aktualizace také nazývané jako neurgentní. Příkladem urgentní aktualizace může být případ zadání textu do pole, zatímco přechodovou aktualizací může být funkce filtrování vyhledávání.

Pokud by se takové aktualizace vyskytly současně, mohlo by to být označeno jako náročná operace a mohlo by to vést k zamrznutí vaší aplikace. Chcete-li tento problém vyřešit, je to místo, kde přechodové API nazývá startTransition přijde hrát. Tato nová funkce říká Reactu, jaké aktualizace by měly být označeny jako „přechody“, což zase zlepšuje interakce uživatelů. Zde je ukázka kódu, jak to funguje;

import { startTransition } z"reagovat";
startTransition(() => {
 setSearch (vstup);
});

Napětí

Když je aplikace vykreslena na serveru, do prohlížeče se vrátí statický soubor HTML, který uživateli umožní vidět, jak aplikace vypadá, zatímco se načítá JavaScript. Když je soubor načten, HTML se stane dynamickým s tím, co je známé jako hydratace. Nedostatkem je, že pokud toto vše není na místě, vaše aplikace by se nestala interaktivní.

K vyřešení tohoto problému poskytuje React 18 dvě nové funkce vykreslování na straně serveru (SSR) pomocí Napětí komponent;

• Streamování HTML umožňuje posílat části komponenty, jakmile se vykreslí.
• Selektivní hydratace upřednostňuje interaktivitu komponent vybraných uživatelem.

Nové háky

Jedním velkým zlomem pro React bylo představení háčky v Reactu verze 16, která umožňuje funkčním komponentám přístup ke stavům a dalším funkcím Reactu bez psaní tříd. React 18 se dodává s pěti novými háky, které mají vývojářům zlepšit zážitek;

• useId: Tento hák nám umožňuje vytvořit jedinečný identifikátor (ID) v naší aplikaci na serveru i na klientovi.
• useTransition: Používá se vedle startTransition vytvořit novou aktualizaci stavu, kterou lze označit jako neurgentní.
• useDefferedValue: Umožňuje odložit aktualizace, které jsou méně naléhavé.
• useSyncExternalStore: Tento háček je užitečný při implementaci předplatného na externí zdroje dat.
• useInsertionEffect: Tento háček je omezen na autory knihoven CSS-in-JS pro vkládání stylů do DOM.

Jak aktualizovat na React 18

K provedení aktualizace lze použít správce balíčků npm nebo příze spuštěním následujícího příkazu v terminálu.

npm Nainstalujte reagovat reagovat-dom

nebo

příze přidat reagovat reagovat-dom 

Poté budete muset provést změnu v index.js soubor v kořenovém adresáři složky projektu ze staršího rozhraní API do nového kořenového rozhraní API, jak bylo uvedeno výše.

Jak založit nový projekt React 18

Pro nastavení nového projektu React 18 se nainstaluje balíček create-react-app s npm nebo yarn v terminálu;

npx vytvořit-react-app my-react-app

nebo

přidat přízi vytvořit-react-app my-react-app

Zlepšete výkon své aplikace s React 18

Nyní víte o některých nových funkcích v React 18, jako je nové kořenové API, Suspense, Transition nebo Automatic Batching, a jak upgradovat na tuto novou verzi a nastavit ji od začátku.

Tyto nedávné změny Reactu jsou pro vás připraveny hned teď.