diff --git a/daweb/react/pokrocila-komunikace/assets/hierarchie-komponent.svg b/daweb/react/pokrocila-komunikace/assets/hierarchie-komponent.svg new file mode 100644 index 00000000..8fbc0acf --- /dev/null +++ b/daweb/react/pokrocila-komunikace/assets/hierarchie-komponent.svg @@ -0,0 +1 @@ +HomePageSelectedCandidatecandidateCíl - změna zobrazení zvoleného kandidátaCandidateListcandidatesonVoteCandidatenameavataronVoteVoteButtonlabelonClickZdroj události - kliknutí uživatele{selectedCandidate}onVote(candidate)onVote(candidateId)onClick() \ No newline at end of file diff --git a/daweb/react/pokrocila-komunikace/potomci.md b/daweb/react/pokrocila-komunikace/potomci.md index 8b5a1388..2cb3d396 100644 --- a/daweb/react/pokrocila-komunikace/potomci.md +++ b/daweb/react/pokrocila-komunikace/potomci.md @@ -35,7 +35,7 @@ return ( ); ``` -Kdybychom si chtěli život ještě o kousek ztížit, mohli bychom si představit, že tlačítko pro volbu kandidáta je také nějaká složitější komponenta, například tlačítko s ikonou. V takovém případě bychom museli funkci `handleVote` provrtat ještě o jednu úroveň hlouběji. +Kdybychom si chtěli život ještě o kousek ztížit, mohli bychom si představit, že tlačítko pro volbu kandidáta je také nějaká složitější komponenta, například tlačítko s ikonou `VoteButton`. V takovém případě bychom museli funkci `handleVote` provrtat ještě o jednu úroveň hlouběji. ```jsx const Candidate = ({ name, avatar, onVote }) => { @@ -49,13 +49,25 @@ const Candidate = ({ name, avatar, onVote }) => { }; ``` +Jakmile uživatel klikne na tlačítko konkrétního kandidáta, bude pak informace o zvoleném kandidátovi putovat hierarchií komponent pomocí callbacků a props podle následujícího schématu: + + + +::fig{src=assets/hierarchie-komponent.svg} + + ## Prop drilling v praxi -Prop driling nám slouží k tomu, aby spolu mohly komunikovat komponenty, které jsou od sebe vzdáleny o několik úrovní hlouběji. Tato technika má však také své nevýhody. Tak hluboké vrtání, jako jsme viděli výše, je ještě v praxi únosné, ale hlubší prop driling začíná mít zásadní nevýhody: +Prop drilling nám slouží k tomu, aby spolu mohly komunikovat komponenty, které jsou od sebe vzdáleny o několik úrovní hlouběji. Tato technika má však také své nevýhody. Tak hluboké vrtání, jako jsme viděli výše, je ještě v praxi únosné, ale hlubší prop drilling začíná mít zásadní nevýhody: 1. **Horší přehlednost** – čtenář kódu musí složitě navigovat kódem a držet v hlavě, kudy všude proudí data. 1. **Nepohodlnost** – psát kód s hlubokým vrtáním je pro programátory otravné a zdlouhavé. 1. **Průchozí komponenty** – máme v kódu spoustu komponent, která data ve skutečnosti nepotřebují, jen je předávají dále, čímž se komplikuje jejich kód. 1. **Horší udržitelnost** – pokud se rozhodneme změnit strukturu komponent, musíme přepisovat i průchozí komponenty, která data vlastně nepotřebují. -V reálnách aplikacích se proto příliš agresivnímu prop drilingu snažíme vyhnout. Pokud to z hlediska struktury aplikace dává smysl, snažíme se předávání dat mezi komponentami řešit jinými způsoby, například pomocí _contextu_ nebo pomocí _state managementu_. To jsou však pro tento kurz příliš pokročilá témata. V následujících lekcích se proto omezíme na vrtání maximálně přes jednu komponentu, nebo se mu budeme vyhýbat úplně. +V reálnách aplikacích se proto příliš agresivnímu prop drillingu snažíme vyhnout. Pokud to z hlediska struktury aplikace dává smysl, snažíme se předávání dat mezi komponentami řešit jinými způsoby, například pomocí _contextu_ nebo pomocí _state managementu_. To jsou však pro tento kurz příliš pokročilá témata. V následujících lekcích se proto omezíme na vrtání maximálně přes jednu komponentu, nebo se mu budeme vyhýbat úplně.