React useRef フックを使用したマスター DOM 操作とパフォーマンス

React useRef フックを理解する: ゼロからヒーローまで

導入

React を使用してアプリケーションを構築する場合、開発者が直面する重要な課題の 1 つは、コンポーネントの状態とパフォーマンスの管理です。 React の useState フックは状態管理に広く使用されていますが、不必要な再レンダリングが発生する場合があります。ここで useRef フックが非常に重要になります。これにより、コンポーネントの再レンダリングをトリガーせずに、DOM を直接操作し、変更を追跡し、値を保存することができます。

このガイドでは、useRef フックを段階的に説明し、その目的、利点、一般的な使用例について説明します。最終的には、初心者でも自信を持って useRef を実装して、React アプリケーションのさまざまな課題を解決できるようになります。

React useRef フックとは何ですか?

useRef フックは、React のコア フック API の一部です。 .current プロパティを持つ可変オブジェクトを返します。このオブジェクトは、必要な値を格納するために使用できます。状態とは異なり、.current 値を変更してもコンポーネントが再レンダリングされることはありません。

useRef の簡単な構文は次のとおりです。

const myRef = useRef(initialValue);

• initialValue: useRef オブジェクトの初期値。
• myRef.current: 参照値を格納するプロパティ。

useRef を使用する理由

• 不必要な再レンダリングを避ける: 状態の変化により React で再レンダリングがトリガーされますが、useRef を使用すると、更新を行わずにレンダリング間で値を保持できます。
• DOM 要素へのアクセス: 多くの場合、入力フィールドにフォーカスするなど、ネイティブ DOM 要素と対話する必要があります。 useRef は、それを行うための効率的な方法を提供します。
• 状態の変化を追跡: 以前の状態などの値を追跡したり、複数のレンダリングにわたって持続するレンダリング数を追跡したりできます。

問題: React State により不必要な再レンダリングが発生する

React では、状態の変化により再レンダリングがトリガーされます。パフォーマンスが重要なアプリケーションの場合、過剰な再レンダリングによりアプリの速度が低下する可能性があります。例を見てみましょう。

問題例: 再レンダリングを引き起こす状態

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log("Button clicked");
  };

  return (
    <div>
      <p>{count}</p>
      <button onclick="{handleClick}">Increment</button>
    </div>
  );
};

この例では、カウントなどの特定のデータの更新のみを考慮している場合でも、ボタンをクリックするとコンポーネント全体が再レンダリングされます。

解決策: useRef を使用して再レンダリングを防止する

useRef を使用すると、不必要な再レンダリングを発生させることなく値を保存できます。

問題を解決するための参考例

const MyComponent = () => {
  const countRef = useRef(0);

  const handleClick = () => {
    countRef.current += 1;
    console.log("Button clicked, count: ", countRef.current);
  };

  return (
    <div>
      <button onclick="{handleClick}">Increment</button>
    </div>
  );
};

この例では、useRef が変更されたときに React が再レンダリングしないため、再レンダリングをトリガーせずに countRef.current をインクリメントします。

useRef を使用した DOM 要素へのアクセス

React の宣言的な性質により、直接の DOM 操作が抽象化されます。ただし、入力フィールドにフォーカスしたり、特定のセクションにスクロールしたりするなど、DOM 要素に直接アクセスする必要がある場合があります。ここで useRef が役に立ちます。

例: 入力フィールドにフォーカスする

const myRef = useRef(initialValue);

この例では、inputRef を入力フィールドの ref 属性に割り当てます。ボタンをクリックすると handleFocus 関数が呼び出され、inputRef.current.focus() を使用してプログラムで入力フィールドにフォーカスできるようになります。

再レンダリングを行わずに状態変化を追跡する

場合によっては、再レンダリングをトリガーせずに、時間の経過とともに値を追跡する必要があります。一般的な使用例は、変数の以前の状態を追跡することです。

例: useRef を使用した以前の状態の追跡

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log("Button clicked");
  };

  return (
    <div>
      <p>{count}</p>
      <button onclick="{handleClick}">Increment</button>
    </div>
  );
};

この例では、useRef を使用して前の値を保存します。コンポーネントは現在の値でレンダリングされますが、前の値は prevValueRef.current に保存され、再レンダリングはトリガーされません。

useRef は再レンダリングを引き起こしますか?

いいえ、useRef オブジェクトを変更しても再レンダリングは発生しません。この動作により、 useRef は、レンダリング間で保持する必要があるが、レンダリング ロジックの一部としては使用したくない値を格納するのに最適になります。

例: useRef 変更時の再レンダリングなし

const MyComponent = () => {
  const countRef = useRef(0);

  const handleClick = () => {
    countRef.current += 1;
    console.log("Button clicked, count: ", countRef.current);
  };

  return (
    <div>
      <button onclick="{handleClick}">Increment</button>
    </div>
  );
};

この例では、再レンダリングのたびに renderCountRef.current を変更しますが、追加の再レンダリングは発生しません。

高度な例: クリック イベントを追跡するための useRef

再レンダリングを行わずにボタンがクリックされた回数をカウントする、より高度な例を構築してみましょう。

const FocusInput = () => {
  const inputRef = useRef(null);

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

  return (
    <div>
      <input ref="{inputRef}" type="text">
      <button onclick="{handleFocus}">Focus Input</button>
    </div>
  );
};

この場合、ボタンのクリック数は clickCountRef.current 経由で追跡されますが、React はコンポーネントを再レンダリングしません。

useRef でよくある間違い

Ref の初期化を忘れる

常に参照を値または null で初期化することを忘れないでください。

const PreviousStateExample = ({ value }) => {
  const prevValueRef = useRef();

  useEffect(() => {
    prevValueRef.current = value;
  }, [value]);

  const prevValue = prevValueRef.current;

  return (
    <div>
      <p>Current Value: {value}</p>
      <p>Previous Value: {prevValue}</p>
    </div>
  );
};

useRef を使用してコンポーネントの状態を保存する

useState の代わりに useRef を使用しないでください。 useRef は、レンダリングに影響を与えない値にのみ使用してください。値がコンポーネントの表示に影響する場合は、useState.
を使用してください。

const NoRenderOnRefChange = () => {
  const renderCountRef = useRef(0);

  useEffect(() => {
    renderCountRef.current += 1;
    console.log("Component re-rendered:", renderCountRef.current);
  });

  return <p>Check the console for render count</p>;
};

よくある質問 (FAQ)

1. useState の代わりに useRef を使用する必要があるのはどのような場合ですか?

再レンダリングをトリガーせずに変更可能な値を保存する必要がある場合は、useRef を使用します。 UI に影響する値については、useState.

を使用します。

2. 以前の状態を保存するために useRef を使用できますか?

はい、useRef を使用すると、再レンダリングをトリガーせずに以前の値を保存できますが、useEffect で参照を更新することを忘れないでください。

3. useRef を変更すると再レンダリングが発生しますか?

いいえ、useRef.current を変更しても再レンダリングは発生しません。そのため、不必要な更新を避けたいシナリオに最適です。

4. useRef を使用して DOM 要素にアクセスするにはどうすればよいですか?

DOM 要素の ref 属性に useRef を割り当てると、ref.current.

を介して DOM 要素にアクセスできます。

結論

useRef フックは、React の多用途で強力なツールであり、開発者が値を保存し、以前の状態を追跡し、再レンダリングを行わずに DOM 要素と対話できるようにします。クリック数の管理から入力の集中まで、useRef はパフォーマンスを最適化し、よりクリーンで効率的なソリューションを提供する機会を開きます。このガイドにより、初心者レベルのユースケースからより高度なアプリケーションまで、さまざまなシナリオで useRef を実装するための知識が得られます。

以上がReact useRef フックを使用したマスター DOM 操作とパフォーマンスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。