Ha Ön React fejlesztő, aki még nem tanult a React hook-okról, akkor most itt a pillanat. Ez a bejegyzés részletesen átmegy a useEffect React Hook-on. A svájci kés horog megfelelője. Különféle problémákat old meg, például hogyan lehet adatokat szerezni egy komponens csatlakoztatásakor, hogyan futtasson kódot egy állapot vagy egy támasz megváltozásakor, hogyan állítsunk be időzítőket vagy intervallumokat, és így tovább.
A useEffect nagyjából mindenre használható, amit egy React komponensben szeretne „megtenni”, amely nem ad vissza JSX-et (bármilyen típusú mellékhatás). Összetevőnként több useEffect is lehet.
Ennek az erőnek ára van: hacsak nem érti a működését, zavarba ejtő lehet. Ebben a bejegyzésben számos példát nézünk meg, hogy megértsd a koncepcionális modellt, és alkalmazd azt a saját kódodra.
Reagál Hookok – Mit próbál megoldani?
A horgokat először a React 16.8-as verziójában vezették be, és mára számos React projekt használja. A Hooks megoldja az összetevők közötti kódismétlés problémáját. Osztályok használata nélkül íródnak. Ez nem jelenti azt, hogy a React elhagyja az osztályokat; A horgok egyszerűen egy alternatív módszer.
A React lehetővé teszi állapotalapú logikával rendelkező kifinomult összetevők gyors létrehozását. Nehéz elkülöníteni ezeket az összetevőket, mivel az osztály a React Lifecycle Methods-ra támaszkodik. Itt jön be a React Hooks.
Lehetővé teszik egy komponens felosztását kisebb funkciókra. Ahelyett, hogy a kódot kisebb darabokra osztaná fel az életciklus metódusai alapján, mostantól a funkcionalitástól függően kisebb egységekre rendezheti és szétválaszthatja a kódot.
Mi az a useEffect Hook?
A horgok olyan funkciók, amelyek lehetővé teszik az állapot- és egyéb reakcióképességek elérését anélkül, hogy ES6 osztályokat kellene írnia. A react hooks API-nak van egy useEffect nevű horogja. Ha ismeri a reakció életciklusait, a useEffect hook ugyanaz, mint a komponensDidMount, komponentDidUpdateés összetevőWillUnmount életciklus módszerek kombinálva.
A React Hooks dokumentációja szerint azért hozták létre, hogy megoldjon néhány problémát az ES6 osztályú komponensek életciklus-módszereivel.
Szintaxis
Az első argumentum egy visszahívási függvény, amely alapértelmezés szerint minden renderelés után végrehajtódik. A második paraméter egy opcionális Dependency tömb, amely csak akkor utasítja vissza a Hook-ot, ha a célállapot megváltozik.
A Hook összehasonlítja az egyes függőségek történelmi és jelenlegi állapotait. Ha a két érték nem egyezik, a Hook meghívja az első paraméterben megadott visszahívást. A függőségi tömbök megváltoztatják a szokásos visszahívási viselkedést, és garantálják, hogy a Hook figyelmen kívül hagyja az összetevő hatókörében lévő összes többi összetevőt.
Alapvető használat
Az üzenet mentéséhez a React useState parancsot használom a fenti kódmintában. Utána veszem az üzenetállapot-változómat, és kiírom a képernyőre. Most azonban az Effect használatával szeretném módosítani az üzenetet egy másodperccel az összetevő felcsatolása után.
Az effektusomat a useState sor mögé szúrtam be, miután importáltam a useEffect-et a React keretrendszerből. Az első useEffect paraméter egy függvény. Amikor ez a funkciókezelő végrehajtódik, gondoskodik az Ön által biztosított mellékhatásokról. A függvény egy visszahívási függvény, amely akkor kerül meghívásra, ha a React összetevő életciklusának egyik eseménye bekövetkezik.
Mikor kell használni?
A useEffect hook számos helyzetben hasznos lehet. A következők a legfontosabbak:
- Ezt a paramétert az ügyféloldalról módosíthatjuk, amikor adatokat szeretnénk lekérni, a megadott argumentum függvényében. Visszahívásra kerül, miután a paraméter friss adatokkal frissült.
- Ha adatokat szeretnénk lekérni egy API-végpontról, és megjeleníteni az ügyféloldalon. Amikor a komponensünk megjelenik, a useEffect hook-nak adott függvény vagy kezelő végrehajtásra kerül, és az összetevő állapotában lévő adatok lekérésre kerülnek. Ezeket az állapotokat ezután a felhasználói felület összetevői alkalmazzák.
- Ha az összetevő a külvilágból származó adatokra támaszkodik, és nem tudjuk biztosítani, hogy az adatok megérkezzenek, használjuk az Effect alkalmazást (lehet, hogy a szerver ott van lent). Ahelyett, hogy problémákat vetne fel, és nem akadályozná meg más alkatrészek megjelenítését, helyezze őket a useEffect horogba.
Használati esetek
Ha az összetevő az első futtatás után újra renderelődik, akkor nem fog végrehajtani.
Amikor egy komponens renderel vagy újrarenderel, mindig végre kell hajtani.
Alapértelmezés szerint a program csak egyszer fut le. Ezután, ha a prop értékek megváltoznak, futtassa:
Aszinkron tevékenységekhez mindig használja a useEffect-et.
A useEffect kódblokkok nyilvánvaló jelzői az aszinkron feladatoknak a fejlesztőtársaid számára. Lehetséges aszinkron kód létrehozása a useEffect használata nélkül, de ez nem a „React metódus”, és növeli a bonyolultságot és a hibák kockázatát.
A useEffect használata az aszinkron kód írása helyett, amely leállíthatja a felhasználói felületet, jól ismert technika a React közösségben, különösen az, ahogyan a React csapata mellékhatások végrehajtására építette fel.
Használatának másik előnye, hogy a fejlesztők egyszerűen áttekinthetik a kódot, és azonnal észlelhetik a „vezérlési folyamaton kívül” futó kódot, ami csak az első renderelési ciklus után válik fontossá. Ezenkívül a blokkok alkalmasak újrafelhasználható és még szemantikailag egyedi horgokká történő kinyerésre.
Egy példa
A useEffect kód használatával növelje meg a számot másodpercenként.
Következtetés
A useEffect Hook mögöttes tervezési elvek és legjobb gyakorlatok megértése véleményem szerint kritikus készség, amelyet el kell sajátítani, ha következő szintű React fejlesztő akar lenni.
Összefoglalva, a useEffect Hook olyan függvényt kap, amely kötelező, potenciálisan teljes hatás logikát tartalmaz. A függőségi tömb, amely a második paraméter, a végrehajtás befolyásolására használható. A vele való foglalkozás során a return függvény segítségével tisztító kódot is kell írni.
Ossza meg velünk a megjegyzésekben, ha a cikk hasznos volt.
Hagy egy Válaszol