媒介

这是 react 事宜机制的第一篇，主要内容有：表象明白，考证，意义和思索。

表象明白

先回想下 对react 事宜机制基础明白，react 本身完成了一套本身的事宜机制，包含事宜注册、事宜的合成、事宜冒泡、事宜派发等，虽然和原生的是两回事，但也是基于浏览器的事宜机制下完成的。

我们都晓得react 的一切事宜并没有绑定到详细的 dom节点上而是绑定在了document 上，然后由一致的事宜处置惩罚顺序来处置惩罚，同时也是基于浏览器的事宜机制（冒泡），一切节点的事宜都会在 document 上触发。

上面是基于对 react 事宜的一个基础的认知，那这个认知是不是准确呢？我们能够经由过程简朴的要领举行考证。

考证

考证内容：

1. 一切事宜均注册到了元素的最顶层-document 上
2. 节点的事宜由一致的进口处置惩罚

为了轻易，直接经由过程 cli 建立一个项目。

代码以下：

componentDidMount(){ 

        document.getElementById('btn-reactandnative').addEventListener('click', (e) => {
            console.log('原生+react 事宜:   原生事宜实行');
        });

    }

    handleNativeAndReact = (e) => {
        console.log('原生+react 事宜:  当前实行react事宜');
    }

    handleClick=(e)=>{
        console.log('button click');
    }
 render(){
        return <div className="pageIndex"><p>react event!!!</p
                <button id="btn-confirm" onClick={this.handleClick}>react 事宜</button>

                <button id="btn-reactandnative" onClick={this.handleNativeAndReact}>原生 + react 事宜</button>
        </div>
    }

代码中给两个 button绑定了合成事宜，零丁给btn#btn-reactandnative绑定了一个原生的事宜。

然后看下chrome 的控制台，检察元素上的注册事宜。

经由简朴的考证，能够看到一切的事宜依据差别的事宜范例都绑定在了 document 上。触发函数一致是 dispatchEvent。

试想一下

假如一个节点上同时绑定了合成和原生事宜，那末制止冒泡后实行关联是如何的呢？

实在读到这里答案已经有了。我们如今基于现在的学问去剖析下这个关联。

由于合成事宜的触发是基于浏览器的事宜机制来完成的，经由过程冒泡机制冒泡到最顶层元素，然后再由dispatchEvent一致去处置惩罚。

下面是我得出的结论：

原生事宜阻挠冒泡肯定会阻挠合成事宜的触发。

合成事宜的阻挠冒泡不会影响原生事宜。

为何呢？先回想下浏览器事宜机制

浏览器事宜的实行须要经由三个阶段，捕捉阶段-目的元素阶段-冒泡阶段。

节点上的原生事宜的实行是在目的阶段，但是合成事宜的实行是在冒泡阶段，所以原生事宜会先合成事宜实行，然后再往父节点冒泡。

既然原生都阻挠冒泡了，那合成还实行个啥嘞。

好，轮到合成的被阻挠冒泡了，那原生会实行吗？

固然会了。

由于原生的事宜先于合成的实行，所以合成事宜内阻挠的只是合成的事宜冒泡。（代码我就不贴了）

所以得出结论：

原生事宜（阻挠冒泡）会阻挠合成事宜的实行

合成事宜（阻挠冒泡）不会阻挠原生事宜的实行

二者最好不要夹杂运用，防止涌现一些新鲜的题目

意义

react 本身做这么多的意义是什么？

我的明白的是

1.削减内存斲丧，提拔机能，不须要注册那末多的事宜了，一种事宜范例只在 document 上注册一次

2.一致范例，处理 ie 事宜兼容题目，简化事宜逻辑

3.对开发者友爱

思索

既然 react 帮我们做了这么多事儿，那他的背地的机制是什么样的呢？

事宜怎样注册的，事宜怎样触发的，冒泡机制如何完成的呢？

请看后续文章…..

更多精彩内容迎接关注我的民众号-前端张大胖