跳到主要内容

React 的事件系统是其核心设计之一，通过合成事件（ SyntheticEvent ） 和 事件委托实现跨浏览器一致性和性能优化。

一、核心机制​

1. 合成事件（ SyntheticEvent ）​

  • 本质 ： React 对原生浏览器事件的跨浏览器封装（统一接口、抹平差异）
  • 关键特性 ：
    • 驼峰命名： onClick 而非 onclick
    • 事件处理函数传入 函数引用 （非字符串）
    • 提供标准化方法： preventDefault() ， stopPropagation()
    • 包含 nativeEvent 属性访问原生事件对象
    • 属性与原生事件高度一致（ target 、 currentTarget 、 type 等 ）
function Button() {
  const handleClick = e => {
    e.preventDefault(); // 阻止默认行为（如链接跳转）
    console.log(e.type); // 'click'
    console.log(e.currentTarget === e.target); // true
  };

  return <button onClick={handleClick}>点</button>;
}

2. 事件委托（核心优化）​

  • 原理 ：将事件监听器统一绑定到根节点，通过事件冒泡 + 路径匹配分发到目标组件
  • 版本演进 ：在 React ⩽ 16 版本委托挂载点为 document ，导致在多 React 版本共存时易冲突；卸载组件后事件残留风险。而在 React 17+ 版本委托 Root 节点：
    • 隔离不同 React 树
    • 卸载时制定清理事件
    • 与 jQuery 等库的兼容性提升
    • 若在 document 上添加原生事件监听器，不会被 React 事件系统拦截，顺序更可控

3. 事件池（ Event Pooling ） --- 仅 React ⩽ 16​

  • 机制 ：合成事件对象被回收复用，事件处理函数执行后属性置空（ null ）
  • 问题 ：异步访问事件属性会失败 
    // React 16 问题示例
    function BadExample() {
      const handleClick = e => {
        // ❌ 输出 null
        setTimeout(() => console.log(e.target.value), 100);
      };
      return <input onClick={handleClick} />;
    }
  • 解决方案 ：
    • e.persist() ：保留事件对象（ React 17+ 中此方法为空操作，保留仅为兼容 ）
    • 推荐 ：提前解构所需的属性（最佳实践）
    const handleClick = e => {
      const { value } = e.target; // ✅ 安全
      setTimeout(() => console.log(value), 10000);
    };
  • React 17+ ： 彻底移除事件池 ，事件对象不再复用，无需 persist()

二、关键行为与注意事项​

1. 阻止默认行为 & 冒泡​

行为正确做法错误做法
阻止默认事件e.preventDefault()return false ❌
阻止 React 冒泡e.stopPropagation()
阻止原生事件冒泡e.nativeEvent.stopImmediatePropagation()
提示

stopPropagation() 仅阻止 React 合成事件系统内的冒泡，不影响原生事件向 document 传播（因委托在根节点）。

2. 冒泡与捕获阶段​

  • 默认 ：事件在**冒泡阶段触发
  • 捕获阶段 ：使用 Capture 后缀（如 onClickCapture ）
<div onClick={() => console.log('捕获阶段')}>
  <button onClick={() => console.log('冒泡阶段')}>按钮一枚</button>
</div>
// 输出顺序： 捕获阶段 ➞ 冒泡阶段

3. 与原生事件的交互​

  • 触发顺序（ React 17+ ） ：
      1. 原生事件（在元素上直接绑定）
      1. React 合成事件（委托在 Root 节点）
      1. document 上的原生事件监听器
  • 建议 ：避免混用；需处理非标准事件时，用 ref + addEventListener
const ref = useRef();

useEffect(() => {
  const el = ref.current;
  if (!el) return;
  el.addEventListener('custom-event', handler);
  return () => el.removeEventListener('custom-event', handler);
}, []);

4. 特殊事件处理​

  • 不冒泡事件 （如 onFocus、 onBlur ）： React 通过捕获阶段模拟冒泡行为，是其在组件树中“可冒泡”
  • 媒体事件/ Resize 等 ：部分事件因浏览器限制， React 会直接绑定在元素（非委托），但开发者无需关心底层运行逻辑

三、 React 17+ 重大变更总结​

变更点影响
委托挂载点 ➞ root多 React 版本共存安全；卸载无残留；与非 React 代码协作更友好
移除事件池异步访问事件对象安全；简化开发； persist() 保留但无实际作用
事件处理函数 this不再自动绑定（但函数组件 + Hooks 已成主流，影响极小）
改进第三方兼容库减少与 jQuery 等库的事件冲入

四、最佳实践​

  • 函数组件 + Hooks ：天然避免 this 绑定问题
  • 提前解构事件属性 ：替代 persist() （兼容所有版本）
  • 用 useCallback 优化事件处理器 ：避免子组件不必要的重渲染
  • 避免在事件中长时间阻塞 ：影响 UI 响应
  • 自定义事件/第三方库事件 ：用 ref + 原生 addEventListener
  • 升级 React 17+ ：享受更安全的事件隔离与现代化行为

五、为什么 React 要设计合成事件​

    1. 跨浏览器一致性 ：屏蔽 IE 与其他浏览器的事件差异
    1. 性能优化 ：事件委托大幅减少监听器的数量
    1. 可控性 ：统一管理事件生命周期（如自动清理）
    1. 扩展能力 ：支持自定义事件系统（如 React Native ）