深入React技术栈：事件系统

事件系统

之前了解过虚拟DOM在内存中是以对象的形式存在，那么给对象添加事件就会比较方便。React基于虚拟DOM实现了一种合成事件，我们定义的所有事件处理器都会接收到一个事件对象的实例。

所有的事件都是绑定到最外层，如果需要访问原生的事件对象，可以使用nativeEvent属性。

• 合成事件的绑定方式

button

React并不会像DOM0级事件那样将事件处理器直接绑定到HTML原生上，这里是一个函数指针。

• 合成事件的实现机制

在React中，对合成事件做了两件事情：事件委托和自动绑定。

1.事件委托
在React中，并不会把事件函数绑定到真实的节点上，而是把所有的事件绑定到结构的最外层，使用一个统一的事件监听器。该事件监听器维持了一个映射来保存所有组件内部的事件监听。当组件的挂载和卸载的操作，只是在该统一的事件监听器中删除一写对象。当事件发生时，首先被该事件监听器处理，然后在该映射中找到真正的事件处理函数并调用。

2.自动绑定
React中每个方法的上下文都会指向该组件的实例，即自动为this绑定到当前的组件。而且React还会对这种绑定进行缓存。如果使用es6的方式创建组件，那么这种自动绑定不会存在，这样我们就需要手动进行绑定。

import {Component} from 'react'

class App extends Component {
    constructor(props) {
        super(props)
    }
    
    handle() {
        
    }
    
    render() {
        return (
            
        )
    }
}

我们还可以在构造器内完成this的绑定，这样就不用每次调用事件监听器的时候都要进行绑定。

import {Component} from 'react'

class App extends Component {
    constructor(props) {
        super(props)

        this.handle = this.handle.bind(this)  //构造器中完成
    }

    handle() {

    }

    render() {
        return (
            
        )
    }
}

我们还可以通过箭头函数，它会自动绑定此函数作用域的this，因此我们不需要对他使用bind方法。

• 在React中使用原生事件
  在React的生命周期中，在componentDidMount方法中完成组件的加载和渲染，存在真实的DOM，此时我们可以完成事件的绑定。

注意，在React中使用DOM原生事件的时候，我们一定要在组件卸载的时候手动一处，否则会出现内存泄漏的问题，通过合成事件系统则不需要，React内部会帮我们进行处理。

• 合成事件和原生事件混用

之前做了一个项目，实现一个下拉框，点击下拉框的时候下拉框显示，但是点击屏幕其他部分的时候下拉框收起，如果我们给document绑定一个点击事件，点击的时候下拉框收起。但是发现一个问题，如果这样实现的话，点击下拉框的时候，下拉框依然会是收起状态，不会显示。

这是因为，React合成事件系统的委托机制，在合成事件中仅仅是在最外层的容器进行了绑定，并且依赖事件的冒泡机制完成了委托。所以我在点击出现下拉框中的使用e.preventDefault()并没有什么作用，因为在合成事件中该事件并不是绑定到了当前这个dom上，当前dom的事件只是对其的一个引用。

所以，我们要注意：

1. 不要将合成事件和原生事件混用。
2. 可以通过e.target进行判断。例如当前的事件元素是下拉框按钮的话则return false。