[React Hook] useState

Valamiért a React környezetben nagyon szeretik a use előtagot

useServer, useCallback, useState, useMemo stb.

A saját hookok is mind use előtaggal rendelkeznek

Honnan ered ez?

A useState egy híres hook.

Állapotot tárol, és ha az megváltozik, újra renderel. Nagyon egyszerű.

Mindenki ismeri ezt a példát.

Ha az állapot megváltozik, újra renderel, de mi a renderelés hatóköre?

Csak a p tag? Vagy a button tag is?

A válasz az, hogy a useState hívásának teljes komponensére kiterjed.

Az ExampleComponent újra renderelődik, de

a virtuális DOM segítségével összehasonlítja az értékeket, és csak a szükséges részeket módosítja a DOM-ban.

A useState minden újra rendereléskor meghívódik, de hogyan őrződik meg az értéke?

A válasz a useState szerkezetében rejlik.

Ez a tényleges React useState kódja.

A globális objektumból lekéri a dispatchert, és meghívja a useState-et.

Ebből nem igazán érthető a szerkezet.

Ha mélyebbre ásunk, akkor a következő kódot találjuk.

Lekéri a hook-ot, és a set függvényt közvetlenül a hook queue-jához köti.

(A bind egy meglévő függvényhez köt egy this értéket, a többi paramétert pedig a függvény paramétereként használja, majd egy új függvényt ad vissza, ahol a this már be van kötve)

Ebből sem könnyű megérteni az okot.

Nézzük meg közelebbről

Láthatjuk, hogy minden alkalommal hozzárendeli az init értéket. Ez nem magyarázza meg, hogyan marad meg az állapot.

Nézzük meg közelebbről. A hook valamiért gyanús.

A currentlyRenderingFiber és a workInProgressHook globális változók.

Jobbról balra történő hozzárendeléssel implementáltak egy összefűzött listát.

Tehát a hook szerkezete valószínűleg a következő:

A fejhez folyamatosan adódnak új értékek.

Még mindig nem érthető, ezért megnéztem egy másik useState implementációt,

és kiderült, hogy nem mindig a mountState-et hívják meg, hanem újra rendereléskor az updateState és a rerenderState függvényeket.

Tehát a szerkezet a fentiek szerint van, és az eseményeknek megfelelően más függvényeket hívnak meg.

Ha meg szeretnéd nézni a kódot, a react/packages/react-reconciler/src/ReactFiberHooks.js fájlt nézd meg.