Prvky jsou nejmenší stavební bloky aplikací React.
Prvek popisuje, co chcete vidět na obrazovce:
const element = <h1>Hello, world</h1>;Na rozdíl od prvků prohlížeče DOM jsou prvky React jednoduché a jednoduše vytvořitelné objekty. React DOM se postará o aktualizaci DOM tak, aby odpovídala prvkům React.
Rendering prvků do DOM
Řekněme, že někde v našem HTML souboru existuje prvek < div >
<div id="root"></div>Tento uzel nazýváme "root" (kořenovým) uzlem DOM, protože vše, co je uvnitř, bude spravováno nástrojem React DOM.
Aplikace postavené pouze Reactem mají obvykle jeden uzel větve DOM. Pokud integrujete React do stávající aplikace, můžete mít mnoho izolovaných kořenových uzlů DOM, jak budete potřebovat.
Chcete-li vykreslit prvek React do kořenového uzlu DOM, použijte ReactDOM.render():
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));Na stránce bude zobrazeno "Hello, world".
Aktualizace vykresleného prvku
Objekty v Reactu jsou immutable. Jednou vytvořený element nemůžeme změnit potomkem nebo atributem. Prvek je jako jeden snímek ve filmu: představuje uživatelské rozhraní v určitém okamžiku.
Podle dosavadních znalostí je jediným způsobem, jak aktualizovat uživatelské rozhraní, vytvořit nový prvek a předat ho ReactDOM.render().
GitHub
Každou sekundu se volá ReactDOM.render() z setInterval().
React aktualizuje pouze co je potřeba
React DOM porovná prvek a jeho potomky s předchozím modelem DOM a ten z aktualizuje pouze podle požadovaného stavu.
Kontrolou funkčnosti posledního příkladu můžete provést pomocí nástrojů prohlížeče:
I když vytvoříme element, který popisuje celý strom UI na každém klíči, aktualizuje se pouze textový uzel, jehož obsah se změnil React DOM.
Podle našich zkušeností, přemýšlení o tom, jak by měl UI vypadat v daném okamžiku spíše než jakým způsobem to změnit, vylučuje celou třídu chyb.