Komponenta » Historie » Revize 14
Revize 13 (Jiří Trefil, 2023-03-26 20:28) → Revize 14/15 (Jiří Trefil, 2023-03-26 20:28)
h1. Komponenta Jak již bylo řečeno, komponenty jsou základní stavební kámen React aplikací. Komponenty by měly dodržovat *single responsibility principle* - pokud je komponenta moc složitá a dělá moc věcí, je k zamyšlení, zda se nedá rozlámat do více nezávislých komponent. Definitivně je nutné se *vyvarovat* návrhu "božských komponent", které dělají všechno. Každá komponenta má svůj *lifecycle*. Je to podobné jako aktivitě v nativních android/ios aplikacích. Popis zde je pouze výtažek z oficiální dokumentace, pro více detailu ofiko dokumentace: (TODO viz -> reactjs). Existují tři hlavní fáze: * *Mounting* > Množina metod, která se volá, když je komponenta "mountována", tedy její obsah je vepsán do DOMu. Od Reactu 16+ a nástupu funkcionálního paradigmatu jsou tyto funkce de facto *nahrazeny hooky* (*useEffect*), který je volán ve stejných momentech jako původní metody nad objekty. S vyjímkou metody *render()*, kterou *musí* každá komponenta obsahovat a vrací samotný JSX kód. * *Updating* > Stav, kdy je komponenta aktualizována (překreslena). Komponenta je aktualizována, pokud dojde ke změně v jejím *state* (stavu) nebo v jejích *props* (vlastnotech). * *Unmouting* > Stav, kdy je komponenta odebrána z DOMu. Obsahuje pouze jednu metodu, ta se zavolá před samotným odebráním. Ve funkcionálním paradigmatu se opět zavolá *useEffect hook*. Následující code snippet reprezentuje triviální komponentu - HTML tlačítko. <pre><code class="react"> class="javascript"> import React from "react"; //Komponenta reprezentujici tlacitko v HTML const Button = (props:{ className:string, text:string, id:string})=>{ //trida, kterou tlacitko dostane - pro chyceni CSS pravidel const className = props.className; //text, ktery v sobe tlacitko bude mit const text = props.text; // identifikator elementu const id = props.id; //samotne vraceni tlacitka v JSX syntaxi (babel provadi preklad) return ( <button type={"submit"} className={className} id={id}>{text}</button> ) } //Modulove orientovane - vyexportujeme celou funkci, aby komponentu bylo mozne pouzit export default Button; </code></pre>