react虚拟事件（合成事件）与dom原生事件的混用

最新推荐文章于 2025-08-12 14:55:17 发布

转载最新推荐文章于 2025-08-12 14:55:17 发布 · 1.8k 阅读

文章标签：

#react事件 #原生事件

react 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了React合成事件的工作原理及其实现方式。通过对比原生DOM事件与React合成事件，详细介绍了合成事件如何帮助开发者避免DOM事件滥用，并解决了不同浏览器间的事件差异问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react合成事件

如果DOM上绑定了过多的事件处理函数，整个页面响应以及内存占用可能都会受到影响。React为了避免这类DOM事件滥用，同时屏蔽底层不同浏览器之间的事件系统差异，实现了一个中间层——SyntheticEvent。

原理

React中，如果需要绑定事件，我们常常在jsx中这么写：

<div onClick={this.onClick}>
    react事件
</div>

原理大致如下：

React并不是将click事件绑在该div的真实DOM上，而是在document处监听所有支持的事件，当事件发生并冒泡至document处时，React将事件内容封装并交由真正的处理函数运行。

以上面的代码为例，整个事件生命周期示意如下：

其中，由于event对象是复用的，事件处理函数执行完后，属性会被清空，所以event的属性无法被异步访问，详情请查阅event-pooling。

事件响应顺序

由于原生事件需要绑定在真实DOM上，所以一般是在componentDidMount阶段/ref的函数执行阶段进行绑定操作，在componentWillUnmount阶段进行解绑操作以避免内存泄漏。

示例如下：

class Demo extends React.PureComponent {
    componentDidMount() {
        const $this = ReactDOM.findDOMNode(this)
        $this.addEventListener('click', this.onDOMClick, false)
    }

    onDOMClick = evt => {
        // ...
    }

    render() {
        return (
            <div>Demo</div>
        )
    }
}