React 的合成事件是什么？和原生事件有什么区别？

详细解析#

事件委托到根容器#

document
  └─ #root（createRoot 的容器）  ← React 在这里为 click 注册捕获和冒泡监听
       └─ div (onClick)
            └─ button (onClick)   ← 实际点击的元素

点击 button 时，原生事件冒泡到 #root，React 的监听器被触发：

1. 根据 nativeEvent.target 找到 button 对应的 Fiber
2. 从这个 Fiber 沿 return 向上收集 onClick，得到 [button.onClick, div.onClick]
3. 创建合成事件对象，依次调用；某个处理函数调用了 e.stopPropagation() 就停止

捕获阶段同理，onClickCapture 在根容器的捕获监听器中按从外到内的顺序执行。事件委托本身的原理见 事件委托。

React 17 把委托目标从 document 改为根容器，原因是页面上有多个 React 应用（或新旧版本共存、微前端）时，大家都挂在 document 上会互相干扰：一个应用调用 stopPropagation，另一个应用照样收到事件。

合成事件和原生事件的差异#

一些具体差异：

• onChange：输入框的 onChange 在每次输入时触发，相当于原生的 input 事件，而不是失焦时才触发的原生 change
• onFocus / onBlur：React 17 起基于原生的 focusin / focusout，会冒泡
• onScroll：React 17 起不再冒泡，和浏览器一致
• onMouseEnter / onMouseLeave：没有冒泡，React 从离开的元素到进入的元素计算触发
• e.currentTarget 是当前处理函数所在的元素，和 e.nativeEvent.currentTarget（React 处理时一般是根容器）不一定相同

事件池的移除#

React 16 及以前会复用合成事件对象（事件池），处理函数执行完后对象的属性会被清空，在 setTimeout、Promise 中读取 e.target 会得到 null，需要先调用 e.persist()。React 17 移除了事件池，异步读取没有问题，e.persist() 保留但不再有作用。

代码示例：混用时的执行顺序#

function Demo() {
  const buttonRef = useRef(null)

  useEffect(() => {
    const button = buttonRef.current
    const onNative = () => console.log('原生 button 冒泡')
    const onDoc = () => console.log('原生 document 冒泡')
    button.addEventListener('click', onNative)
    document.addEventListener('click', onDoc)
    return () => {
      button.removeEventListener('click', onNative)
      document.removeEventListener('click', onDoc)
    }
  }, [])

  return (
    <div onClick={() => console.log('React div onClick')} onClickCapture={() => console.log('React div onClickCapture')}>
      <button ref={buttonRef} onClick={() => console.log('React button onClick')}>
        点击
      </button>
    </div>
  )
}

// 点击按钮的输出：
// React div onClickCapture   ← 根容器的捕获监听器
// 原生 button 冒泡            ← 事件到达目标元素
// React button onClick       ← 冒泡到根容器，React 依次调用
// React div onClick
// 原生 document 冒泡          ← 继续冒泡到 document

• 在 React 的 button onClick 中调用 e.stopPropagation()：React div onClick 和 document 上的监听器都不再执行，但"原生 button 冒泡"已经执行过了
• 在原生 button 监听器中调用 e.stopPropagation()：事件到不了根容器，React 的所有冒泡处理函数（button 和 div 的 onClick）都不执行

面试官可能追问#

易错点#

• 以为 React 事件绑定在元素本身上：实际委托在根容器，React 17 之前是 document
• 以为在 React 处理函数里 stopPropagation 能阻止元素自身的原生监听器，实际那些监听器已经执行过了
• 以为 React 的 onChange 等同于原生 change 事件