React学习 -- 事件系统

╰+哭是因爲堅強的太久メ 2022-06-14 10:24 188阅读 0赞

React中virtualDOM是以对象的形式存在的，所以想要在这些对象上绑定事件，就会非常简单。React基于VirtualDOM实现了一个合成事件层，我们所定义的事件处理器会接收到一个合成事件对象的实例。

## 合成事件的绑定方式 ##

这种写法和原生的HTML事件监听器属性非常相似。但是，仔细观察，就会发现还是有所区别的，下面这个是原生的HTML事件绑定方式：

区别有二：  
1、onClick & onclick  
2、HTML的属性值只能是JS代码字符串，但是在JSX中，props可以是任何类型，比如一个函数的指针：this.handleClick

而且，React并不会像DOM0那样，将事件处理器直接绑定到HTML元素之上。仅仅是借鉴了写法。

## 合成事件的实现机制 ##

在React底层，主要对合成事件做了两件事：事件委派和自动绑定。

**事件委派**

React不会将事件处理函数直接绑定到真实的节点上，而是把所有的事件绑定到结构的最外层，使用一个统一的事件监听器。这个监听器维持了一个映射，保存所有组件内部的事件监听和处理函数。当事件发生时，首先被这个统一的事件监听器处理，然后在映射里找到真正的事件处理函数并调用。

**自动绑定**

在React组件中，每个方法的上下文都会指向该组件的实例，即自动绑定this为当前组件。但是，如果开发者使用了ES6 classes或者纯函数，这种绑定就需要手动实现了。

在类定义的组件中绑定this的方法：

方法1:

import React, { Component } from 'react';
    
    class App extends Component {  
        handleClick(e, arg) {
            console.log(e, arg); 
        }
        render() {
            return <button onClick={
       this.handleClick.bind(this, 'test')}>Test</button>;
        } 
    }

方法2:

import React, { Component } from 'react';
    class App extends Component {  
        constructor(props) {
            super(props);
            this.handleClick = this.handleClick.bind(this); 
        }
        handleClick(e) { 
            console.log(e);
        }
        render() {
            return <button onClick={
       this.handleClick}>Test</button>;
        } 
    }

方法3:

import React, { Component } from 'react';
    class App extends Component {  
        const handleClick = (e) => {
           console.log(e);
         };
        render() {
            return <button onClick={this.handleClick}>Test</button>;
        } 
    }

## 在React中使用原生事件 ##

React提供了很好用的合成事件系统，但是这并不意味着不能在React架构下不能使用原生的事件。我们可以在方法componentDidMount中完成原生事件的绑定。

componentDidMount() {
        this.refs.button.addEventListener('click', e => { 
            this.handleClick(e);
        }); 
    }

## 合成事件与原生事件混用 ##

请开发者尽量避免在React中混用合成事件和原生DOM事件。

阻止React事件冒泡的行为只能用于React合成事件系统中，且没办法阻止原生事件的冒泡。反之，在原生事件中阻止冒泡行为，却可以阻止React合成事件的传播。实际上，React合成事件系统只是DOM事件系统的一个子集。

## 对比React合成事件与JS原生事件 ##

**1、事件传播与阻止事件传播**

原生DOM事件分为三个阶段：捕获、处理、冒泡。React仅仅支持冒泡机制。在React合成事件中，使用e.preventDefault()即可阻止事件冒泡，不必考虑兼容性。

**2、事件类型**

React合成事件是JS原生事件的一个子集

**3、事件绑定方式**