useRef フックの説明

React の useRef フックは、コンポーネントのライフサイクル全体にわたって存続する DOM 要素またはその他の値への変更可能な参照を作成できる強力な機能です。以下に、その仕組みと使用例の詳細な説明を示します:

useRefとは何ですか?

• 永続ストレージ: useRef は、更新時に再レンダリングをトリガーしない可変参照を保持する方法を提供します。これは、状態変数を更新するとコンポーネントが再レンダリングされる状態とは異なります。

• 可変オブジェクトを返します: useRef(initialValue) を呼び出すと、変更可能な現在のプロパティを持つ可変オブジェクトが返されます。 useRef に渡す初期値は current に設定されていますが、いつでも current を変更できます。

基本的な構文

const myRef = useRef(initialValue);

使用例Ref

useRef を使用して DOM 要素にアクセスする簡単な例を次に示します。

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

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

  return (
    <div>
      <input ref="{inputRef}" type="text">
      <button onclick="{focusInput}">Focus Input</button>
    </div>
  );
}

export default FocusInput;

例の説明

1. Ref の作成: const inputRef = useRef(null);入力要素への参照を保持する参照を作成します。

2. Ref の割り当て: input 要素の ref 属性が inputRef に割り当てられます。これにより、React は入力 DOM 要素を inputRef.

の現在のプロパティにアタッチできるようになります。

3. Ref へのアクセス: ボタンがクリックされると、focusInput 関数は inputRef.current を通じて入力要素にアクセスし、その要素に対して focus() を呼び出します。

使用例

1. DOM 要素へのアクセス: 例に示すように、useRef は、DOM 要素に直接アクセスして対話するためによく使用されます。

2. 可変値の保存: useRef を使用して、タイマー ID や以前の値など、変更時に再レンダリングする必要のない可変値を保存できます。
   

   const timerRef = useRef();

   const startTimer = () => {
     timerRef.current = setTimeout(() => {
       // some action
     }, 1000);
   };

   const stopTimer = () => {
     clearTimeout(timerRef.current);
   };

1. レンダリング間での値の永続化: 状態とは異なり、useRef に保持されている値は再レンダリング時にリセットされません。これは、コールバックまたはエフェクトで使用される値を追跡するのに役立ちます。

2. サードパーティ ライブラリとの統合: DOM を直接操作するサードパーティ ライブラリを使用する場合、useRef はそれらの DOM ノードへの参照を保持する方法を提供できます。

useStateとの比較

• 再レンダリング: useState を使用して状態変数を更新するとコンポーネントの再レンダリングがトリガーされますが、useRef を更新すると再レンダリングはトリガーされません。

• Storage: コンポーネントのレンダリングに影響しない値には useRef を使用しますが、影響する値には useState を使用する必要があります。

覚えておくべき重要なポイント

• useRef は DOM 要素だけでなく、あらゆる値を保持できます。
• 現在のプロパティは、再レンダリングを行わずに自由に更新できます。
• DOM ノードにアクセスしたり、レンダリングをトリガーする必要のない変更可能な値を保存したりするのに最適です。

これらの概念を理解することで、React アプリケーションで useRef フックを効果的に利用できるようになります。 useRef に関する特定の使用例や質問がある場合は、お気軽にお問い合わせください!

以上がuseRef フックの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。