useRef を理解する: 初心者ガイド

導入

useRefとは何ですか

useRef は、値または DOM 要素への永続的な参照を作成できる React フックです。再レンダリングをトリガーする状態を管理するために使用される useState とは異なり、useRef は主に副作用または DOM 要素に直接アクセスするために使用されます。

useRef を使用する理由

useRef フックは以下の場合に特に役立ちます。

• DOM 要素への直接アクセス: useRef を使用して DOM 要素への参照を取得すると、再レンダリングをトリガーせずに DOM 要素を直接操作できます。
• 永続的な値を作成する: 状態とは異なり、useRef で作成された値はレンダリング間で保持されるため、再レンダリングをトリガーする必要のないデータの保存に最適です。

useRef フックを理解する

useRef フックは、.current プロパティを持つオブジェクトを返します。 useRef を呼び出すと、引数として渡した値への永続的な参照が作成されます。この参照は、返されたオブジェクトの .current プロパティに保存されます。

useRef を使用した参照の作成

参照を作成するには、初期値を指定して 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 の一般的な使用例

DOM 要素に直接アクセスして操作する

useRef フックを使用して HTML 要素にアクセスし、プロパティを変更することができます

const App = () => {
  const inputRef = useRef(null)

  const handleFocus = () => {
    inputRef.current.focus()
  }

  return(
    <input ref={inputRef} />
  )
}

永続的な値

useState や変数とは異なり、useRef は、キャッシュされたデータや構成設定などの値とデータを再レンダリング間で渡すことができます。

パフォーマンスの最適化

場合によっては、useRef を使用すると、不必要な再レンダリングが回避され、コンポーネントの最適化に役立ちます。たとえば、項目の大きなリストをレンダリングするコンポーネントがある場合、useRef を使用してそれをキャッシュし、変更された項目のみを変更して再レンダリングできます。

ベストプラクティスと考慮事項

• レンダリング中に を書き込んだり ref.current を読み取ったりしないでください
• ref.current プロパティを変更できます
• ref.current プロパティを変更しても、React はコンポーネントを再レンダリングしません
• 情報はコンポーネントの各コピーに対してローカルです (共有される外部の変数とは異なります)。(通常の変数とは異なり、再レンダリングの間に情報を保存) できます。レンダリングごとにリセットされます)。
• 代わりにイベント ハンドラーまたはエフェクトから ref の読み取りまたは書き込みを行うことができます。
• ref を使用した dom の操作

カスタム コンポーネントに ref を渡します。

このように独自のコンポーネントに 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 サイトの他の関連記事を参照してください。