Moje próby zrozumienia Reacta (1)
Jak działają haki(hooks) w React? Ale tak na serio, jak to się dzieje, że jak dasz useState, to się robi stan?
Zobaczmy w źródełko, w kodzik:
ReactHooks.js
wygląda na to, że każdy hak działa pod spodem tak samo - i jest tylko wrapperem na daną metodę dispatchera.
Każdy hak bowiem wywołuje sobie na początku funkcję resolveDispatcher, która pobiera aktualnego dispatchera (cokolwiek miałoby to znaczyć w praktyce - czy dispatcher jest zawsze ten sam, w danej apce, czy się zmienia? To pewnie jedno z tych pytań, które bym zadał na początku swojej pracy w Facebooku. Gdybym tam pracował oczywiście. I gdyby mi kazali dorabiać nowe haki do Reacta).
Ale nic to, znalazłem po nitce do kłębka taki kodzik w pakiecie `react-reconciler`, wygląda na to, że oni tam zmieniają tego dispatchera dynamicznie:
https://github.com/facebook/react/blob/267ed981466ef323b1461b013b5db8db31e31772/packages/react-reconciler/src/ReactFiberHooks.js#L1266
I czasem w wersji DEV jest inny. Po co tak? Nie wiem, wali mnie to. Ja chcę wiedzieć, co robi dispatcher. Co w tych metodach jest. No i proszę, mamy. Narobione ileś dispatcherów. Okazuje się, że do montowania jest inny dispatcher (HooksDispatcherOnMount) a do aktualizacji inny (HooksDispatcherOnUpdate).
Idąc dalej tym tropem - useState przy montowaniu odpala funkcję `mountState`, ale przy aktualizacji już będzie to funkcja `updateState`.
Popatrzmy na to pierwsze. `mountState`.
Ta to funkcja pobiera sobie "obiekt haka" wywołując inną funkcję, a mianowicie `mountWorkInProgressHook` (ta funkcja tworzy nowy obiekt, a potem go zwraca, uaktualniając pry okazję listę wszystkich haków, które są "in progress".
powracając do funkcji mountState.
To wrzuca initialState do obiektu hook, ale to nudne, zbyt oczywiste.
Ciekawsze jest to, że podczepia do obiektu hook właściwość queue, i w tym queue są dodatkowe właściwości, takie jak `eagerReducer` czy `dispatch`.
No i na końcu zwracana jest tablica dwulementowa, którą wszyscy znamy (my, którzy korzystaliśmy z useState), a która jest zwracana jako [hook.memoizedState, dispatch]
Dobra, na dzisiaj to tyle. Wiemy już jak jest tworzony hak useState.
Zobaczmy w źródełko, w kodzik:
ReactHooks.js
wygląda na to, że każdy hak działa pod spodem tak samo - i jest tylko wrapperem na daną metodę dispatchera.
Każdy hak bowiem wywołuje sobie na początku funkcję resolveDispatcher, która pobiera aktualnego dispatchera (cokolwiek miałoby to znaczyć w praktyce - czy dispatcher jest zawsze ten sam, w danej apce, czy się zmienia? To pewnie jedno z tych pytań, które bym zadał na początku swojej pracy w Facebooku. Gdybym tam pracował oczywiście. I gdyby mi kazali dorabiać nowe haki do Reacta).
Ale nic to, znalazłem po nitce do kłębka taki kodzik w pakiecie `react-reconciler`, wygląda na to, że oni tam zmieniają tego dispatchera dynamicznie:
https://github.com/facebook/react/blob/267ed981466ef323b1461b013b5db8db31e31772/packages/react-reconciler/src/ReactFiberHooks.js#L1266
I czasem w wersji DEV jest inny. Po co tak? Nie wiem, wali mnie to. Ja chcę wiedzieć, co robi dispatcher. Co w tych metodach jest. No i proszę, mamy. Narobione ileś dispatcherów. Okazuje się, że do montowania jest inny dispatcher (HooksDispatcherOnMount) a do aktualizacji inny (HooksDispatcherOnUpdate).
Idąc dalej tym tropem - useState przy montowaniu odpala funkcję `mountState`, ale przy aktualizacji już będzie to funkcja `updateState`.
Popatrzmy na to pierwsze. `mountState`.
Ta to funkcja pobiera sobie "obiekt haka" wywołując inną funkcję, a mianowicie `mountWorkInProgressHook` (ta funkcja tworzy nowy obiekt, a potem go zwraca, uaktualniając pry okazję listę wszystkich haków, które są "in progress".
powracając do funkcji mountState.
To wrzuca initialState do obiektu hook, ale to nudne, zbyt oczywiste.
Ciekawsze jest to, że podczepia do obiektu hook właściwość queue, i w tym queue są dodatkowe właściwości, takie jak `eagerReducer` czy `dispatch`.
No i na końcu zwracana jest tablica dwulementowa, którą wszyscy znamy (my, którzy korzystaliśmy z useState), a która jest zwracana jako [hook.memoizedState, dispatch]
Dobra, na dzisiaj to tyle. Wiemy już jak jest tworzony hak useState.
Komentarze
Prześlij komentarz