代表通信～滋賀の島田さん、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。
EVENTS
