ReactにおけるuseRefの具体的な使い方

React の経験がある人なら、コンポーネントインスタンスオブジェクトや DOM オブジェクトを取得するために使用できる ref をよくご存知だと思います。

従来の使用法に加えて、useRef フック関数は「レンダリングサイクル全体にわたって」データを保存することもできます。

まず、その伝統的な使用法を見てみましょう。

'react' から React、{ useState、useEffect、useMemo、useRef } をインポートします。

デフォルト関数App(props)をエクスポートする{
  定数[count, setCount] = useState(0);

  定数doubleCount = useMemo(() => {
    2 * カウントを返します。
  }, [カウント]);

  const カウンタRef = useRef();

  使用効果(() => {
    document.title = `値は ${count} です`;
    console.log(カウンタ参照.current);
  }, [カウント]);
  
  戻る （
    <>
      <button ref={couterRef} onClick={() => {setCount(count + 1)}}>カウント: {count}、double: {doubleCount}</button>
    </>
  );
}

このコードは、useRef を使用して counterRef オブジェクトを作成し、それをボタンの ref 属性に割り当てます。このように、couterRef.current にアクセスすることで、ボタンに対応する DOM オブジェクトにアクセスできます。

それでは、データを保存する方法を見てみましょう。

コンポーネント内に、レンダリングサイクルを超えて存続できるもの、つまりコンポーネントが複数回レンダリングされた後も一定のままであるプロパティはありますか?最初に思い浮かぶのは状態です。そうです、コンポーネントの状態は複数回のレンダリング後も変更されない場合があります。ただし、状態の問題は、状態が変更されると、コンポーネントが再レンダリングされることです。

現時点では、useRef はレンダリングサイクル全体にわたってデータを保存するために使用でき、これを変更してもコンポーネントのレンダリングは発生しません。

'react' から React、{ useState、useEffect、useMemo、useRef } をインポートします。

デフォルト関数App(props)をエクスポートする{
  定数[count, setCount] = useState(0);

  定数doubleCount = useMemo(() => {
    2 * カウントを返します。
  }, [カウント]);

  タイマーIDをuseRef()で設定します。
  
  使用効果(() => {
    タイマーID.current = setInterval(()=>{
        setCount(count => count + 1);
    }, 1000); 
  }, []);
  
  使用効果(()=>{
      if(カウント > 10){
          タイマーID.currentをクリアします。
      }
  });
  
  戻る （
    <>
      <button ref={couterRef} onClick={() => {setCount(count + 1)}}>カウント: {count}、double: {doubleCount}</button>
    </>
  );
}

上記の例では、ref オブジェクトの current プロパティを使用してタイマー ID を保存し、複数回のレンダリング後にタイマー ID を保存して、タイマーを正常にクリアできるようにしています。

React における useRef の具体的な使い方についてはこれで終わりです。React の useRef に関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: