React の useRef フックをマスターする: DOM と可変値の操作

React で Ref フックを使用する

useRef フックは、再レンダリングを行わずにレンダリング間で値を保持するために使用される組み込みの React フックです。これは、DOM 要素 と直接やり取りするため、およびレンダリング間で保持する必要があるが必ずしも再レンダリングをトリガーする必要はない値を保存するためによく使用されます。

---

useRef とは何ですか?

useRef フックは主に 2 つの目的に使用されます。

1. DOM 要素へのアクセス: DOM ノードまたは React 要素を直接参照する方法を提供し、命令的に操作できるようにします。
2. レンダリング間での値の永続化: 状態とは異なり、更新時に再レンダリングをトリガーしない可変値を保存できます。

---

useRef の構文

const myRef = useRef(initialValue);

• myRef: useRef.
によって作成された参照オブジェクト
• initialValue: 参照オブジェクトに格納される初期値。これは、DOM ノード、オブジェクト、プリミティブ値など、何でもかまいません。

useRef によって返される参照オブジェクトには、実際の値が保存される現在のプロパティがあります。

---

useRef の仕組み

1. DOM 要素へのアクセス: useRef を使用すると、クラス コンポーネントの ref 属性と同様に、機能コンポーネントの DOM 要素に直接アクセスできます。

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

     const focusInput = () => {
       // Access the DOM node and focus it
       inputRef.current.focus();
     };

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

• ここでは、inputRef を使用して を参照します。
要素が追加され、ボタンがクリックされたときに focusInput 関数がその入力要素にフォーカスします。

1. レンダー間で変更可能な値を保存する:
useRef を使用すると、レンダリング間で保持されるが、変更されたときに再レンダリングをトリガーしない値を保存できます。

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

     const increment = () => {
       countRef.current++;
       console.log(countRef.current);  // This will log the updated value
     };

     return (
       <div>
         <p>Current count (does not trigger re-render): {countRef.current}</p>
         <button onclick="{increment}">Increment</button>
       </div>
     );
   };

この例では、countRef は可変値を格納します。再レンダリングをトリガーする useState とは異なり、再レンダリングを行わずに値を更新できます。

---

useRef の一般的な使用例

1. DOM 要素へのアクセス
: たとえば、入力フィールドにフォーカスしたり、特定の要素までスクロールしたり、要素のサイズを測定したりします。

   const ScrollToTop = () => {
     const topRef = useRef(null);

     const scrollToTop = () => {
       topRef.current.scrollIntoView({ behavior: 'smooth' });
     };

     return (
       <div>
         <div ref="{topRef}">



<ol>
<li>
<strong>Storing Previous State</strong>: If you need to track the previous value of a prop or state value.
</li>
</ol>

<pre class="brush:php;toolbar:false">   const PreviousState = ({ count }) => {
     const prevCountRef = useRef();

     useEffect(() => {
       prevCountRef.current = count; // Store the current value in the ref
     }, [count]);

     return (
       <div>
         <p>Current Count: {count}</p>
         <p>Previous Count: {prevCountRef.current}</p>
       </div>
     );
   };

• 説明
: prevCountRef は count の以前の値を保存します。これは、再レンダリングをトリガーせずにアクセスできます。

1. 複雑な値の再レンダリングの回避

   : 再レンダリングをトリガーする必要のない大きなオブジェクトまたは複雑なデータ構造がある場合、useRef はコンポーネントのコンポーネントに影響を与えることなくそれを保存できます。パフォーマンス。

2. 間隔またはタイムアウトの追跡: タイムアウトまたは間隔の ID を保存し、後でクリアできます。
   

const myRef = useRef(initialValue);

• 説明:intervalRef は間隔の ID を格納し、コンポーネントがアンマウントされるときに間隔をクリアするために使用できます。

---

useRef と useState の主な違い

機能 useRef useState

Feature	useRef	useState
Triggers re-render	No (does not trigger a re-render)	Yes (triggers a re-render when state changes)
Use Case	Storing mutable values or DOM references	Storing state that affects rendering
Value storage	Stored in current property	Stored in state variable
Persistence across renders	Yes (keeps value across renders without triggering re-render)	Yes (but triggers re-render when updated)

再レンダリングをトリガーします いいえ (再レンダリングはトリガーされません) はい (状態が変化すると再レンダリングをトリガーします) 使用例 可変値または DOM 参照の保存 レンダリングに影響を与える状態の保存 バリューストレージ 現在のプロパティに保存されます 状態変数に保存されます レンダリング間の永続性 はい (再レンダリングをトリガーせずに、複数のレンダリングにわたって値を保持します) はい (ただし、更新時に再レンダリングがトリガーされます) テーブル>

---

例: フォーム検証に useRef を使用する

これは、useRef がフォーム検証に使用され、入力フィールドが無効な場合に焦点を当てた例です。

import React, { useRef, useState } from 'react';

const FormComponent = () => {
  const inputRef = useRef();
  const [inputValue, setInputValue] = useState('');
  const [エラー、setError] = useState('');

  const validateInput = () => {
    if (inputValue === '') {
      setError('入力を空にすることはできません');
      inputRef.current.focus(); // 入力要素にフォーカスを当てる
    } それ以外 {
      setError('');
    }
  };

  戻る （
    <div>
       setInputValue(e.target.value)}
      />
      {エラー && <p>



</p>
<ul>
<li>
<strong>説明</strong>: 

<ul>
<li>inputRef は、入力値が空の場合に入力要素にフォーカスするために使用されます。</li>
<li>DOM 要素に焦点を当てるには要素への直接アクセスが必要ですが、useState では提供できないため、この機能は useState では不可能です。</li>
</ul>


</li>

</ul>


<hr>

<h3>
  
  
  <strong>使用Ref Hookの概要</strong>
</h3>

<ul>
<li>
<strong>useRef</strong> は、DOM 要素への参照と、更新時に再レンダリングをトリガーしない変更可能な値を保存するために使用されます。</li>
<li>DOM ノードに直接アクセスする場合 (フォーカス、スクロール、アニメーションなど) に便利です。</li>
<li>
<strong>useRef</strong> は、以前の値を追跡したり、タイムアウト/間隔 ID を保存したりするなど、再レンダリングをトリガーする必要なく、レンダリング間で持続する値を保存する場合にも便利です。</li>
<li>
<strong>主な違い</strong>: useState とは異なり、useRef を更新しても再レンダリングはトリガーされません。</li>
</ul>


<hr>

<h3>
  
  
  <strong>結論</strong>
</h3>

<p><strong>useRef</strong> フックは、React で可変値や直接 DOM 操作を扱うのに非常に便利です。フォーム要素を操作しているか、以前の状態を追跡しているか、サードパーティのライブラリと対話しているかに関係なく、useRef はクリーンで効率的なソリューションを提供します。 useRef を使用すると、不必要な再レンダリングをトリガーせずに永続性を維持できるため、パフォーマンス重視の操作に最適です。</p>


<hr>


          </div>