Az előző bejegyzés funkcionális összetevőjével ellentétben ("React basic 3 — Reusable Functional Components"), ha az összetevő megfelelően kezeli az állapotokat, az class komponens lehet a megfelelő út. Az Class összetevő beépített életciklusa-val rendelkezik, amely lehetővé teszi az összetevő különböző fázisokban történő kezelését. Ez a bejegyzés elmagyarázza, hogyan lehet osztályalapú összetevőt létrehozni úgy, hogy először a legalapvetőbb constructor() és render() életciklus metódusokat tekintjük át.
Hozza létre az első osztály alapú összetevőt
1. lépés: Osztály deklarálása és React.Component kiterjesztése
Az osztályalapú komponens szerkezete hasonló a funkcionális komponenséhez. A funkcionális komponensek const kifejezése helyett a React.Component alosztályt kiterjesztjük egy osztály deklarálására. Az alábbiakban egy példa látható arra, hogyan lehet egy egyszerű funkcionális komponenst osztályalapú komponenssé átalakítani.
Funkcionális komponens
const App = () => {
return(
<h1>Hello!</h1>
);
};
Osztályalapú komponens
class App extends React.Component {
render() {
return (
<h1>Hello!</h1>
);
}
};
2. lépés: Constructor() és render() életciklus metódusok
Ahogy a fenti példában látható, meg kell hívnunk a render() metódust a felhasználói felület megjelenítéséhez. A A render() az életciklus metódusok egyike, amely többször is meghívásra kerül, ha az osztály állapota megváltozna.Ezzel szemben használhategy konstruktort () metódus az osztály inicializálásához. Például, amikor hozzáfér egy külső adathoz, csak egyszer kell meghívnia, amikor az osztály inicializálódik, így ezeknek a visszahívásoknak a a constructor()-ban kell megtörténniük.
class App extends React.Component {
constructor(props) {
super(props); // you need this with props!
// Call a function that only needs first
}
render() {
return (<h1>Hello!</h1>);
}
};
3. lépés Állítsa be és frissítse az állapotot
Miután adatokat kért a constructor()-tól,eltarthat egy ideig, amíg az adatok elérhetővé válnak, vagy az adatok frissülhetnek, miközben a felhasználó még mindig az oldalát nézi. Ha az adatok egy idő után rendelkezésre állnak, vagy frissülnek, érdemes lehet ezeket a változtatásokat tükrözni az oldalon. E fázisok kezelésére az state funkciót használjuk a React osztályban.
Az Állapot egy olyan objektum, amely rögzíti a felhasználók helyi állapotát. 1) Állapot deklarálhat a constructor()-ban, ha kimondja: this.state={key:value}, 2) elérheti az állapotot a this.state.key paraméterrel, és 3) frissítheti az állapotot a this.setState={key:newValue} paraméterrel.
Az alábbi példa az Udemy tanfolyam-ból származik, amely ellenőrzi a felhasználó helyét a constructor()-ban, dea visszahívás időbe telik, mivel a felhasználónak engedélyeznie kell a böngészőbeállítást. Amíg az adatok nem állnak rendelkezésre, az oldal a betöltés állapotát mutatja. Amikor a felhasználó engedélyezi vagy megtagadja a helyhozzáférést, a React state a .setState értékkel frissül, és az render() metódus újra lefut.
class App extends React.Component {
constructor(props) {
super(props);
this.state = { lat: null };
window.navigator.geolocation.getCurrentPosition(
position => {
this.setState ({ lat: position.coords.latitude });
},
err => {
this.setState ({ errorMessage: err.message });
}
);
}
render() {
return (
<div> { this.renderContent() } </div>
)
}
renderContent() {
if(this.state.errorMessage && !this.state.lat){
return (
<div> Error: { this.state.errorMessage } </div>
)
}
if(!this.state.errorMessage && this.state.lat){
return (
<div> Latitude: {this.state.lat} </div>
)
}
return( <div> Loading … </div> );
}
}
Életciklus módszerek
- constructor() – Inicializáló változók vagy állapotok deklarálásához.
- componentDidMount() –Az összetevő megjelenítése után hívják meg. A kezdeti adatkérés ebben a metódusban hívható meg a constructor(). helyett
- render() –KÖTELEZŐ metódus, amely HTML-kódot ad ki a DOM-ba.
- componentDidUpdate() –Az összetevő DOM-ban való frissítése után hívódik meg.
componentWillUnmount() – Akkor hívják meg, amikor az összetevőt eltávolítják a DOM-ból.
Tartalomjegyzék
„React basic 1 – „Hello React World”. A First React alkalmazás beállítása»
React basic 2 – JSX, a JavaScript szintaxis-kiterjesztése, amely úgy néz ki, mint a HTML
React basic 3 – Újrafelhasználható funkcionális alkatrészek
React basic 4 – Osztály alapú komponensek és életciklus-módszerek
React basic 5 — Basic Event Handlers
React basic 6 – Az Axios Library használata az adatok lekéréséhez
React basic 7 – Lista megjelenítése az API-válasz alapján
„React basic 8 – React alkalmazás létrehozása és a szerveren való tárolása”
