React: React のイベント システムを理解する

React のイベント システムの概要

合成イベントとは何ですか?

合成イベント は、ブラウザ間の互換性を実現し、パフォーマンスを最適化し、イベント処理を簡素化するために React によって設計されたイベント処理メカニズムです。 ネイティブ ブラウザ イベントをカプセル化して、統一された API とイベント処理アプローチを提供し、異なるブラウザ間で一貫したイベント動作を保証します。

合成イベントの動作原理

イベントの委任

React は、イベント委任メカニズムを通じてイベントを処理します。イベント委任とは、React がイベント リスナーを各 DOM 要素に直接バインドしないことを意味します。代わりに、すべてのイベント リスナーを単一のルート ノード (通常はドキュメントまたはアプリケーションのルート コンテナー) にバインドします。ユーザーがページを操作してイベントをトリガーすると、そのイベントは DOM ツリーをルート ノードまでバブルアップし、そこで React がイベントをキャプチャし、合成イベントとしてラップします。

イベント委任の利点:

• パフォーマンスの最適化: バインドする必要があるイベント ハンドラーの数を減らし、メモリ使用量を削減します。

• 簡素化されたイベント管理: ルート ノードですべてのイベントを管理することで、React はイベントの伝播をより効率的に処理し、デフォルトの動作を防止し、その他のイベント関連の操作を実行できます。

イベントプーリング

合成イベントの背後にある重要なメカニズムはイベント プーリングです。イベント プーリングとは、React がイベントがトリガーされるたびに新しいイベント オブジェクトを作成するのではなく、イベント オブジェクトを再利用することを意味します。イベントが発生すると、React はイベント プールからイベント オブジェクトを取得して初期化し、イベント ハンドラーに渡します。イベント処理が完了すると、イベント オブジェクトはクリーンアップされ、次のイベントで再利用できるようにイベント プールに返されます。

イベントプーリングの利点:

• メモリ割り当ての削減: イベント オブジェクトを再利用することで、React は頻繁なメモリ割り当てとガベージ コレクション操作を回避し、特にマウスの動きやスクロールなどの高頻度イベントのパフォーマンスを大幅に向上させることができます。

合成イベントのライフサイクル

イベント プーリングのため、合成イベントのライフサイクルはネイティブ イベントのライフサイクルとは異なります。通常、イベント ハンドラー関数の実行が終了すると、合成イベント オブジェクトのプロパティは null にリセットされ、再利用のためにプールに返せるようになります。

注意事項:

非同期操作: 非同期操作内でイベント オブジェクトにアクセスする必要がある場合は、event.persist() メソッドを呼び出す必要があります。これにより、イベント オブジェクトがプールに返されなくなり、非同期操作中にリセットされなくなります。

API と合成イベントの使用法

React Synthetic Event API は、React で一般的に使用されるネイティブ ブラウザー イベントに似たインターフェイスのセットを提供します。以下は、頻繁に使用されるいくつかのメソッドとプロパティの詳細な紹介と、それらの使用シナリオを示す例です。

a. PreventDefault()

preventDefault() メソッドは、イベントのデフォルト動作を防止するために使用されます。デフォルトの動作とは、フォームが送信されたときにページを更新したり、リンクがクリックされたときに新しいページに移動したりするなど、イベントが発生したときにブラウザーが通常実行するアクションを指します。

例: デフォルトのフォーム送信動作の防止

function MyForm() {
  const handleSubmit = e => {
    e.preventDefault(); // Prevent the default form submission behavior
    console.log('Form submission prevented');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

この例では、preventDefault() が呼び出されない場合、送信ボタンをクリックするとフォームの送信がトリガーされ、ページが更新されます。 PreventDefault() を呼び出すと、デフォルトの動作が防止され、代わりにフォーム処理ロジックをカスタマイズできるようになります。

b. stopPropagation()
stopPropagation() メソッドは、イベントのさらなる伝播を停止するために使用されます。通常、イベントは、イベントがトリガーされたターゲット要素からその親要素まで伝播します (イベント バブリング)。 stopPropagation() を呼び出すことで、この伝播を防ぐことができます。

例: クリック イベントの伝播を停止する

function Parent() {
  const handleParentClick = () => {
    console.log('Parent clicked');
  };

  return (
    <div onClick={handleParentClick}>
      Parent Div
      <Child />
    </div>
  );
}

function Child() {
  const handleChildClick = e => {
    e.stopPropagation(); // Stop the event from bubbling up to the parent element
    console.log('Child clicked');
  };

  return <button onClick={handleChildClick}>Click Me</button>;
}

この例では、ボタンをクリックすると、子コンポーネントのクリック イベント ハンドラーがトリガーされます。デフォルトでは、イベントは親コンポーネントにバブルアップし、そのクリック ハンドラーもトリガーします。ただし、子コンポーネントで stopPropagation() を呼び出すことで、親へのイベントのバブリングが防止されます。

c. target
The target property refers to the actual DOM element that triggered the event. It is commonly used to access the element that initiated the event and to handle logic related to that element.

*Example: Accessing the element that triggered the event *

function MyComponent() {
  const handleClick = e => {
    console.log('Clicked element:', e.target);
  };

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

In this example, when either button is clicked, the e.target in the handleClick function will point to the button element that was clicked. The target property is used to identify which specific element was clicked.

d. currentTarget
The currentTarget property refers to the DOM element to which the event handler is bound. During event handling, regardless of which child element the event bubbles to, currentTarget always points to the element that the event handler is attached to.

Example: Distinguishing between target and currentTarget

function MyComponent() {
  const handleClick = e => {
    console.log('Clicked element:', e.target);
    console.log('Event handler bound to:', e.currentTarget);
  };

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

In this example, when any button is clicked, event.target will point to the button that was clicked, while event.currentTarget will always point to the parent div element where the event handler is bound.

e. persist()
The persist() method is used to retain the event object, preventing React from reusing it. This method is typically needed in asynchronous operations.

Example: Using the event object in an asynchronous operation

function MyComponent() {
  const handleClick = e => {
    e.persist(); // Retain the event object

    setTimeout(() => {
      console.log('Button clicked:', event.target);
    }, 1000);
  };

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

In this example, because the event object might be reused in asynchronous operations, persist() is called to retain the event object, ensuring that the event properties can be safely accessed in the setTimeout callback.

React Synthetic Event Types

React provides various types of synthetic events that cover common user interaction scenarios. Below are some commonly used synthetic event types along with examples:

a. Mouse Events

• onClick: Triggered when an element is clicked.

• onDoubleClick: Triggered when an element is double-clicked.

• onMouseDown: Triggered when a mouse button is pressed down on an element.

• onMouseUp: Triggered when a mouse button is released on an element.

• onMouseMove: Triggered when the mouse is moved over an element.

• onMouseEnter: Triggered when the mouse pointer enters the element's area; does not bubble.

• onMouseLeave: Triggered when the mouse pointer leaves the element's area; does not bubble.

Example: Using onClick and onMouseMove

function MouseTracker() {
  const handleMouseMove = e => {
    console.log(`Mouse position: (${e.clientX}, ${e.clientY})`);
  };

  return (
    <div onMouseMove={handleMouseMove} style={{ height: '200px', border: '1px solid black' }}>
      Move your mouse here
    </div>
  );
}

function MyApp() {
  return (
    <div>
      <button onClick={() => console.log('Button clicked!')}>Click Me</button>
      <MouseTracker />
    </div>
  );
}

In this example, the MouseTracker component logs the mouse position whenever it moves within the div area, while the button in the MyApp component logs a message when clicked.

b. Keyboard Events

• onKeyDown: Triggered when a key is pressed down on the keyboard.

• onKeyUp: Triggered when a key is released on the keyboard.

• onKeyPress: Triggered when a key is pressed and held down (deprecated; it is recommended to use onKeyDown instead).

Example: Handling the onKeyDown Event

function KeyHandler() {
  const handleKeyDown = e => {
    console.log('Key pressed:', e.key);
  };

  return <input type="text" onKeyDown={handleKeyDown} placeholder="Press any key" />;
}

In this example, when the user presses any key while focused on the input field, the handleKeyDown function logs the name of the pressed key.

c. Focus Events

• onFocus: Triggered when an element gains focus.

• onBlur: Triggered when an element loses focus.

Example: Handling onFocus and onBlur Events

function FocusExample() {
  return (
    <input
      onFocus={() => console.log('Input focused')}
      onBlur={() => console.log('Input blurred')}
      placeholder="Focus and blur me"
    />
  );
}

In this example, when the input field gains or loses focus, a corresponding message is logged to the console.

d. Form Events

• onChange: Triggered when the value of a form control changes.

• onSubmit: Triggered when a form is submitted.

• onInput: Triggered when the user inputs data (including actions like deleting or pasting).

Example: Handling onChange and onSubmit Events

function MyForm() {
  const [value, setValue] = React.useState('');

  const handleChange = e => {
    setValue(e.target.value);
  };

  const handleSubmit = e => {
    e.preventDefault();
    console.log('Form submitted with value:', value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={value} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, as the user types into the input field, the handleChange function updates the component's state. When the form is submitted, the handleSubmit function logs the current value of the input field.

Differences Between React Events and Regular HTML Events

a. Event Naming

• Native: All lowercase (e.g., onclick).

• React: CamelCase (e.g., onClick).

b. Event Handler Syntax

• Native events use strings to specify event handlers.

• React events use functions as event handlers.

c. Preventing Default Browser Behavior

• Native: can use 'return false' to prevent the browser's default behavior.

• React: Instead, you must explicitly call preventDefault() to achieve this.

d.イベントの実行順序
ネイティブ イベントが最初に実行され、次に合成イベントが続きます。合成イベントがバブルしてドキュメントにバインドされます。したがって、ネイティブ イベントと合成イベントを混合しないことをお勧めします。ネイティブ イベントが伝播を停止すると、合成イベントが実行できなくなる可能性があります。これは、合成イベントがドキュメントへのバブリングに依存して実行されるためです。

React が合成イベントを選択する理由

React が合成イベントを選択する理由は次のとおりです。

• ブラウザ間の一貫性: 合成イベントは、さまざまなブラウザ間でのイベント処理の違いを抽象化し、すべてのブラウザ間で一貫した動作を保証します。

• パフォーマンスの最適化: イベント委任とイベント プーリングにより、イベント処理のオーバーヘッドが大幅に削減され、アプリケーションのパフォーマンスが向上します。

• より良いイベント管理: 合成イベントを使用すると、React はイベントの伝播をより効果的に制御し、デフォルトの動作を防止し、React のバッチ更新メカニズムと密接に統合して、より効率的なイベント処理を行うことができます。

以上がReact: React のイベント システムを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。