React komponensek és props
React komponens és props: deklaratív UI, komponensfa, egyirányú adatfolyam és miért legyen a render logika lehetőleg tiszta.
Röviden
A React komponens a UI egy részét írja le az aktuális props és state alapján. A komponens nem egyszer fut le „létrehozáskor”: rendereléskor React újra meghívhatja, ezért a render fázisnak kiszámítható, side-effect mentes leírásnak kell lennie.
Mit jelent a react komponensek és props?
A React komponens a UI egy részét írja le az aktuális props és state alapján. A komponens nem egyszer fut le „létrehozáskor”: rendereléskor React újra meghívhatja, ezért a render fázisnak kiszámítható, side-effect mentes leírásnak kell lennie.
Komponensfa
01
Page
02
Section
03
Card
04
Button
05
props ↓
Hogyan működik a gyakorlatban?
A szülő propson keresztül ad adatot a gyermeknek. A props read-only bemenet a komponens szempontjából. A React a rendereredmény alapján egyezteti a felületet, majd commit fázisban módosítja a szükséges DOM részeket.
- Komponens neve nagybetűvel kezdődik JSX használatnál.
- Props ne legyen a gyermek által közvetlenül mutált shared state.
- Kulcs (`key`) listaidentitást segít, nem csak warning eltüntető attribútum.
- Render közben network request vagy imperatív DOM változtatás rossz helyen van.
Gyakorlati fejlesztői szemlélet
Komponenst viselkedési és felelősségi egységként bonts, ne minden három sorra külön fájlként. A jó határ ott van, ahol saját adatmodell, interakció vagy újrafelhasználható vizuális felelősség jelenik meg.
Gyakori hibák és félreértések
- Propsot kétirányú adatbindingként kezelni.
- Indexet stabil keyként használni olyan listánál, amely átrendeződik.
- Render során state-et állítani feltétel nélkül.
Források és szabványok
A technikai részletekhez elsődleges szabványokat és karbantartott hivatalos dokumentációt használok. Frameworkök, böngészők és webes API-k idővel változhatnak, ezért implementálás előtt mindig ellenőrizd az aktuális dokumentációt is.
Kapcsolódó ByBence Academy