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上挂载的事件