React 事件机制原理

React事件机制原理

与原生 DOM 事件相比，React 事件机制有着独特的设计理念和实现方式，理解这一机制对于开发者写出高效、可维护的 React 代码至关重要。

一、React 事件机制的本质

React 事件机制并非直接映射原生 DOM 事件，而是在原生事件的基础上构建了一套合成事件系统（SyntheticEvent）。

以如下react事件为例

jsx 复制代码

export default function Test(){
    function handleClick(e){
        console.log(e.target)
	}
    return (
        <button onClick={handleClick}>点我</button>
    )
}

对于 <button onClick={handleClick}>点我</button>事件，React并不会将这个函数直接绑定到button上，而是：把这个事件处理函数注册给 React 内部系统，并记录下来："这个按钮点击时应该调用哪个函数"。然后，React 在最顶层（比如 document）监听所有点击事件。

当用户点击了某个按钮时，浏览器原生事件对象冒泡到顶层。React拿到这个事件后，根据（event.target）找到对应的组件，然后找到组件中绑定onClick函数，最后调用这个函数，并传入对原生事件封装的 SyntheticEvent 对象。

二、什么是`SyntheticEvent`

SyntheticEvent

在 React 中，当给一个组件（比如按钮 <button>）添加事件处理函数时，React 并没有直接使用浏览器原生的事件对象（如 MouseEvent, KeyboardEvent 等），而是提供了一个统一的包装器 ------ SyntheticEvent。它拥有与原生事件相同的接口，但屏蔽了不同浏览器之间的差异，确保你的代码可以在所有浏览器中表现一致。
jsx 复制代码
```
function MyButton() {
  function handleClick(event) {
    // event 是 SyntheticEvent 类型
    console.log('按钮被点击了！');
    console.log(event); // 可以打印出事件对象
  }

  return <button onClick={handleClick}>点我</button>;
}
```
通过SyntheticEvent所有事件处理方式统一，不管是点击、键盘输入还是表单变化，都可以用相同的方式处理。

SyntheticEvent 常见属性和方法

属性/方法	说明
`event.target`	触发事件的目标元素（比如点击的是哪个 input）
`event.type`	事件类型（如 `'click'`, `'change'`）
`event.preventDefault()`	阻止默认行为（比如阻止表单提交）
`event.stopPropagation()`	阻止事件冒泡
`event.nativeEvent`	获取原始的浏览器事件对象（不推荐常用）

三、异步事件访问问题

由于SyntheticEvent 是池化的（event pool）。即React 不会为每次事件都创建一个新的事件对象，而是从一个"池子"里取出一个已有的对象来复用 。处理完事件后，这个对象会被回收回池子里，供下一次使用。这样做的目的是为了 减少内存分配和垃圾回收的压力，提高性能。

这意味着React 在当前事件处理完成后，就会清空这个对象的内容（回收它） ，当你在 setTimeout 这样的异步操作中访问 event.target 时，这个事件对象可能已经被清空了，在异步操作中不能保留事件对象。
jsx 复制代码
```
function App() {
  const handleClick = (e) => {
    console.log('绑定执行',e.target);
    setTimeout(() => {
      console.log('异步函数执行',e.target);
    }, 2000)
  }
  return (
    <>
      <button onClick={handleClick}>click</button>
    </>
  )
}
```
结果如下：

若要在异步中使用事件对象，可以用变量来存储数据

jsx 复制代码

function App() {
  const handleClick = (e) => {
    let temp = e
    console.log('绑定执行',e.target);
    setTimeout(() => {
      console.log('异步函数执行',temp.target);
    }, 2000)
  }
  return (
    <>
      <button onClick={handleClick}>click</button>
    </>
  )
}

效果如下：

React 事件机制原理