ホームページ >ウェブフロントエンド >jsチュートリアル >useRef を理解する: 初心者ガイド
useRef は、値または DOM 要素への永続的な参照を作成できる React フックです。再レンダリングをトリガーする状態を管理するために使用される useState とは異なり、useRef は主に副作用または DOM 要素に直接アクセスするために使用されます。
useRef フックは以下の場合に特に役立ちます。
useRef フックは、.current プロパティを持つオブジェクトを返します。 useRef を呼び出すと、引数として渡した値への永続的な参照が作成されます。この参照は、返されたオブジェクトの .current プロパティに保存されます。
参照を作成するには、初期値を指定して useRef を呼び出すだけです。
import { useRef} from 'react' const App = () => { const countRef = useRef(0) return (...) } export default App
上記の例では、countRef は初期値 0 への参照です。
参照値にアクセスするには、.current プロパティを使用して countRef オブジェクトを呼び出すだけです
import { useRef} from 'react' const App = () => { const countRef = useRef(0) const increment = () => { countRef.current++ } return ( <div> <p>Count: {countRef.current}</p> <button onClick={increment}>Increment</button> </div> ) } export default App
上の例では、ボタンをクリックすると、countRef を増やすインクリメント関数が呼び出されますが、カウントは
Count: {countRef.current}
では更新されません。 useRef を更新しても useState のような再レンダリングが発生しないためです。期待した結果を得るには、コードを以下の例に更新してください。
import { useRef, useState } from 'react' const App = () => { const countRef = useRef(0) const [count, setCount] = useState(0) const increment = () => { countRef.current++ setCount(countRef.current) } return ( <div> <p>Count: {count}</p> <button onClick={increment}>Increment</button> </div> ) } export default App
useRef フックを使用して HTML 要素にアクセスし、プロパティを変更することができます
const App = () => { const inputRef = useRef(null) const handleFocus = () => { inputRef.current.focus() } return( <input ref={inputRef} /> ) }
useState や変数とは異なり、useRef は、キャッシュされたデータや構成設定などの値とデータを再レンダリング間で渡すことができます。
場合によっては、useRef を使用すると、不必要な再レンダリングが回避され、コンポーネントの最適化に役立ちます。たとえば、項目の大きなリストをレンダリングするコンポーネントがある場合、useRef を使用してそれをキャッシュし、変更された項目のみを変更して再レンダリングできます。
このように独自のコンポーネントに ref を渡そうとすると
const inputRef = useRef(null); return <MyInput ref={inputRef} />;
コンソールにエラーが表示される場合があります:
警告: 関数コンポーネントに参照を与えることはできません。この参照にアクセスしようとすると失敗します。 React.forwardRef() を使用するつもりでしたか?
この問題を解決するには、次のようにカスタム コンポーネントを forwardRef でラップします。
const inputRef = useRef(null); return <MyInput value={value} ref={inputRef} />;
カスタムコンポーネント:
import { forwardRef } from 'react'; const MyInput = forwardRef(({ value, onChange }, ref) => { return ( <input value={value} onChange={onChange} ref={ref} /> ); }); export default MyInput;
useRef は、主に再レンダリング間のデータのキャッシュや DOM の要素へのアクセスなどの副作用の用途に使用される強力なフックです。これは、パフォーマンスを最適化し、React アプリケーションの特定の機能を実現するための優れたツールです。
以上がuseRef を理解する: 初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。