React の useEffect とイベント リスナーを理解する: ディープダイブ

React コンポーネントがレンダリングのたびに再登録せずにアクティブなイベント リスナーをどのように維持できるか疑問に思ったことはありますか?一般的な使用例、つまりマウス座標の追跡を調べることで、この謎を解明してみましょう。

パズル

マウスの位置を追跡するこの React コンポーネントについて考えてみましょう:

import React from 'react';

function MouseCoords() {
  const [mousePosition, setMousePosition] = React.useState({
    x: 0,
    y: 0,
  });

  React.useEffect(() => {
    function handleMouseMove(event) {
      setMousePosition({
        x: event.clientX,
        y: event.clientY,
      });
    }
    window.addEventListener('mousemove', handleMouseMove);
  }, []);

  return (
    <div className="wrapper">
      <p>
        {mousePosition.x} / {mousePosition.y}
      </p>
    </div>
  );
}

export default MouseCoords;

ここが興味深い部分です。空の依存関係配列 ([]) は、useEffect が 1 回だけ実行されることを意味しますが、マウスを動かすとコンポーネントは引き続き更新されます。これはどのように作動しますか？ ?

ブラウザのイベント システムと React のレンダリング

この動作を理解するには、2 つの別個のシステムが作用していることを認識する必要があります。

1. ブラウザのイベント システム: イベント リスナーを管理し、コールバックをトリガーします
2. React のレンダリング システム: コンポーネントの更新と UI レンダリングを処理します

防犯カメラのようなものだと考えてください

自宅に防犯カメラを設置するところを想像してみてください:

• インストール ([] を使用した useEffect) は 1 回だけ行われます
• カメラ (イベント リスナー) は独立してアクティブなままです
• 動きが発生すると、アラームがトリガーされます (状態更新)
• 動きを検出するたびにカメラを再インストールする必要はありません!

流れを分解する

何が起こるかを段階的に見てみましょう:

1. 初期セットアップ (マウントフェーズ)

React.useEffect(() => {
  // Effect runs once on mount
  function handleMouseMove(event) {
    setMousePosition({
      x: event.clientX,
      y: event.clientY,
    });
  }
  window.addEventListener('mousemove', handleMouseMove);
}, []); // Empty array = run once

2. イベント処理

マウスが動いたとき:

• ブラウザのイベント システムが動きを検出
• 登録された handleMouseMove 関数を呼び出します
• 関数は setMousePosition を使用して React 状態を更新します
• コンポーネントが新しい座標で再レンダリングされます

3. クリーンアップ (重要!)

コンポーネントがアンマウントされるときは、常にイベント リスナーをクリーンアップする必要があります。完全なコードは次のとおりです:

React.useEffect(() => {
  function handleMouseMove(event) {
    setMousePosition({
      x: event.clientX,
      y: event.clientY,
    });
  }
  window.addEventListener('mousemove', handleMouseMove);

  // Cleanup function
  return () => {
    window.removeEventListener('mousemove', handleMouseMove);
  };
}, []);

避けるべきよくある落とし穴

1. クリーンアップがありません: メモリ リークを防ぐためにイベント リスナーを常に削除します
2. 不要な依存関係: イベント リスナーが必要としない限り、依存関係を追加しないでください
3. 再登録: レンダリング本体にイベント リスナーを配置しないようにします

現実世界の例: 強化されたマウス トラッカー

追加機能を備えたより実用的なバージョンは次のとおりです:

import React from 'react';

function MouseCoords() {
  const [mousePosition, setMousePosition] = React.useState({
    x: 0,
    y: 0,
  });

  React.useEffect(() => {
    function handleMouseMove(event) {
      setMousePosition({
        x: event.clientX,
        y: event.clientY,
      });
    }
    window.addEventListener('mousemove', handleMouseMove);
  }, []);

  return (
    <div className="wrapper">
      <p>
        {mousePosition.x} / {mousePosition.y}
      </p>
    </div>
  );
}

export default MouseCoords;

重要なポイント

1. イベント リスナーの登録 (useEffect) とイベント処理は別のシステムです
2. 空の依存関係配列 ([]) は「マウント時に 1 回実行」を意味します
3. ブラウザ イベントは React のレンダリング サイクルとは独立して動作します
4. アンマウント時に常にリスナーをクリーンアップする

結論

React の useEffect とブラウザ イベントの関係を理解することは、パフォーマンスの高い React アプリケーションを構築するために重要です。ブラウザのイベント システムを正しく活用することで、不必要な再レンダリングやイベント リスナーの登録を行わずに応答性の高いインターフェイスを作成できます。

覚えておいてください: イベント リスナーは忠実なセキュリティ カメラのようなものです。一度インストールすれば、そのまま機能します。

---

この説明は、useEffect とイベント リスナーについての理解を深めるのに役立ちましたか?ご意見やご質問があれば、以下にコメントを残してください!

以上がReact の useEffect とイベント リスナーを理解する: ディープダイブの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。