🐷
ReactのuseRefについて調べたメモ
「それ、ReactのuseRefを使えばできるよ」という話が聞こえてきました。
useRefってなんだっけな。と思ったので調べました。
useRefとは何か
React公式 によると、以下です。
useRef は、.current プロパティが渡された引数 (initialValue) に初期化されているミュータブルな ref オブジェクトを返します。返されるオブジェクトはコンポーネントの存在期間全体にわたって存在し続けます。
うん。よくわかりません。
整理します。
- useRefは、 ミュータブルなrefオブジェクトを返す。
- useRefが返すオブジェクトは、 .currentプロパティが渡された引数に初期化されている。
- .currentプロパティが渡された引数は、initialValueと呼ばれる。
- useRefが返したオブジェクトは、コンポーネントの存在期間全体にわたって存在し続ける。
文章を分解しました。
ここまでくるとまずは「refオブジェクトとは何か」を理解しないとuseRefを使えないことがわかります。
refオブジェクトとは何か
改めてRefについて調べてみると、React公式で以下のように記載があります。
Ref は render メソッドで作成された DOM ノードもしくは React の要素にアクセスする方法を提供します。
つまりは、Refは、レンダリングされたコンポーネントにアクセスする手段です。
useRefとRefをどう扱うか
useRefでRefオブジェクトを取得した後、そのオブジェクトはインスタンス変数のように扱えます。
値を取得したり上書きする場合は、以下のような感じです。
function Timer() {
const intervalRef = useRef();
useEffect(() => {
const id = setInterval(() => {
// ...
});
intervalRef.current = id; // 上書き
return () => {
clearInterval(intervalRef.current); // 参照して実行
};
});
// ...
}
なんとなくわかった気分になってきたので終わります。
参考。
Discussion