React合成事件是如何实现的
🥏

React合成事件是如何实现的

🤨

 
原答案:
React 中的合成事件是指 React 为了兼容性的考虑,对 DOM 的事件都进行的封装,写在 jsx 中的onClickonChange 等都是合成事件。
原生事件就是 dom 上的 addEventListener
如何实现不是很清楚。。。

 
参考:

JSX 中的事件

  • 该事件是合成事件(SyntheticEvent)并不是原生的 Event,可模拟出来 DOM 的所有能力
    • event.__proto_.constructor === SyntheticEvent
  • event.nativeEvent 是原生事件对象
  • 所有的事件,都被挂载在 document 上 (React 17之后 挂载在 root 组件上)
    • event.nativeEvent.target // 指向当前元素
      event.natvieEvent.currentTarget // 指向document (root)

图示

notion image

合成事件的作用

  1. 更好的跨平台和兼容性
  1. 挂载到 document,减少内存消耗,避免频繁解绑
  1. 方便事件的统一管理(如事物机制)
 

React 17 绑定到 root 组件上

notion image
有利于微前端,当有多个 React 版本并行时,可防止冲突