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

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

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

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

React合成事件一套机制：React并不是将click事件直接绑定在dom上面，而是采用事件冒泡的形式冒泡到document上面，然后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>
    }
}

结果：

Dom click
React click

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

event.stopPropagation
对于event.stopPropagation(),在合成事件，会禁止冒泡阶段，也就是说，无法让其冒泡到document中,但是对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);
    }
    onParentDomDomClick() { // 事件委托
        console.log('ParentDom click');
    }
    onChildrenDomClick(event) { // 事件委托
        event.stopPropagation();
        console.log('ChildrenDom click');
    }
    onReactClick() {  // react合成事件
        console.log('React click');
    }
    render() {
        <div>
            <button className="button" onClick={this.onReactClick()}>点击</button>
        </div>
    }
}

结果：

ParentDom click
React click

总结：React合成事件和原生事件区别还是较大的，主要在于合成事件在于事件冒泡，而原生事件在于实际绑定。

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