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 事件的冒泡阶段,事件处理函数会按照组件层级从内到外的顺序执行。

示例

javascript 复制代码
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 事件触发,但两者都可以在组件中处理,并按照事件冒泡的顺序执行相应的事件处理函数。

相关推荐
mCell4 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip4 小时前
Node.js 子进程:child_process
前端·javascript
excel7 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel8 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼9 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping9 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙10 小时前
[译] Composition in CSS
前端·css
白水清风10 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix11 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780011 小时前
new、原型和原型链浅析
前端·javascript