React事件和原生事件的执行顺序

在 React 中，事件处理分为两种类型：React 合成事件（Synthetic Event）和原生 DOM 事件（Native DOM Event）。它们的执行顺序略有不同。

React 合成事件

React 合成事件的执行顺序：

• React 合成事件捕获阶段（Capture Phase）：React 合成事件不支持捕获阶段，因此事件直接进入冒泡阶段。

• React 合成事件冒泡阶段（Bubble Phase）：React 合成事件会在组件树中从目标元素的最内层向上冒泡到最外层的顶级组件。

• React 合成事件处理函数执行：在 React 合成事件的冒泡阶段，事件处理函数会按照组件层级从内到外的顺序执行。

原生 DOM 事件

原生 DOM 事件的执行顺序：

• 原生 DOM 事件捕获阶段（Capture Phase）：原生 DOM 事件会在目标元素的最外层顶级组件上触发捕获阶段的事件处理函数。

• 原生 DOM 事件冒泡阶段（Bubble Phase）：原生 DOM 事件会在组件树中从目标元素的最内层向上冒泡到最外层的顶级组件。

• 原生 DOM 事件处理函数执行：在原生 DOM 事件的冒泡阶段，事件处理函数会按照组件层级从内到外的顺序执行。

示例

import React from 'react';

class MyComponent extends React.Component {
  handleClick = () => {
    console.log('React synthetic event');
  };

  handleNativeClick = () => {
    console.log('Native DOM event');
  };

  componentDidMount() {
    // 在 componentDidMount 中添加原生 DOM 事件监听器
    document.addEventListener('click', this.handleNativeClick);
  }

  componentWillUnmount() {
    // 在 componentWillUnmount 中移除原生 DOM 事件监听器
    document.removeEventListener('click', this.handleNativeClick);
  }

  render() {
    return (
      <div onClick={this.handleClick}>
        Click me!
      </div>
    );
  }
}

export default MyComponent;

  在上面的代码中，我们有一个 MyComponent 组件，它包含一个 < div > 元素，并分别绑定了 React 合成事件 onClick 和原生 DOM 事件 addEventListener。

  当我们在 < div > 元素上点击时，首先会触发 React 合成事件 handleClick，并在控制台打印 “React synthetic event”。然后，由于我们在 componentDidMount 生命周期中添加了原生 DOM 事件监听器，接着会触发原生 DOM 事件 handleNativeClick，并在控制台打印 “Native DOM event”。
  React 合成事件会先于原生 DOM 事件触发，但两者都可以在组件中处理，并按照事件冒泡的顺序执行相应的事件处理函数。