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

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码3 小时前
1.
react.js·node.js·angular.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app