技術とかの雑なToday I Learnedメモ

2023-07-24のいろいろ

git stashに名前つけれる

git stash listでいつもどれがどれだっけ?となるので名前というかラベルを付けたい!と思って調べたら普通に付けれることを知った。

名前をつけてgit stashする - モヒカンメモ

こういう知らなかった細かいテクニックみたいなのが無限にあるし今後も出てくるんだろう。

ReactのRefについて調べた

コードレビューでRefが出てきたので、そういえば自分はRefについてあまりにも雰囲気でコードを読んでいるなと思ったので調べた。

React Ref の基本 - 30歳からのプログラミング

Refはpropsやstateとは別のコンポーネントに持てる特別な変数で、コンポーネントが更新されても持っている値を維持している。

propsやstateが更新されるとコンポーネントが再レンダリングされるが、refが更新されても再レンダリングされない(= レンダリングと値の変更が連動していない)ので、宣言的UIの原則には則っていない。

ref属性はHTML要素かクラスコンポーネントにRefオブジェクトや関数を渡せる(関数コンポーネントは渡せない)

このままではref属性に渡したRefオブジェクトが変更されたときになにかのイベントを発火させることができないので、関数を渡すことで実現する。これをコールバックRefと呼ぶ。

コールバックRefは、引数にRef.currentの値が渡される。また、コールバックRefはコンポーネントのマウント時、更新時、アンマウント時に実行される。

React的には公式からも普段から使うべきではなくやむを得ないときに使うものだと示されている。

Refってわかりにくい

Reactの原則から外れているからかもしれないが、Refを理解するのに時間がかかった。

propsやstateで状態を管理するのとは別で好きなように更新できる状態を持つというのが分かりにくい原因かもしれない。

ただ、RefはReactのrenderメソッドで作られたDOMへのアクセス手段として必要であることもわかった。

描画された要素の高さを取得したい、ページ表示時に特定の要素にフォーカスしたい(focus()というDOM APIを使いたい)などのDOMにアクセスしないとできないこともあるため。

なので仕方ないのだけど、「これはRefを使う以外どうしようもない」という場面以外ではRefを使わないように気をつけよう。