A React.js az egyik legelterjedtebb JavaScript könyvtár, amelyet minden kezelőfelület fejlesztőjének ismernie kell. A React megtanulása felé tett nagy lépés annak megértése, mi a kellékek és az állam, valamint a közöttük lévő különbségek.
Ebben a blogbejegyzésben elmagyarázom, mi a kellék és az állapot, valamint tisztázom a velük kapcsolatos legtöbb kérdést:
- Mik azok a kellékek?
- Hogyan továbbítja az adatokat a kellékekkel?
- Mi az állam?
- Hogyan frissítheti az összetevő állapotát?
- Mi történik, ha az állapot megváltozik?
- Használhatok állapotot minden komponensben?
- Mi a különbség a kellékek és az állam között?
Mik azok a kellékek?
A kellékek a tulajdonságok rövidítése, és az adatok átadására szolgálnak a React komponensek között. A React komponensei közötti adatáramlás egyirányú (csak szülőtől gyermekig).
Hogyan továbbítja az adatokat a kellékekkel?
Íme egy példa arra, hogyan lehet adatokat továbbítani a kellékek használatával:
class ParentComponent extends Component { render() { return ( ); } } const ChildComponent = (props) => { return {props.name}
; };Először is meg kell határoznunk / be kell szereznünk néhány adatot a szülő komponensből, és hozzá kell rendelnünk egy gyermek komponens „prop” attribútumához.
A „név” itt definiált kellék, és szöveges adatokat tartalmaz. Ezután adattovábbítással adományokat adhatunk át, mintha argumentumot adnánk egy függvényhez:
const ChildComponent = (props) => { // statements };És végül pontozással használjuk a prop adatok elérését és megjelenítését:
return {props.name}
;Megnézheti a videómat is, hogy lássa, hogyan kell használni a kellékeket:
Mi az állam?
A Reactnek van egy másik speciális beépített objektuma, az úgynevezett állapot, amely lehetővé teszi az összetevők számára, hogy saját adataikat létrehozzák és kezeljék. Tehát ellentétben a kellékekkel, az alkatrészek nem tudnak adatokat átadni az állapottal, de belső módon létrehozhatják és kezelhetik azokat.
Itt van egy példa az állapot használatáról:
class Test extends React.Component { constructor() { this.state = { id: 1, name: "test" }; } render() { return ( {this.state.id}
{this.state.name}
); } }Hogyan frissítheti az összetevő állapotát?
Az állapotot nem szabad közvetlenül módosítani, de az úgynevezett speciális módszerrel módosítani lehet setState( ).
this.state.id = “2020”; // wrong this.setState({ // correct id: "2020" });Mi történik, ha az állapot megváltozik?
OK, miért kell használnunk setState( )? Miért van szükségünk magára az állami objektumra? Ha ezeket a kérdéseket teszi fel, ne aggódjon - hamarosan megérti az állapotot :) Hadd válaszoljak.
Az állapotváltozás a felhasználói bevitel, egy esemény kiváltása stb. Alapján történik. A React komponenseket (állapottal) az állapotban lévő adatok alapján renderelik. Állam birtokolja a kezdeti információkat.
Tehát amikor az állapot megváltozik, a React értesül és azonnal visszaadja a DOM-ot - nem az egész DOM-ot, hanem csak a frissített állapotú komponenst. Ez az egyik oka annak, hogy a React gyors.
És hogyan kap értesítést a React? Sejtetted: azzal setState( ). A setState( )módszer elindítja a frissített alkatrészek újrarenderelési folyamatát. A React tájékoztatást kap, tudja, mely rész (ek) et kell megváltoztatni, és gyorsan megteszi, anélkül, hogy újra elkészítené az egész DOM-ot.
Összefoglalva: két fontos pontra kell figyelnünk, amikor az állapotot használjuk:
- Az állapotot nem szabad közvetlenül módosítani - a
setState( )felhasználni kell - Az állam befolyásolja az alkalmazás teljesítményét, ezért nem szabad feleslegesen használni
Használhatok állapotot minden komponensben?
Egy másik fontos kérdés, amelyet feltesz az államra, az, hogy pontosan hol használhatjuk. A korai időkben az állapot csak osztálykomponensekben volt használható , funkcionális komponensekben nem.
Ezért a funkcionális komponenseket hontalan komponenseknek is nevezték. A React Hook bevezetése után azonban az állapot már használható mind osztály, mind funkcionális komponensekben.
Ha a projekt nem használja a React Hooks programot, akkor az állapotot csak az osztály összetevőiben használhatja.
Mi a különbség a kellékek és az állam között?
Végül összegezzük, és nézzük meg a kellékek és az állam közötti főbb különbségeket:
- Az alkatrészek kívülről kapnak adatokat kellékekkel, míg saját adataikat állammal létrehozhatják és kezelhetik
- A támaszokat az adatok továbbítására használják, míg az állapot az adatok kezelésére szolgál
- A kellékek adatai csak olvashatók, és nem módosíthatják azokat az összetevők, amelyek kívülről fogadják azokat
- Az állapotadatokat a saját komponense módosíthatja, de privátak (kívülről nem érhetők el)
- A támaszokat csak a szülői komponensről lehet átadni a gyermeknek (egyirányú áramlás)
- Módosító állapotnak a
setState ( )módszerrel kell történnie
A React.js egyike a napjainkban a legszélesebb körben használt JavaScript könyvtáraknak, amelyeket minden front-end fejlesztőnek ismernie kell.
Remélem, hogy ez a cikk segít megérteni a kellékeket és az állást. A React kapcsán más fontos dolgokra is kitérünk, amelyekről később írok a következő cikkeimben.
Ha szeretne többet megtudni a webfejlesztésről, kövessen bátran a Youtube-on !
Köszönöm, hogy elolvasta!