Virtual DOM
在内存中是以对象的形式存在的,如果想要在这些对象上添加事件,也很简单,因为react基于Virtual DOM
实现了一个SyntheticEvent
(合成事件)层,我们所定义的事件处理器都会接收一个SyntheticEvent
的实例,并且与原生浏览器事件拥有同样的接口,同样支持事件冒泡机制,这表示我们完全可以使用原生stopPropagation()
和preventDefault()
来中断它。
合成事件实现机制
在react
底层,主要对合成事件做了俩件事
1.事件委派
2.自动绑定
事件委派
在绑定事件的时候,它并不会把事件直接绑定到真实的节点上,而是把所有事件都绑定到结构的最外层,使用一个统一的事件监听器,这个监听器上维持了一个映射来保存所有组件内部事件监听和处理函数,当组件挂载或者卸载时,只是在这个事件监听器里添加或者删除一些事件对象,当事件触发时,首先被这个统一的事件监听器处理,然后在映射里找到真实的事件处理函数并调用,这样做简化了事件处理和回收机制,对性能也有很大的提升
自动绑定
在react
中,每个方法的上下文都会指向该组件的实例,即自动绑定this
到当前组件,但是es6
(class)和纯函数时,这种自动绑定就不存在了,所有需要我们手动绑定,有以下几种方法。
1.
bind()
方法
2.构造函数绑定
3.
::
语法糖绑定(es7)
4.箭头函数绑定
当然在react
中完全可以使用原生事件,在componentDidMount
中,等组件挂载好以后,可以使用addEventListener
绑定事件,但是注意一定要在组件卸载时componentWillUnmount
中手动卸载事件,否则可能导致内存泄漏