React hookとは..?
React hookはReact16.8から追加された機能で、クラスコンポーネントでしか使用できなかったstateなどのReactの機能を関数コンポーネントで使用できる機能です。
公式ページは以下です。
この記事ではReact hookのAPIの1つであるuseRefについて紹介していこうと思います。
他のReact hookに関するAPIについても解説していますので、そちらもご覧ください。
- 【React.js】React hookを理解する！ ~ useState編 ~
- 【React.js】React hookを理解する！ ~ useEffect編 ~
- 【React.js】React hookを理解する！ ~ useContext編 ~
- 【React.js】React hookを理解する！ ~ useReducer編 ~
- 【React.js】React hookを理解する！ ~ useCallback編 ~
- 【React.js】React hookを理解する！ ~ useMemo編 ~
- 【React.js】React hookを理解する！ ~ useRef編 ~ ◀︎◀︎◀︎ 今回のテーマ😃
useRefとは…?
useRef()は.currentプロパティが渡された引数(initialValue)に初期化されているミュータブルなrefオブジェクトを返します。
つまり、要素への参照を行うことができます。
返されるオブジェクトはコンポーネントの存在期間全体にわたって存在し続けます。
使い方
- useRef()に初期値を渡し、refオブジェクトを生成します。
- currentプロパティにrefオブジェクトの値が保持されます。
const refObject = useRef(initialValue)
const value = refObject.current;実際にコードで書いてみました。例として、useRef()でrefオブジェクトを作成したものをref属性(HTML要素)に指定してDOMを参照してみます。
import React, { useRef } from 'react';
const Form1 = () => {
const inputElement = useRef(null);
const doClick = () => {
// inputElement.currentで <input type="text" /> を参照できる。
inputElement.current.focus();
console.log('inputElement', inputElement.current);
}
return (
<>
<input ref={ inputElement } type='text' />
<button onClick={ doClick }>入力欄をフォーカスする</button>
<div className='line'></div>
</>
)
};
export default Form1import React from 'react';
import { Form1 } from './components/index';
function App() {
return (
<div>
<p>useRefのサンプル１です</p>
<Form1 />
</div>
);
}
export default App;以下のように動作します。
ボタンクリックで<input type=”text”>がfocusされます。
useRefとuseStateの挙動の違い
続いてuseRef()とuseState()の挙動の違いを見てみましょう。
useRef使用してDOMを参照する
useRef()を使用するとクリックイベントによるstateであるnameが更新された時のみ、コンポーネントの再レンダリングが行われます。
import React, { useRef, useState } from 'react';
const Form2 = () => {
const inputElement = useRef(null);
const [name, setName] = useState("太郎(※初期の名前です)");
const doClick = () => {
setName(inputElement.current.value);
}
console.log('再レンダリングされました！！');
return (
<>
<input ref={ inputElement } type='text' />
<button onClick={ doClick }>名前をセットする</button>
<p>名前：{ name }</p>
<div className='line'></div>
</>
)
};
export default Form2import React from 'react';
import { Form2 } from './components/index';
function App() {
return (
<div>
<p>useRefのサンプル2です</p>
<Form2 />
</div>
);
}
export default App;以下のように動作します。
useState使用してDOMを参照する
useState()を使用するとクリックイベントによるstateであるnameが更新された時とチェンジイベントによるnameの更新の時に、コンポーネントの再レンダリングが行われます。
import React, { useState } from 'react';
const Form3 = () => {
const [inputtedValue, setInputtedValue] = useState("");
const [name, setName] = useState("太郎(※初期の名前です)");
const doClick = () => {
setName(inputtedValue);
}
const updataName = (event) => {
setInputtedValue(event.target.value);
};
console.log('再レンダリングされました！！');
return (
<>
<input
value={inputtedValue}
onChange={ updataName }
type='text'
/>
<button onClick={ doClick }>名前をセットする</button>
<p>名前：{ name }</p>
<div className='line'></div>
</>
)
};
export default Form3import React from 'react';
import { Form3 } from './components/index';
function App() {
return (
<div>
<p>useRefのサンプル3です</p>
<Form3 />
</div>
);
}
export default App;以下のように動作します。
内部に保持している値だけを更新したい、かつコンポーネントの再レンダリングを行いたくない場合にuseRef()を利用すると良いですね。
まとめ
今回の記事ではuseRef()を紹介しました。
参考記事
コメント