React合成事件基础知识
前言(什么是事件?)
事件是在编程时系统内发生的动作或者发生的事情,而开发者可以某种方式对事件做出回应,而这里有几个先决条件
- 事件对象
- 给事件对象注册事件,当事件被触发后需要做什么
- 事件触发
React并不是将click事件绑定到了div的真实DOM上,而是在document处监听了所有的事件,当事件发生并且冒泡到document处的时候,React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗,还能在组件挂在销毁时统一订阅和移除事开
除此之外,冒泡到document上的事件也不是原生的浏览器事件,而是由react自己实现的合成事件 (SyntheticEvent)。因此如果不想要是事件冒泡的话应该调用event.preventDefault0方法,而不是调用event.stopProppagation0方法
JSX上写的事件并没有绑定在对应的真实DOM 上,而是通过事件代理的方式,将所有的事件都统一绑定在了
document上。这样的方式不仅减少了内存消耗,还能在组件挂载销毁时统一订阅和移除事件。 另外冒泡到
document上的事件也不是原生浏览器事件,而是 React
自己实现的合成事件(SyntheticEvent)。因此我们如果不想要事件冒泡的话,调用 event,stopPropagation
是无效的,而应该调用 event,preventDefault
1、什么是合成事件
不是浏览器本身触发的事件,自己创建和触发的事件。
2、在React中事件的写法和原生事件写法的区别?
- React 事件的命名采用小驼峰式(camelCase),而不是纯小写。
- 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。
// HTML中的写法
<button onclick="handleClick()">
xxxx
</button>
// React中的写法
<button onClick={handleClick}>
xxxx
</button>
3、为什么会有合成事件?
- 对事件进行归类,可以在事件产生的任务上包含不同的优先级
- 提供合成事件对象,抹平浏览器的兼容性差异
4、React合成事件实现原理?
时机:在fiber节点进入render阶段的complete阶段时,名为onClick的props会被识别为事件进行处理。
function setInitialDOMProperties(
tag: string,
domElement: Element,
rootContainerElement: Element | Document,
nextProps: Object,
isCustomComponentTag: boolean,
): void {
for (const propKey in nextProps) {
if (!nextProps.hasOwnProperty(propKey)) {
...
} else if (registrationNameDependencies.hasOwnProperty(propKey)) {
// 如果propKey属于事件类型,则进行事件绑定
ensureListeningTo(rootContainerElement, propKey, domElement);
}
}
}
}
// registrationNameDependencies为合成事件名和真实事件的映射,格式如下:
{
onChange: ['change', 'click', 'focusin', 'focusout', 'input', 'keydown', 'keyup', 'selectionchange']
onChangeCapture: ['change', 'click', 'focusin', 'focusout', 'input', 'keydown', 'keyup', 'selectionchange']
onClick: ['click']
}
调用ensureListeningTo进行事件绑定
然后调用DOMPluginEventSystem.js中的addTrappedEventListener进行事件注册,而监听器listener是React通过createEventListenerWrapperWithPriority创建出优先级不同的时间监听包装器。
总的来说,会有三种事件监听包装器:
- dispatchDiscreteEvent: 处理离散事件
- dispatchUserBlockingUpdate:处理用户阻塞事件
- dispatchEvent:处理连续事件
5、React事件和原生事件的执行顺序
- react的所有事件都挂载在document中
- 当真实dom触发后冒泡到document后才会对react事件进行处理
- 所以原生的事件会先执行
- 然后执行react合成事件
- 最后执行真正在document上挂载的事件