【React】事件机制

事件机制

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

获取原生事件：e.nativeEvent

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

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

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

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）

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

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

// 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>
        )
    }
}