React · Middle · Pytanie 6 z 75
Dlaczego nie należy deklarować komponentu wewnątrz innego komponentu?
function Page() {
function Row({ item }) { return <li>{item}</li>; }
return <ul>{items.map(i => <Row key={i} item={i} />)}</ul>;
}- 1Zagnieżdżone funkcje nie mogą zwracać JSX bez
React.memo - ✓Poprawna odpowiedź: Każdy render tworzy nowy typ
Row- jest on odtwarzany - 3Łamie to zasady hooków i powoduje błąd lintera
Wyjaśnienie
Dla React Row z różnych renderów to różne typy komponentów, bo to nowe funkcje. Dlatego poddrzewo za każdym razem się odmontowuje i montuje ponownie: tracony jest stan i fokus, a DOM jest odtwarzany. Deklaruj komponenty na najwyższym poziomie modułu.