アーキテクト レベル: React でのイベントの処理

アーキテクト レベルの開発者は、スケーラブルで保守可能でパフォーマンスの高いアプリケーションの設計に重点を置く必要があります。 React でイベントを効率的に処理することは、これにとって重要な部分です。この記事では、イベント ハンドラーの追加、合成イベントの理解、イベント ハンドラーへの引数の受け渡し、カスタム イベントの作成、イベント委任の活用など、React でのイベント処理の高度な概念とベスト プラクティスについて詳しく説明します。

イベント処理

JSX でのイベント ハンドラーの追加

JSX でのイベント ハンドラーの追加は、対話型アプリケーション作成の基礎です。 JSX のイベ​​ント ハンドラーは HTML のイベント ハンドラーに似ていますが、React のアーキテクチャとパフォーマンスの考慮事項に合わせて調整されています。

イベントハンドラーの追加例:

import React from 'react';

const handleClick = () => {
  console.log('Button clicked!');
};

const App = () => {
  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
};

export default App;

この例では、ボタンがクリックされるたびに handleClick 関数が呼び出されます。 JSX の onClick 属性はイベント ハンドラーを指定します。

合成イベント

React は合成イベントを使用して、異なるブラウザ間で一貫した動作を保証します。合成イベントは、ブラウザのネイティブ イベント システムのクロスブラウザ ラッパーであり、統合された API を提供します。

合成イベントの例:

import React from 'react';

const handleInputChange = (event) => {
  console.log('Input value:', event.target.value);
};

const App = () => {
  return (
    <div>
      <input type="text" onChange={handleInputChange} />
    </div>
  );
};

export default App;

この例では、handleInputChange 関数は、入力フィールドの値が変更されるたびにその値を記録します。イベント パラメーターは、すべてのブラウザーにわたって一貫したイベント プロパティを提供する合成イベントです。

イベントハンドラーに引数を渡す

イベント ハンドラーに引数を渡すには、アロー関数またはバインド メソッドを使用します。このテクニックは、イベントを柔軟に処理するために不可欠です。

アロー関数を使用した例:

import React from 'react';

const handleClick = (message) => {
  console.log(message);
};

const App = () => {
  return (
    <div>
      <button onClick={() => handleClick('Button clicked!')}>Click Me</button>
    </div>
  );
};

export default App;

bind メソッドを使用した例:

import React from 'react';

const handleClick = (message) => {
  console.log(message);
};

const App = () => {
  return (
    <div>
      <button onClick={handleClick.bind(null, 'Button clicked!')}>Click Me</button>
    </div>
  );
};

export default App;

どちらのメソッドでも、追加の引数を handleClick 関数に渡すことができるため、イベント処理が柔軟になります。

カスタムイベント処理

カスタムイベントの作成

標準イベントを超える複雑なインタラクションには、カスタム イベントの作成が必要になる場合があります。カスタム イベントは、CustomEvent コンストラクターとdispatchEvent メソッドを使用して作成およびディスパッチできます。

カスタム イベントの作成とディスパッチの例:

import React, { useEffect, useRef } from 'react';

const CustomEventComponent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleCustomEvent = (event) => {
      console.log(event.detail.message);
    };

    const button = buttonRef.current;
    button.addEventListener('customEvent', handleCustomEvent);

    return () => {
      button.removeEventListener('customEvent', handleCustomEvent);
    };
  }, []);

  const handleClick = () => {
    const customEvent = new CustomEvent('customEvent', {
      detail: { message: 'Custom event triggered!' },
    });
    buttonRef.current.dispatchEvent(customEvent);
  };

  return (
    <button ref={buttonRef} onClick={handleClick}>
      Trigger Custom Event
    </button>
  );
};

export default CustomEventComponent;

この例では、customEvent という名前のカスタム イベントが作成され、ボタンがクリックされたときに送出されます。イベント ハンドラーはカスタム イベントをリッスンし、イベントの詳細メッセージをログに記録します。

React でのイベント委任

イベント委任は、単一のイベント リスナーを使用して複数の要素のイベントを管理する手法です。これは、必要なイベント リスナーの数が減るため、動的リストまたはテーブルでイベントを効率的に管理する場合に特に役立ちます。

イベント委任の例:

import React from 'react';

const handleClick = (event) => {
  if (event.target.tagName === 'BUTTON') {
    console.log(`Button ${event.target.textContent} clicked!`);
  }
};

const App = () => {
  return (
    <div onClick={handleClick}>
      <button>1</button>
      <button>2</button>
      <button>3</button>
    </div>
  );
};

export default App;

この例では、div 要素の単一のイベント ハンドラーがすべてのボタンのクリック イベントを管理します。イベント ハンドラーは、event.target をチェックしてどのボタンがクリックされたかを判断し、それに応じてメッセージを記録します。

React でのイベント処理のベスト プラクティス

1. JSX でのインライン関数の作成を避ける: render メソッド内で新しい関数を作成すると、不必要な再レンダリングやパフォーマンスの問題が発生する可能性があります。 render メソッドの外側でイベント ハンドラーを定義するか、フックを使用します。

   const App = () => {
     const handleClick = () => {
       console.log('Button clicked!');
     };

     return (
       <div>
         <button onClick={handleClick}>Click Me</button>
       </div>
     );
   };

1. デフォルトの動作を防止し、伝播を停止する: 必要に応じて、event.preventDefault() を使用してデフォルトの動作を防止し、event.stopPropagation() を使用してイベントの伝播を停止します。

   const handleSubmit = (event) => {
     event.preventDefault();
     // Handle form submission
   };

   return <form onSubmit={handleSubmit}>...</form>;

1. イベント リスナーのクリーンアップ: イベント リスナーを DOM 要素に直接追加する場合は、メモリ リークを避けるために必ずクリーンアップしてください。

   useEffect(() => {
     const handleResize = () => {
       console.log('Window resized');
     };

     window.addEventListener('resize', handleResize);

     return () => {
       window.removeEventListener('resize', handleResize);
     };
   }, []);

1. 高周波イベントのデバウンスまたはスロットル: スクロールやサイズ変更などの高周波イベントに対してデバウンスまたはスロットル手法を使用して、パフォーマンスを向上させます。

   const debounce = (func, delay) => {
     let timeoutId;
     return (...args) => {
       clearTimeout(timeoutId);
       timeoutId = setTimeout(() => {
         func.apply(null, args);
       }, delay);
     };
   };

   useEffect(() => {
     const handleScroll = debounce(() => {
       console.log('Scroll event');
     }, 300);

     window.addEventListener('scroll', handleScroll);

     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
   }, []);

1. イベント委任を賢く使用する: アイテムのリストなど、DOM に動的に追加または削除される要素に対してイベント委任を利用します。

   const List = () => {
     const handleClick = (event) => {
       if (event.target.tagName === 'LI') {
         console.log(`Item ${event.target.textContent} clicked!`);
       }
     };

     return (
       <ul onClick={handleClick}>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
       </ul>
     );
   };

結論

React でイベントを効率的に処理することは、インタラクティブで高性能なアプリケーションを作成するために重要です。イベント ハンドラーの追加、合成イベントの使用、イベント ハンドラーへの引数の受け渡し、カスタム イベントの作成、イベント委任の活用などのテクニックを習得することで、堅牢でスケーラブルなアプリケーションを構築できます。ベスト プラクティスを実装すると、コードが複雑になっても保守性とパフォーマンスが維持されます。アーキテクト レベルの開発者として、これらの高度なテクニックを活用する能力は、プロジェクトの成功とチームの有効性に大きく貢献します。

以上がアーキテクト レベル: React でのイベントの処理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。