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

相关推荐
因吹斯汀21 分钟前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程
再学一点就睡26 分钟前
NATAPP 内网穿透指南:让本地项目轻松 “走出去”
前端
拜无忧26 分钟前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
稻草人不怕疼27 分钟前
记一次从“按钮点不动”到“窗口派发缺失”的排查过程
前端
irving同学462381 小时前
TypeORM 列装饰器完整总结
前端·后端·nestjs
冰冷的bin1 小时前
【React Native】点赞特效动画组件FlowLikeView
react native·react.js·typescript
彭于晏爱编程1 小时前
你真的了解 Map、Set 嘛
前端
崔璨1 小时前
详解Vue3的响应式系统
前端·vue.js
摸鱼的鱼lv1 小时前
🔥 Vue.js组件通信全攻略:从父子传值到全局状态管理,一篇搞定所有场景!🚀
前端·vue.js
IT_陈寒1 小时前
Java性能优化:10个让你的Spring Boot应用提速300%的隐藏技巧
前端·人工智能·后端