Bevezetés a React Hooks-ba

Amint a ReactJs könyvtár új frissítéseket kap, sok dolog van hozzáadva, és néhány szintén elavult. A ReactJs napról napra egyre erősebb az ilyen frissítések miatt. Fejlesztőként naprakészen kell tartania magát minden verzióban megjelenő új funkciókkal.

Hallottál már a React Hooks-ról?

Nos, a React Hooks, amely a React v16.7.0-alfa verzióban érhető el , valami fantasztikus, amiről tudnia kell.

Itt van egy előzetes a React Hooks számára.

A fenti kódban useStateaz első Hook.

Most térjünk rá arra a problémára, amelyet a Reacts Hooks megoldani fog.

Végül is minden új funkciót bevezetnek egy probléma megoldására. Itt található a felsorolás azokról a dolgokról, amelyeket a hivatalos reagálási webhely mond a megoldandó problémákról.

Nehéz újból felhasználni az állapotok logikáját az összetevők között

Az újrafelhasználható viselkedés nem kapcsolható a React komponenshez. Jó példa lehet az üzlethez való csatlakozás. Ha van tapasztalata a React-ben, akkor ismerhet néhány mintát, például a renderelési kellékeket és a magasabb rendű komponenseket, amelyek hasznosak lehetnek az ilyen problémák megoldása során. Az ilyen minták használatával az összetevőket át kell alakítani annak érdekében, hogy a kód nehezebben követhető és fenntartható legyen.

A Hooks bevezetésével az állampolgári logika kibontható az összetevőből. Ez lehetővé teszi a független tesztelést, és újra felhasználható.

A Hooks segítségével újból felhasználhatja az állapotjelzőt anélkül, hogy az alkatrész-hierarchiát valóban megváltoztatná.

A bonyolult alkatrészeket nehéz megérteni

Van, amikor egy komponens egy kis állapotból az állapotszerű logika irányíthatatlan állapotává nő.

Minden életciklus-módszer néha nem összefüggő logika keverékét tartalmazza. Például egy összetevő elvégezhet bizonyos adatok lekérését API-hívásokon keresztül componentDidMountés componentDidUpdate. Ugyanez a componentDidMountmódszer azonban tartalmazhat néhány nem kapcsolódó logikát is.

Ez a logika hoz létre eseményfigyelőkre a razzia végre componentWillUnmount. Az együtt változó kapcsolódó kód fel lesz osztva.

Az egymással nem összefüggő kód, amelyet egyetlen módszerbe egyesítenek, hibákat és következetlenségeket hoz létre.

Gyakran találkozunk olyan helyzettel, amikor az állapotértékek miatt nem vagyunk képesek egy nagy komponenst kisebbekre osztani. Ezenkívül nehézkessé válik a tesztelésük.

A probléma megoldásához a Hooks lehetővé teszi , hogy az egyik összetevőt kisebb funkciókra bontsa, attól függően, hogy mely darabok kapcsolódnak egymáshoz. Jó példa lehet az előfizetés beállítása vagy az adatok beolvasása , függetlenül az életciklus-módszer szerinti kódfelosztástól.

A Hooks segítségével a React több funkciója felhasználható osztályok nélkül.

De hogyan működnek a Horgok valójában?

Itt van a fent látható kódrészlet:

Link a CodeSandboxhoz

A useStateHook használata, amiről beszélünk.

Egy függvénykomponens belsejében hívjuk, hogy hozzáadjunk egy helyi állapotot. A React megőrzi ezt az állapotot az összes újrarenderelés között. useStateegy olyan párot ad vissza, amely rendelkezik az aktuális állapotértékkel, és egy olyan funkcióval, amely lehetővé teszi az érték frissítését.

Hívhatja ezt a funkciót eseménykezelőből vagy máshonnan. Hasonló, this.setStatemint egy React osztályban, de nem egyesíti teljesen a régi és az új állapotot.

Ennek csak egy érve useStatevan a kezdeti állapot. Ebben a fenti példában a kezdeti állapot 0azért van, mert számlálónk nulláról indul. Ne feledje, hogy ellentétben this.stateaz állapotnak itt nem feltétlenül kell objektumnak lennie - azonban lehet, hogy objektum is, ha akarja.

Több állapotváltozó deklarálása

A tömb destruktív szintaxisa különböző neveket ad az állapotváltozóknak, amelyeket meghívással deklaráltunk useState. Ezek a nevek nem tartoznak az useStateAPI részéhez . Ehelyett a React azt feltételezi, hogy ha sokszor sokat hív, akkor minden renderelés ideje alatt ugyanabban a sorrendben végzi.

Megjegyzés: A horgok olyan funkciók, amelyek lehetővé teszik a funkciókomponensekből történő „reagálási” állapot és az életciklus-funkciók bekapcsolását. A kampók nem működnek a React osztályokban - lehetővé teszik a React osztályok nélküli használatát.

Effekt Hook

A React használatával lehet, hogy már dolgozott az adatok lekérésén, előfizetésén vagy a DOM manuális megváltoztatásán a React összetevőkből. Ezeket a műveleteket „mellékhatásoknak” (röviden „hatásoknak”) nevezzük.

Az Effect Hook useEffecthozzáadja a funkciók összetevőinek mellékhatásait. Ugyanaz a célja, mint a componentDidMount, componentDidUpdateés componentWillUnmounta React osztályokban, de egyetlen API-val egyesítve.

Például az alábbi összetevő a dokumentum címét állítja be, miután a React frissíti a DOM-ot:

Link a CodeSandboxhoz

Amikor telefonál, felhívja a useEffectReact-nek, hogy futtassa az „effekt” funkciót, miután átöblítette a DOM-ot. A hatásokat az összetevő belsejében deklarálják, és így hozzáférhetnek annak támaszaihoz és állapotához. Alapértelmezés szerint a React minden megjelenítés után futtatja az effektusokat - az első renderelést is beleértve .

A horgok szabályai

A horgok JavaScript-függvények, de két további szabályuk van:

  • Csak a legfelső szinten hívja a Horgot . Ne próbálja meg meghívni a Hookokat hurkok, feltételek vagy beágyazott függvények belsejében.
  • Csak a React funkciókomponensekből hívja meg a Horgot . Ne próbálja meg meghívni a horgot a szokásos JavaScript funkciókból.

Nos, ez egy gyors pillantás a React Hooks-ra. Részletesebb leírásért kövesse ezt az alábbi linket:

Horgok egy pillantásra - Reagál

JavaScript könyvtár a felhasználói felületek felépítéséhez reagál.org

Boldog tanulást! ? ?