useRef を使用した React での状態の管理

React アプリケーションを構築する場合、状態の管理は基本的な側面です。ほとんどの開発者は useState に精通していますが、useRef フックは目立たないことがよくあります。このブログでは、useRef が状態を管理し、その固有の使用例を理解する上でどのように強力なツールとなり得るかを探っていきます。

useRefとは何ですか?

useRef フックは、渡された引数に初期化される .current プロパティを持つ可変 ref オブジェクトを返します。この ref オブジェクトは、コンポーネントの存続期間全体にわたって存続します。状態とは異なり、ref を変更してもコンポーネントの再レンダリングは発生しません。

useRef を使用する理由

DOM 要素へのアクセス: useRef は通常、DOM 要素に直接アクセスするために使用され、再レンダリングを行わずに DOM 要素を操作できます。
可変値の保存: useRef を使用すると、タイマーや以前の状態の値など、更新時に再レンダリングする必要のない値を保存できます。

例: useRef を使用した状態の管理

簡単な反例で useRef を使用して状態を管理する方法を見てみましょう。この例では、不必要な再レンダリングを発生させずにカウンターをインクリメントする方法を示します。

段階的な実装

import React, { useRef } from 'react';

function Counter() {
    // Create a ref to hold the count
    const countRef = useRef(0);

    const increment = () => {
        countRef.current += 1; // Increment the count
        alert(`Current Count: ${countRef.current}`); // Show the current count
    };

    return (
        <div>
            <h1>Counter Example</h1>
            <button onClick={increment}>Increment</button>
        </div>
    );
}

export default Counter;

コードの内訳

Ref の作成: useRef(0) を使用して countRef を初期化します。これにより、初期カウントが 0 に設定されます。
カウントのインクリメント: インクリメント関数では、countRef.current を直接更新します。これにより再レンダリングがトリガーされないため、パフォーマンスが向上します。
ユーザーのフィードバック: ボタンをクリックするたびに、現在のカウントがアラートで表示されます。

useState ではなく useRef を使用する場合

パフォーマンス: 再レンダリングを行わずに値を保存する必要がある場合は、useRef を使用するのが最適です。これは、パフォーマンス重視のアプリケーションに特に役立ちます。
非 UI 状態: タイマー、間隔、フォーム要素参照など、レンダリングに直接関係しない値には useRef を使用します。

結論

useState はレンダリングに影響する状態を管理するために不可欠ですが、useRef は、再レンダリングをトリガーせずに変更可能な値を管理するための軽量の代替手段を提供します。 useRef をいつ使用するかを理解すると、より効率的かつ効果的な React コンポーネントを作成するのに役立ちます。

次に React で状態を扱うときは、useRef がその仕事に適したツールであるかどうかを検討してください。コーディングを楽しんでください!

以上がuseRef を使用した React での状態の管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。