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() 方法用于阻止事件的默认行为。默认行为是指浏览器在事件发生时通常执行的操作，例如提交表单时刷新页面或单击链接时导航到新页面。

示例：阻止默认的表单提交行为

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中文网其他相关文章！