useStateの内部実装
FCの最初のレンダリング時
グローバルではない、そのコンポーネントインスタンスのための別個のオブジェクトを作成します。このコンポーネントのオブジェクトは、コンポーネントがDOMに存在する限り存続します。 ref コンポーネントインスタンスとは?
コンポーネントのオブジェクトとは?
コンポーネントがDOMに存在する、とは?
この記事は訳がわかりにくすぎる、下のサイトを見たほうがわかりやすい
useStateの場合
あっているかわからんがイメージmrsekut.icon
ここまでは普通の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に読んでたけど疲れて途中でやめたので、もっかい頭から読むと良さそう
内部実装の該当箇所
よんでるとちゅう
参考
イメージ
実際のコードを追っていく
未読
これも実際のコードを追っていく系