当前位置：首页 > React

实现react事件系统

2026-01-27 03:26:47React

React 事件系统实现原理

React 的事件系统是合成事件（SyntheticEvent）系统，它是对原生 DOM 事件的跨浏览器包装器。React 通过事件委托机制将所有事件绑定到 document 或 root 节点上，而非直接绑定到 DOM 元素。

合成事件特点

React 事件使用驼峰命名法而非全小写事件处理器接收的是合成事件实例而非原生事件事件在冒泡阶段自动绑定

实现步骤

事件注册 React 在组件挂载阶段解析组件中的事件属性将所有事件类型和对应的回调函数注册到内部事件池

实现react事件系统

事件绑定 React 仅在 document 或 root 节点上绑定少量原生事件监听器根据事件类型决定使用捕获还是冒泡阶段

事件触发 当原生事件触发时，React 通过事件委托获取目标节点从内部映射中找到对应的组件和事件处理函数

实现react事件系统

事件池机制 React 使用对象池管理合成事件实例以提高性能事件回调执行完毕后，事件对象的属性会被置空

代码示例

class MyComponent extends React.Component {
  handleClick = (e) => {
    // e 是合成事件
    console.log(e.nativeEvent); // 访问原生事件
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

自定义事件实现

const EventSystem = {
  events: {},

  // 注册事件
  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  },

  // 触发事件
  emit(eventName, ...args) {
    const callbacks = this.events[eventName];
    if (callbacks) {
      callbacks.forEach(callback => callback(...args));
    }
  },

  // 移除事件
  off(eventName, callback) {
    const callbacks = this.events[eventName];
    if (callbacks) {
      this.events[eventName] = callbacks.filter(cb => cb !== callback);
    }
  }
};