A React JS kampói és miért van szükségünk rájuk?

horgok

A Hookok a React 16.8-ban bevezetett új szolgáltatás, amely lehetővé teszi a fejlesztők számára, hogy osztályok (Class komponens) használata nélkül használhassák az állapot- és egyéb React-szolgáltatásokat a funkcionális komponensekben.
Ezek olyan függvények, amelyek lehetővé teszik állapot- és egyéb React-szolgáltatások, például kontextus- és életciklus-módszerek használatát a funkcionális összetevőkön belül.

Mielőtt Hooks in React

A horgok bevezetése előtt a React funkcionális összetevőinek nem lehetett állapotuk, és nem használhattak életciklus-módszereket. E szolgáltatások használatához a fejlesztőknek át kellett alakítaniuk a funkcionális komponenst osztálykomponensekké. Ez szükségtelenül bonyolulttá tette, és nehezebbé tette a kód olvasását és karbantartását.

Most sokkal egyszerűbb a funkcionális összetevők létrehozása az osztályösszetevők feletti nagyobb szabályozással, amelyet a kezdők számára nehéz megérteni és karbantartani. Még a szakértő React fejlesztők is szívesebben használják a funkcionális összetevőket a React Component helyett.

After Hooks in React JS (16.8) verzió

A hook-ok bevezetésével a funkcionális komponensek már használhatnak állapot- és életciklus-módszereket anélkül, hogy azokat osztálykomponensekké alakítanák át. Ez egyszerűbbé, könnyebben olvashatóvá és karbantarthatóbbá teszi a kódot.

A React JS-ben leggyakrabban használt horgok

A React leggyakrabban használt horogjai a következők:
1. useState
Ez a horog a funkcionális összetevők állapotának hozzáadására szolgál. Egy kezdeti értéket vesz fel argumentumként, és egy két elemből álló tömböt ad vissza: az aktuális állapot értékét és egy függvényt a frissítéshez.

const [count, setCount] = useState(0);

A fenti példában a számlálás állapota 0-ra van inicializálva, és a setCount függvény frissíti.

2. useEffect
Ez a horog mellékhatások végrehajtására szolgál a funkcionális alkatrészekben. Hasonlít a componentDidMount, a componentDidUpdate és a componentWillUnmount kombinációkhoz. Használhatja adatok lekérésére, a DOM manipulálására, vagy bármilyen más mellékhatás végrehajtására, amely hozzáférést igényel az összetevő állapotához.

useEffect(() => { document.title = `You clicked ${count} times`;
}, [count]);

A fenti példában a useEffect hook a dokumentum címének frissítésére szolgál, amikor a számlálási állapot megváltozik.

3. useContext
Ez a hook a createContext API által létrehozott környezet fogyasztására szolgál. Lehetővé teszi a legközelebbi által biztosított értékek elérését Provider komponenst.

const value = useContext(MyContext);

A fenti példában a useContext hook használható a MyContext szolgáltató által biztosított érték eléréséhez.

Egyedi horgok:

Hookok is létrehozhatók az állapotalapú logika beágyazására és újrafelhasználására az összetevők között. Ezeket egyedi horgoknak hívják.

function useCustomHook() {
const [count, setCount] = useState(0); useEffect(() => { console.log(`You clicked ${count} times`);
}, [count]); return [count, setCount];
} function Component1() {
const [count, setCount] = useCustomHook(); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div>
);
} function Component2() {
const [count, setCount] = useCustomHook(); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count - 1)}> Click me </button> </div>
);
}

A fenti példában a useCustomHook függvény az állapot és a useEffect logika beágyazására szolgál, majd két különálló összetevőben újra felhasználható.

Következtetés

Összefoglalva, a horgok a React egy hatékony funkciója, amely lehetővé teszi a fejlesztők számára, hogy állapot- és egyéb React-szolgáltatásokat használhassanak a funkcionális komponenseken belül. Leegyszerűsítik a kódot, könnyebben olvashatóvá és karbantarthatóvá teszik, és ösztönzik az állapotalapú logika komponensek közötti újrafelhasználását.

A horgok nem lehetnek feltételesek, és csak funkcionális komponensekben használhatók. Ezen túlmenően, ha a funkcionális komponensben horgokat használ, akkor többé nincs szüksége osztálykomponensre.

Ha tetszik ez a cikk a Hooks in Reactról, nyomj egy like-ot, és kövess további ehhez hasonló tartalmakért.
Kérem, tegye fel kérdéseit, és javasoljon témákat, amelyekről írhat.

Köszönöm a segítségét. Maradj Áldott!

• SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. Hozzáférés itt.
• Forrás: https://www.codementor.io/rizatech/hooks-in-react-js-and-why-we-need-them-23e0e3fhz5