useRef() を使用してコンポーネントがレンダリングされた回数を追跡する

useRef() を使用してコンポーネントがレンダリングされた回数を追跡する - React

Susan Sarandon

リリース： 2024-10-18 20:40:03

オリジナル

638 人が閲覧しました

まず、初心者がこれに取り組む方法をすべて考えてみましょう。

必要に応じて手順を進めるには、新しい反応プロジェクトを作成し、これだけのコードを App.jsx または任意のコンポーネントに配置し、index.css と App.css からすべてを削除します。

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>The component has rendered {0} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

export default App;

ログイン後にコピー

今は次のようにプレビューされます:
Track how many times a component rendered using useRef() - React
上記のコードでは、ボタンをクリックすると 1 ずつ増加する count という名前の状態変数を作成しました。ここでのカウントは追加の状態変数であり、ここでは何も行いませんが、物事をよりよく理解するのに役立ちます。以前に React でコーディングしたことがあれば、このコードに圧倒されることはありません。

それでは、本編に入りましょう...

1. 状態変数の使用

これは、状態変数を作成して 0 で初期化し、コンポーネントがレンダリングされるたびに 1 ずつインクリメントするような、ほとんどの人が思いつく最初のアプローチです。

App コンポーネントは次のようになります:

function App() {
  const [count, setCount] = useState(0);
  const [numberOfTimesRendered, setNumberOfTimesRendered] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
    setNumberOfTimesRendered(numberOfTimesRendered + 1);
  };

  return (
    <div>
      <p>The component has rendered {numberOfTimesRendered} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

ログイン後にコピー

このアプローチはここでは問題なく機能しますが、多くの欠陥があります。理想的には、[強制レンダリング] ボタンをクリックしたときにコンポーネントが 1 回だけレンダリングされることはありません。ボタンをクリックすると、カウント値が 1 ずつ増加し、これによりコンポーネントが再レンダリングされます。これは、状態変数の変更によりコンポーネントが再レンダリングされることは誰もが知っていることです。ただし、setCount(count 1) による再レンダリング後はここで終了し、setNumberOfTimesRendered(numberOfTimesRendered 1) がトリガーされ、コンポーネントが再度レンダリングされます。

numberOfTimesRendered 値は 1 ずつ増加しますが、[Force Render] ボタンをクリックするたびにコンポーネントは 2 回レンダリングされます。これは、この種の問題に状態変数を使用することが最善ではなく最悪のアプローチである理由を示しています。

2. グローバル変数の使用

考えられるもう 1 つのアプローチは、次のようにコンポーネントのライフサイクルの外でグローバル変数を定義し、コンポーネントが再レンダリングされるときにそれを 1 ずつインクリメントすることです。

let numberOfTimesRendered = 0;

function App() {
  const [count, setCount] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
  };

  numberOfTimesRendered += 1;

  return (
    <div>
      <p>The component has rendered {numberOfTimesRendered} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

ログイン後にコピー

このアプローチはうまく機能し、余分なレンダリングは発生せず、これがこれに対する最良の解決策であるように見えますが、コンポーネントのライフサイクルの外側で何も定義すべきではないため、そうではありません。

3. ローカル変数の使用

コンポーネント内にローカル変数を使用する上記と同じアプローチも考えられますが、コンポーネントがレンダリングするたびにローカル変数が 0 に再初期化されるため、これより最悪のアプローチはありません。そして、毎回以前のレンダリングを追跡できなくなります。

4. useRef() フックの使用

次に、useRef() を使用してこれを実装しましょう。

私たちのほとんどが知っているように、useRef は dom 内の要素を参照し、それらを手動で操作するためのフックですが、useRef はこれだけに限定されません。値を保持することもでき、コンポーネントレンダリングのライフサイクル全体にわたって変数を永続的に維持するために使用できます。

useRef 内に値を保存すると、その値は React コンポーネントのレンダリングライフサイクルの影響を受けず、値は何度再レンダリングされても永続的に残ります。実装は次のようになります:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const handleRender = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>The component has rendered {0} times</p>

      <button onClick={handleRender}>Force Render</button>
    </div>
  );
}

export default App;

ログイン後にコピー

numberOfTimesRendered.current は、参照変数内に保存されている現在の値を示します。このアプローチは余分な再レンダリングを引き起こしません。これが最良とは言えませんが、私の知る限り最も最適なアプローチの 1 つです。

これでこの記事は終わりです。フィードバックをお待ちしております。さらに説明が必要な場合は、以下にコメントしてください。全力でサポートさせていただきます。

X と LinkedIn で私とつながりましょう!?✨

以上がuseRef() を使用してコンポーネントがレンダリングされた回数を追跡する - Reactの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。