BLOG

シンラボメンバーのあれこれ

  1. HOME
  2. ブログ
  3. 代表通信
  4. 代表通信~滋賀の島田さん、useRef()わからん

代表通信~滋賀の島田さん、useRef()わからん

こんばんは。代表の草場です。

本日はミーティングづくしの一日でした。この後はボードゲームアプリ化のミーティング、シンラボ運営チームミーティング。楽しみです。

なんと、滋賀でSDGsボードゲームファシリテーターとして精力的に活動されている島田さんが、新しく法人を設立したとのことで、東京まであいさつに来てくださいました。お祝い用意してなかった。。具体的な滋賀での取り組みもまとまり、楽しみです。

さて、引き続き、Reactを触っています。TicTocのクローンを作ってみようというテーマを勉強している際、useRef()が出てきました。動画を見ながら真似している分にはわかった気になるのですが、改めて調べてみました。以下、公式より。
「useRefは、.currentプロパティが渡された引数(initialValue)に初期化された、mutableなrefオブジェクトを返します。返されたオブジェクトは、コンポーネントの全ライフタイムにわたって持続します。
本質的には、useRef は .current プロパティの中に可変的な値を保持できる「箱」のようなものです。」
ふむ。余計わからなくなったので、コードを参照。

function TextInputWithFocusButton() {
    const inputEl = useRef(null);
    const onButtonClick = () => {
         // ‘current’ points to the text input element 
         iputEl.current.focus();
    };
   return (
      <>
        <input ref={inputEl type=”text” />
        <button onClick={onButtonClick}> Focus the input </button>
      </>
    );
  }

公式より。
「refは主にDOMにアクセスするための方法として、refがあります。ref オブジェクトを <div ref={myRef} />で React に渡した場合、React は、その .current プロパティを、そのノードが変更されるたびに、対応する DOM ノードに設定します。しかし、useRef() は ref 属性以上に便利です。これは、クラスでインスタンスフィールドを使用するのと同じように、任意の変更可能な値を保持しておくのに便利です。」
任意のmutableな値、というのがミソですね。

注意点としては、.currentプロパティを変更しても再レンダリングは実行されないことです。
「React が ref を DOM ノードにアタッチしたりデタッチしたりするときにコードを実行したい場合は、代わりにcallback ref を使用するとよいでしょう。」

うーーーーーーん!わからんのでやり直し。

明日もHooks API。

関連記事