本日はuseRefフックとuseImperativeHandleフックの学習。
後者はあまり使われないらしいが、親子をまたいでrefの参照ができ、また状態変更も可能で依存配列によって再描画もタイミングも指定できるものっぽい。
子コンポーネントの関数を親が呼んだりすごい挙動ができるようだが、またいで参照ならpropsやContextオブジェクトなどでもよさそう。
useRefは値の保持やDOMの参照で使われるフック。useStateなどと違い値は変更しても再描画はされない。再描画に関係がないデータの格納に便利。
データはref.currentフィールドに格納される。これは他のものにも言えるが、プリミティブ型ならいざ知らず、オブジェクトが入る場合などもあるため注意が必要だと感じる。
特にサンプルではinput要素を介した疑似的な画像ファイルアップロードのコードとなっており、プリミティブ型と比べ少々複雑な形状をしている。
他にも各種フックにはジェネリック型が指定されているが、本書で既に出ているだけでもHTML要素の型、React要素？の型、File型なども出ている。
そうでなくてもHTML要素の今一度の学習や、増えたCSSプロパティの確認やCSSは何で記述するのかなどから見直す必要がある。
閑話休題。
ともあれuseRefは再描画せずに何かを保持することに長けており、見た目の記法はuseState同様であり、参照させたいコンポーネントへ渡して使うなど用法も変わらなさそうである。
本節のサンプルコードで思ったことはいくつかある。
1つはstrictNullCheckの厳しさ、ひいてはTSの優秀さだ。
そこまで長いコードではないが、シンプルな記法の間違い、タイプミスが頻出し何度もエラーが出ている。以前べた書きでLPを作成した際に感じた「エラー分かるのおせーし場所だけ分かってもわかんねーよ！」という不便さが圧倒的に減っている。ありがたいことだ。
ただ、本書と違いローカル環境ではstrictオプションをtrueにしており、その影響かnullの可能性があるアクセスだよ！というエラーが頻出している…設定変えるか。
各種フックを呼び出す際にジェネリック型を多用しているのだが、<A | null>といった感じで、Aまたはnullの型となっている。strictが全部trueな影響で、各種状態変数やrefなどにアクセスする際、nullかもしれんぞと怒られるという具合。
ひとまずオプショナルチェーン(nullかもしれないオブジェクトへのアクセスの際に?のサフィックスをつけるアクセス記法)でなんとかしている。最初if文中でアクセスしてるのになんでnullかもエラーが出るんだ？型ガード働いてないのか？と思ったけど、strictNullCheck(もといstrictがtur)の影響。
もう1点はHTMLやCSSなどへの理解度の低さだ。
これは上述しているので一時割愛。少々古くなってはいるがuhyo氏のHTML解体新書も買ってあるので、公式リファレンスと一緒に併読しながら読もうと思う。
CSSもここ数年一気にプロパティが増え、サポートされているものも多くなった。subgridなるものも実装されたらしく、またやらねば。
というかそもそもReactwebアプリでCSSを当てる方法をインラインべた書き以外知らない。
