[React] useRef

使用方法

const ref = useRef(value);

consloe.log(ref); // {current: value}

関数コンポーネントからuserefを呼び出すと、オブジェクトが返されます.オブジェクトには、パラメータとしての初期値を値とする現在の構成があります.

refオブジェクトを変更して値を変更できます.返されるrefは、構成部品のライフサイクル全体で維持されます.つまり、エレメントをレンダリングし続けても、エレメントがアンインストールされるまで値は保持されます.

使用目的

1.記憶領域

stateに似たストレージスペースとして使用されます.ステータスが変更されるとレンダリングされますが、refはレンダリングされません.関数要素は関数であるため、レンダリング後、関数内部の変数は初期化されますが、refは値を保持します.また、refの値は、ステータスの変更によってレンダリングされても保持されます.このため、変更時にレンダリングを行うべきでない値を処理する場合に便利です.

2.DOM要素へのアクセス

refを使用してDOM要素にアクセスして、さまざまな操作を実行できます.通常、カーソルがログイン面にある場合、id inputをクリックする必要はありません.バニラJSのDocument.querySelector()に似ています.

変数の管理(ストレージ)

上記のコードでは、stateは変更するたびにレンダリングされ、refは変更時にレンダリングされません.頻繁に変更されるがレンダリングする必要のない値をrefとして指定して、パフォーマンスを最適化できます.

refと通常の変数の違いを示すコードです.refと変数を変更して再レンダリングすると、変数として宣言された値が再宣言されて初期化されますが、refには古い値が保持される特性があります.

上記のコードに示すように、useEffect内部にsetStateが含まれている場合、無限ループが発生します.この場合、userefを使用して無限ループを防止することができる.

userefはレンダリングを生成しないため、変更を検出する必要がありますが、レンダリングを回避する必要がある場合に使用できます.

DOM要素へのアクセス

userefを呼び出すとオブジェクトが返され、refプロパティとしてアクセスする要素に入れると、その要素にアクセスできます.

呼び出しuserefの結果を変数に保存し、その変数を要素のrefの属性値として指定すると、要素が現在に割り当てられます.focusメソッドでは、画面を移動するときに自動的にフォーカスできます.

value property、値にもアクセスできます.

userEffectに加えて、論理実行後のfocusメソッドを使用してカーソルを返すこともできます.
参考資料