【React】事件机制

事件机制

react 基于浏览器的事件机制自身实现了一套事件机制,称为合成事件。比如:onclick -> onClick

获取原生事件:e.nativeEvent

onClick 并不会将事件代理函数绑定到真实的 DOM节点上,而是将所有的事件绑定到结构的最外层(document,减少内存开销),使用一个统一的事件去监听。事件监听器维持了一个映射保存所有组件内部的事件监听和处理函数,当组件挂载或者卸载时,在事件监听器上插入或者删除一些对象。(简化了事件处理和回收机制,提升效率)

事件发生 -> 事件处理器 -> 映射真实事件处理函数并调用

原生和合成事件执行顺序:

js 复制代码
import React from 'react';
class App extends React.Component{
    constructor(props) {
        super(props);
        this.parentRef = React.createRef();
        this.childRef = React.createRef();
    }
    componentDidMount() {
        console.log("React componentDidMount ");
        this.parentRef.current?.addEventListener("click", () => {
            console.log(" DOM ");
        });
        this.childRef.current?.addEventListener("click", () => {
            console.log(" DOM ");
        });
        document.addEventListener("click", (e) => {
            console.log(" document DOM ");
        });
    }
    parentClickFun = () => {
        console.log("React ");
    };
    childClickFun = () => {
        console.log("React ");
    };
    render() {
        return (
            <div ref={this.parentRef} onClick={this.parentClickFun}>
                <div ref={this.childRef} onClick={this.childClickFun}>

                </div>
            </div>
        );
    }
}
export default App;

输出结果为:

所以:

  • react 所有事件都挂载到 document 对象上
  • 真实 DOM 元素触发事件,冒泡到 document 对象上,再处理 react 事件
  • 最后真正执行 document 上挂载的事件

阻止不同阶段的事件冒泡:

  • 阻止合成事件间的冒泡,用 e.stopPropagation()
  • 阻止合成事件与最外层document上的事件间的冒泡,用 e.nativeEvent.stoplmmediatePropagation()
  • 阻止合成事件与除最外层document.上的原生事件上的冒泡,通过判断e.target3来避免

事件绑定(this)

js 复制代码
class ShowAlert extends React.Component {
    showAlert() {
        console.log(this);  // undefined
    }
    render() {
        return <button onClick={this.showAlert}>show</button>;
    }
}

为了解决没有绑定 this 问题,有四种方法。

js 复制代码
// render 方法使用 this:
class App extends React.Component {
    handleClick() {
        console.log('this > ', this);
    }
    render() { // 每次 render 的时候 都会重新进行 bind 的绑定 影响性能
        return (
            <div onClick={this.handleClick.bind(this)}>test</div>
        )
    }
}
// render 中使用箭头函数
class App extends React.Component {
    handleClick() {
        console.log('this > ', this);
    }
    render() {
        return (
            <div onClick={e => this.handleClick(e)}>test</div>
        )
    }
}
// constructor 中使用 bind
class App extends React.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        console.log('this > ', this);
    }
    render() {
        return (
            <div onClick={this.handleClick}>test</div>
        )
    }
}
// 函数定义阶段使用箭头函数
class App extends React.Component {
    constructor(props) {
        super(props);
    }
    handleClick = () => {
        console.log('this > ', this);
    }
    render() {
        return (
            <div onClick={this.handleClick}>test</div>
        )
    }
}
相关推荐
旧味清欢|8 分钟前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6
热爱编程的小曾25 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin37 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员