コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > リードレベル: React でのイベントの処理

リードレベル: React でのイベントの処理

WBOY
リリース： 2024-07-17 17:25:13
オリジナル
805 人が閲覧しました

Lead level: Handling Events in React

リード開発者として、アプリケーションの効率性、保守性、拡張性を確保するには、React のイベント処理の高度な概念を習得することが重要です。この記事では、イベント ハンドラーの追加、合成イベントの理解、イベント ハンドラーへの引数の受け渡し、カスタム イベントの作成、イベント委任の活用など、React でイベントを処理するための高度なテクニックとベスト プラクティスについて説明します。

イベント処理

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

JSX でのイベント ハンドラーの追加は、インタラクティブな React アプリケーションの作成の基本となる簡単なプロセスです。 JSX のイベ​​ント ハンドラーは HTML のイベント ハンドラーに似ていますが、React の JSX 構文と、パフォーマンスと読みやすさに関する特別な考慮事項が異なります。

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

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 は合成イベントを使用して、さまざまなブラウザー間でイベントが一貫して動作することを保証します。合成イベントは、ブラウザーのネイティブ イベント システムのクロスブラウザー ラッパーであり、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 をチェックしてどのボタンがクリックされたかを判断し、それに応じてメッセージを記録します。

Best Practices for Event Handling in React

  1. Avoid Creating Inline Functions in JSX: Creating new functions inside the render method can lead to unnecessary re-renders and performance issues. Define event handlers outside the render method or use hooks. 
   const App = () => {
     const handleClick = () => {
       console.log('Button clicked!');
     };

     return (
       <div>
         <button onClick={handleClick}>Click Me</button>
       </div>
     );
   };
ログイン後にコピー
  1. Prevent Default Behavior and Stop Propagation: Use event.preventDefault() to prevent default behavior and event.stopPropagation() to stop event propagation when necessary. 
   const handleSubmit = (event) => {
     event.preventDefault();
     // Handle form submission
   };

   return <form onSubmit={handleSubmit}>...</form>;
ログイン後にコピー
  1. Clean Up Event Listeners: When adding event listeners directly to DOM elements, ensure to clean them up to avoid memory leaks. 
   useEffect(() => {
     const handleResize = () => {
       console.log('Window resized');
     };

     window.addEventListener('resize', handleResize);

     return () => {
       window.removeEventListener('resize', handleResize);
     };
   }, []);
ログイン後にコピー
  1. Debounce or Throttle High-Frequency Events: Use debounce or throttle techniques for high-frequency events like scrolling or resizing to improve performance. 
   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. Use Event Delegation Wisely: Leverage event delegation for elements that are dynamically added or removed to the DOM, such as lists of items. 
   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>
     );
   };
ログイン後にコピー

Conclusion

Handling events in React efficiently is crucial for creating interactive and high-performance applications. By mastering the techniques of adding event handlers, using synthetic events, passing arguments to event handlers, creating custom events, and leveraging event delegation, you can build robust and scalable applications. Implementing best practices ensures that your code remains maintainable and performant as it grows in complexity. As a lead developer, your ability to utilize these advanced techniques will significantly contribute to the success of your projects and the effectiveness of your team.

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

ソース：dev.to
前の記事：DayMG) の DaysOfJavaScript 次の記事：車輪の再発明はやめましょう！または、Vue および React アプリケーション用のユーティリティ ライブラリ
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2190
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2340
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1963
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1849
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1905
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート