React学习 -- 事件系统

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

合成事件的绑定方式

<button onClick={this.handleClick}>Test</button>

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

 <button onclick="handleClick()">Test</button>

区别有二：
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、事件绑定方式

在react中：

<button onClick={this.handleClick}>Test</button>

在原生DOM中：

<button onclick="alert(1);">Test</button>

或者：

el.onclick = e => { console.log(e); }

或者：

el.addEventListener('click', () => {}, false);
el.attachEvent('onclick', () => {});

4、事件对象

在React合成事件系统中，开发者不必担心兼容性问题，在事件对象处理函数中一定可以得到一个合成事件对象。