react的事件机制

34次阅读

共计 1685 个字符,预计需要花费 5 分钟才能阅读完成。

好久没写博客了,前段时间太忙以至于平时的积累都记录在内网的 wiki 里,趁着这几天有空,将这段时间所积累的干货慢慢的分享出来,如果内容有不正确的地方,欢迎纠正。
本博客大概介绍一下 react 的事件机制,并给出整体的设计图,但不涉及 react 底层的源码结构分析。
现象:
demo1: <div onclick=”handle()”>ni</div>

demo2: render() { return <div onClick={this.handle}>ni</div> }
虽然两个例子都是通过标签内嵌的方式将 click 事件进行绑定,但其中的原理是不一样的,demo1 是采用原生的事件处理,demo2 是采用 react 的合成事件机制处理;
合成事件:
对于 jsx 来说,是采用了类似于 DOM0 的事件绑定的方式进行处理,它会收到一个合成事件对象(synthicevent),该对象集成了原生事件对象的所有特性,而且还是事件冒泡机制,并且能支持 stopPropagation 和 preventDefault 两种方法;
原生事件与合成事件的区别:

原生的事件绑定是采用小写 onclick,而 react 则是采用大写 onClick;
原生事件绑定的是一个 js 的字符串,而 react 采用的是一个函数的指针;

合成事件的实现机制:
事件机制原型图:

该图大概的表示了 react 的事件机制的整体结构图,接下来具体说说它里面的原理。
真正的监听者:
对于 react 来说,虽然事件是绑定在 v -dom 中,但其实真正的监听者只有一个,就是结构中最外层的 document 对象进行监听,主要采用了事件冒泡的方式,将 v -dom 中触发的事件包装成一个合成事件,然后通过事件冒泡的方式,最终冒泡到最外层的 document 监听和执行(就是事件委托);

事件注册:
事件注册是在组件生成的时候,将 v -dom 中所有的事件都对应的原生事件都注册在 document 的监听器中,例如 onClick 对应的原生事件是 onclick,如果 v -dom 中有绑定了 onClick,那么就会将对应的 onclick 事件注册在 document 中,整个注册过程可以三个阶段:
1)将 v -dom 中所涉及到的绑定事件所对应的原生事件都在 enqueuePutListener 中绑定到 document 身上;
2)将 v -dom 中所有事件的事件处理函数都存放在 listenerBank 中,存放的方式是以 registrtionname 和 key 作为索引存放,其中 registrtionname 是事件名,key 是 instance 的 id 值,所以形式是:
listenerBank[registrtionname][key] = listener
这样的好处是将可能要触发的事件分门别类,以及将对应的 listener 也分门别类存放;为了就是在事件触发的时候,能从 listenerBank 中取出同类型的 listener 存放在 dispatchListener 中;
3)最后将 dispatchEvent 作为 callback 函数,放在 addEventListener 和 removeEventListener 里面,等待事件的触发;
合成事件:
当事件触发的时候,不会直接将原生的事件发送到最外层的 document 中,而是经过处理,将处理后的事件发送到 document 中;事件合成的经过:获取原生事件,并通过原生事件的类型和所在组件的 id 值,在 listenerBank 中取出对应的 listener 函数,并存放在_dispatchListener 队列中,然后将该实例存放到_dispatchInstance 队列中,这样一来,可以将同类型的事件函数都按照顺序存放在_dispatchListener 中,最后一同处理;
事件发布:
当事件触发时,会先原生事件变成合成事件,然后传递到 document 中,然后 document 会通过 dispatchEvent 回调函数依次执行 dispatchListener 中同类型的事件监听函数。
整个设计图:

以上是对 react 的合成事件一个大概的介绍,里面还有很多细节和原理没说到,有兴趣的同学可以进一步研究一下源码的细节。

正文完
 0