useStateの内部実装
from hooksの内部実装
FCの最初のレンダリング時
参考
グローバルではない、そのコンポーネントインスタンスのための別個のオブジェクトを作成します。このコンポーネントのオブジェクトは、コンポーネントがDOMに存在する限り存続します。 ref
コンポーネントインスタンスとは?
コンポーネントのオブジェクトとは?
コンポーネントがDOMに存在する、とは?
この記事は訳がわかりにくすぎる、下のサイトを見たほうがわかりやすい
useStateの場合
あっているかわからんがイメージmrsekut.icon
最初のレンダリング時に自分らが定義したFCを元にVirtual DOMを表すObjectを作る
ここまでは普通のReactの話
ここで、これとは別にStateを表す用のObject(配列?)を作成する
これは上のやつが消えた時に消える
これは、このFCとのみ紐付いている
なので、他の場所で同一のhooksを使っても別のものを参照する
再描画するときは、FCのみを作り直し、配列用のObjectは使い続ける感じか
これら2つが紐付いていることで状態を管理することができる
useStateの内部実装
参考
FCごとにstate用、setState用の配列を一つずつ作る
あるFC内でuseStateを実行すると、このFC用に、stateとsetStateを表す2つの配列を作る
なんらかのuseStateが実行されるたびに、↑この各配列それぞれに新しいstateとsetStateをpushする
ここで、一つのFC内で複数のuseStateを使っている場合も、上の同じ配列にstateとsetStateをpushする
なので、FCが持っている2つの配列の中には、様々な種類のstate、setStateが入る
この配列の要素数は高々使ったuseStateの数だけ
二回目以降の描画時は、FCはこの配列を見て今のstateを知る
memomrsekut.icon
上の2つは別の記事を参照しているので、若干言っていることが異なっている
下の方はイメージの話っぽいので、そんなに厳密ではない
厳密な話は実際のコードを追っていくこの記事が良さそう
2019/12/28に読んでたけど疲れて途中でやめたので、もっかい頭から読むと良さそう
内部実装の該当箇所
useStateのイメージ ref
useState
ReactCurrentDispatcherを呼んでいる
react-reconcilerを呼んでいる
この辺が本質っぽい
https://sbfl.net/blog/2019/02/09/react-hooks-usestate/
よんでるとちゅう
参考
(翻訳) React Hooks は魔法ではなく、ただの配列だ
イメージ
React HooksのuseStateがどういう原理で実現されてるのかさっぱりわからなかったので調べてみた
実際のコードを追っていく
https://qiita.com/akashixi/items/7cf0ef9940c2dc8ea24d
未読
これも実際のコードを追っていく系
https://overreacted.io/ja/how-does-setstate-know-what-to-do/
https://tnoyan.hatenablog.com/entry/2021/12/05/001525
https://tnoyan.hatenablog.com/entry/2021/12/03/220348
https://tnoyan.hatenablog.com/entry/2021/12/01/235540
https://tnoyan.hatenablog.com/entry/2021/12/05/225319
https://qiita.com/satomi310/items/685951139983f913adeb