Komponenta » Historie » Verze 11
Jiří Trefil, 2023-03-26 20:24
| 1 | 1 | Jiří Trefil | h1. Komponenta |
|---|---|---|---|
| 2 | |||
| 3 | 2 | Jiří Trefil | 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. |
| 4 | |||
| 5 | 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). |
||
| 6 | Existují tři hlavní fáze: |
||
| 7 | 4 | Jiří Trefil | |
| 8 | 5 | Jiří Trefil | * *Mounting* |
| 9 | 9 | Jiří Trefil | > 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. |
| 10 | 1 | Jiří Trefil | * *Updating* |
| 11 | 10 | Jiří Trefil | > 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). |
| 12 | 1 | Jiří Trefil | * *Unmouting* |
| 13 | 11 | Jiří Trefil | > 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*. |