Lekce 24 - React Concurrent Mode - Základy

V předchozí lekci, Optimalizace React aplikací, jsme si ukázali strategie pro optimalizaci React aplikací, konkrétně jsme se zaměřili na code splitting a memoizaci.

V dnešním tutoriálu pokročilého Reactu si představíme Concurrent Mode a vysvětlíme si jeho důležitost pro zlepšení uživatelského zážitku.

React Concurrent Mode

React Concurrent Mode byl vyvinutý, aby vyřešil několik klíčových problémů týkajících se odezvy uživatelského rozhraní v komplexních webových aplikacích. Umožňuje paralelní vykreslování podle prioritizace, což pomáhá k lepšímu uživatelskému zážitku. Hlavní vlákno aplikace totiž není blokované méně urgentními úkoly trvajícími delší dobu a aplikace má lepší odezvu na akce uživatele.

Kořenová komponenta pro Concurrent Mode

Před uvedením React Concurrent Mode se kořenová komponenta vytvářela pomocí funkce ReactDOM.render():

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// Vytvoření kořenové komponenty
ReactDOM.render(<App />, document.getElementById('root'));

V tomto příkladu vezme metoda render() kořenovou komponentu <App /> a vykreslí ji na stránce do HTML elementu s ID root.

S příchodem React Concurrent Mode byla představena nová funkce createRoot(). Použití této funkce vypadá takto:

...konec náhledu článku...
Pokračuj dál