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

相关推荐
DanB244 分钟前
html复习
javascript·microsoft·html
汉得数字平台9 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹16 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法