React useRefフック

概要: このチュートリアルでは、ReactのuseRefフックを使用して、DOM要素に直接アクセスする方法と、レンダリング間で値を保持する方法について学びます。

React useRefフックの紹介

Reactでは、useRefフックを使用すると、プレーンなJavaScriptのdocument.querySelector()のように、DOM要素に直接アクセスできます。さらに、useRefフックを使用すると、再レンダリングを引き起こすことなく状態を変更できます。

useRefフックを使用する手順は次のとおりです。

ステップ1。ReactからuseRefをインポート

import React, { useRef } from 'react';Code language: JavaScript (javascript)

ステップ2。refオブジェクトの作成

初期値を持つuseRef()関数を呼び出して、refオブジェクトを作成します

const myRef = useRef(initialValue);Code language: JavaScript (javascript)

useRef()関数の戻り値は、可変オブジェクトMyRefです。

つまり、refの値を更新しても、再レンダリングは発生しません。これがuseRefフックとuseStateフックの主な違いです。

ステップ3。refオブジェクトをDOM要素にアタッチします。

DOM要素に直接アクセスする場合は、ref属性を使用してrefをDOM要素にアタッチします

<input ref={myRef} type="text" />Code language: JavaScript (javascript)

ステップ4。refオブジェクトを使用します。

イベントハンドラー、useEffectフック、またはコンポーネントのその他の部分で、.currentプロパティを介してrefの現在の値にアクセスします

const handleClick = () => {
  console.log(myRef.current.value);
};Code language: JavaScript (javascript)

ステップ5。refを更新します

再レンダリングを引き起こすことなく値を変更するには、refオブジェクトの.currentプロパティを更新します

myRef.current = newValue;Code language: JavaScript (javascript)

React useRefフックの使用法

実際には、useRef()フックを使用して、DOM要素に直接アクセスしたり、再レンダリングを引き起こすことなく可変オブジェクトを管理したりします。

DOM要素に直接アクセスする

次のコンポーネントは、useRefフックを使用してDOM要素に直接アクセスする方法を示しています

import { useRef } from 'react';

const SubscriberForm = () => {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <label htmlFor="email">Email:</label>
      <input type="email" id="email" ref={inputRef} />
      <button type="submit" onClick={handleClick}>
        Submit
      </button>
    </div>
  );
};

export default SubscriberForm;
Code language: JavaScript (javascript)

SubscriberFormには、入力要素とボタンがあります。ボタンをクリックすると、入力にフォーカスが当たります。

仕組み。

まず、reactからuseRefをインポートします

import { useRef } from 'react';Code language: JavaScript (javascript)

次に、初期値がnullのrefオブジェクトを宣言します

const inputRef = useRef(null);Code language: JavaScript (javascript)

3番目に、refオブジェクトを入力のref属性にアタッチします

<input type="email" id="email" ref={inputRef} />Code language: JavaScript (javascript)

Reactがコンポーネントをレンダリングすると、refオブジェクトのcurrentプロパティが入力（DOMノード）に設定されます。focus()などのDOMノードのメソッドにアクセスできます。

最後に、ユーザーが送信ボタンをクリックしたときに、DOM要素のfocus()メソッドを呼び出して、入力要素にフォーカスを設定します

const handleClick = (e) => {
  inputRef.current.focus();
};Code language: JavaScript (javascript)

可変値を格納する

次の例は、再レンダリングをトリガーせずに、レンダリング間で永続する可変値を格納するためにrefを使用する方法を示しています

import { useRef } from 'react';

const Counter = () => {
  const countRef = useRef(0);

  const incrementCount = () => {
    countRef.current++;
    alert(countRef.current);
  };

  return <button onClick={incrementCount}>Increment Count</button>;
};

export default Counter;Code language: JavaScript (javascript)

仕組み。

まず、reactライブラリからuseRefをインポートします

import { useRef } from 'react';Code language: JavaScript (javascript)

次に、初期値が0のuseRef()フックからcountRefを返します

const countRef = useRef(0);Code language: JavaScript (javascript)

3番目に、ユーザーがボタンをクリックしたときにrefの値を増やします

const incrementCount = () => {
  countRef.current++;
  alert(countRef.current);
};Code language: JavaScript (javascript)

useRef vs. useStateフック

次の表は、useRefフックとuseStateフックの違いをまとめたものです

概要

• useRef()フックを利用して、DOM要素に直接アクセスし、不要な再レンダリングを引き起こすことなく可変状態を管理します。