前端React的事件机制

前端React技术框架的事件机制不同于常见的事件机制——原生事件，此文将介绍React的事件机制是什么，与原生事件的区别，以及这两种事件机制是否可以混用等。希望您在阅读这篇文章之后，能够对React的事件机制原理有所了解，借此在使用React的过程中避免错误，或者更加准确地定位错误。

React事件机制是什么？

React的事件是合成事件(Synethic event)，不是原生事件。

demo1: <div onclick="handle()">ni</div>
demo2: render() { return <div onClick={this.handle}>ni</div> }
虽然两个例子都是通过标签内嵌的方式将click事件进行绑定，但其中的原理是不一样的，demo1是采用原生的事件处理，demo2是采用React的合成事件机制处理。

React事件机制步骤

React事件机制执行分为如下两个步骤。

事件绑定：当用户在为onClick添加函数时，React并没有将Click事件绑定在DOM上,而是在document处监听所有支持的事件；

事件触发：当事件发生，并冒泡至document处时，使用统一的分发函数dispatchEvent将指定函数执行。

合成事件和原生事件的区别

写法不同。在原生事件中，事件名称使用小写，而 React 中使用驼峰命名。

如果采用 JSX 的语法，你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)。

// 原生事件
<button onclick="buttonClick()">

// React事件
<button onClick="buttonClick()">

阻止默认行为不同。在 HTML 中，阻止事件的默认行为使用 return false，而 React 中必须调用 preventDefault。

// 原生
<button onclick="console.log('123'); return false">

// React
function buttonClick(e) {
e.preventDefault()
}

机制不同。原生事件是直接将事件绑定到当前元素，React 中的事件机制则分为两个阶段：事件注册、事件分发。所有的事件都会注册到 document 上，当触发时，会采用事件冒泡的形式冒泡到document上面，然后React将事件封装给正式的函数处理。

React事件机制总流程图

React事件和原生事件执行顺序的差别

componentDidMount() {
this.parent.addEventListener('click', (e) => {
console.log('dom parent');
})
this.child.addEventListener('click', (e) => {
console.log('dom child');
})
document.addEventListener('click', (e) => {
console.log('document');
})
}

childClick = (e) => {
console.log('react child');
}

parentClick = (e) => {
console.log('react parent');
}

render() {
return (
<div onClick={this.parentClick} ref={ref => this.parent = ref}>
<div onClick={this.childClick} ref={ref => this.child = ref}>
test
</div>
</div>)
}
执行结果为：

由此得出如下结论：

React的所有事件都挂载在document中；

当真实dom触发后，冒泡到document，才会对React事件进行处理；

所以原生的事件会先执行；

然后执行React合成事件；

最后执行真正在document上挂载的事件。

React事件和原生事件可以混用吗？

React事件和原生事件最好不要混用。

原生事件中如果执行了stopPropagation方法，会导致其他React事件失效。因为所有元素的事件将无法冒泡到document上。

由上面的执行机制不难得出：所有的React事件都将无法被注册。

总结

上面的介绍让我们了解到了React事件机制，以及React事件机制的意义所在：

减少内存消耗，提升性能。不需要注册那么多的事件了，一种事件类型只在 document 上注册一次；

统一规范，解决 ie 事件兼容问题，简化事件逻辑；

对开发者友好。

猪齿鱼数智化开发管理平台正是使用了 React 技术框架作为前端应用框架，并结合猪齿鱼UI组件库来实现前端相关需求。比如：通过猪齿鱼组件库中的dataSet数据源从后端获取数据，并和页面的table组件和表单组件绑定起来，再结合React实现数据的渲染和传递等，猪齿鱼系统设计中的表单、表格、弹窗等一系列交互性功能基本都通过dataSet数据源与猪齿鱼UI组件库联动绑定实现。

参考

React事件机制，超厉害，

https://zhuanlan.zhihu.com/p/...

【React深入】React事件机制，ConardLi，https://segmentfault.com/a/11...

React事件处理的机制及原理，冷星，

https://www.jb51.net/article/...

关于甄知科技

About Zknow

上海甄知科技有限公司（简称甄知科技）是一家服务管理数字化领先企业，由业界知名的企业数字化综合服务商上海汉得信息技术股份有限公司（股票代码：300170）孵化而成，承袭汉得信息20年的企业信息化服务经验和对企业数智化建设的深入理解，以产品燕千云、猪齿鱼，为用户提供智能化IT运维、人性化员工服务、全方位客户成功、可视化软件研发的SaaS管理平台+PaaS定制能力，强势助力各行业企业数智化转型升级。

申请试用