React合成事件

在学习React事件绑定时，发现React绑定时间有其自身的一套机制，那就是合成事件。
先看源码：

<div className="testDom" onClick={this.testDomClick()}><div>

React合成事件和原生事件区别

React合成事件一套机制：React并不是将click事件直接绑定在dom上面，而是采用事件冒泡的形式冒泡到document上面，然后React将事件封装给正式的函数处理运行和处理。

React合成事件理解

如果DOM上绑定了过多的事件处理函数，整个页面响应以及内存占用可能都会受到影响。React为了避免这类DOM事件滥用，同时屏蔽底层不同浏览器之间的事件系统差异，实现了一个中间层——SyntheticEvent。

1. 当用户在为onClick添加函数时，React并没有将Click时间绑定在DOM上面。
2. 而是在document处监听所有支持的事件，当事件发生并冒泡至document处时，React将事件内容封装交给中间层SyntheticEvent（负责所有事件合成）
3. 所以当事件触发的时候，对使用统一的分发函数dispatchEvent将指定函数执行。

React真正处理合成事件过程，可以具体可以参考相关的源码解析：React源码解读系列 – 事件机制

以下用代码来展示两者的区别：

class Test extends Component {
    constructor() {
        super(arguments);
        this.onReactClick.bind(this);
    }
    componentDidMount() {
        const parentDom = ReactDOM.findDOMNode(this);
        const childrenDom = parentDom.queneSelector(".button");
        childrenDom .addEventListen('click', this.onDomClick, false);
    }
    onDomClick() {  // 事件委托
        console.log('Javascript Dom click');
    }
    onReactClick() {  // react合成事件
        console.log('React click');
    }
    render() {
        <div>
            <button className="button" onClick={this.onReactClick()}>点击</button>
        </div>
    }
}

结果：

JavaScript Dom click
React click

可以看待原生绑定快于合成事件绑定。

注意点：

1. 不要将原生事件（addEventListener）和React合成事件一起混合使用，这两个机制是不一样的。

参考:React合成事件和DOM原生事件混用须知

 

合成事件和原生事件的执行顺序是什么？可以混用吗？

1.React的所有事件都通过 document进行统一分发。当真实 Dom触发事件后冒泡到 document后才会对 React事件进行处理。

2.所以原生的事件会先执行，然后执行 React合成事件，最后执行真正在 document上挂载的事件

3.React事件和原生事件最好不要混用。原生事件中如果执行了 stopPropagation方法，则会导致其他 React事件失效。因为所有元素的事件将无法冒泡到 document上，导致所有的 React事件都将无法被触发。。