Fragmenty React (React Fragments) pozwalają na grupowanie listy dzieci bez dodawania dodatkowego węzła do drzewa DOM. Jest to przydatne, gdy chcemy zwrócić wiele elementów z komponentu bez dodawania dodatkowego elementu HTML.
Użycie Fragmentów React:
- Użycie skróconej składni Fragmentu:
function ExampleComponent() { return ( <> <h1>Tytuł</h1> <p>To jest akapit.</p> </> ); }
- Użycie pełnej składni Fragmentu:
import React, { Fragment } from 'react'; function ExampleComponent() { return ( <Fragment> <h1>Tytuł</h1> <p>To jest akapit.</p> </Fragment> ); }
Fragmenty React są przydatne do optymalizacji struktury DOM i unikania niepotrzebnych węzłów, które mogą wpływać na stylowanie i wydajność aplikacji.