说说react的事件机制?

简介: React并不是将click事件绑定到了div的真实DOM上,而是在document处监听了所有的事件,当事件发生并且冒泡到document处的时候,React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗,还能在组件挂在销毁时统一订阅和移除事件。

什么是react的事件机制?

const button = <button onClick={handleClick}>按钮</button>

React并不是将click事件绑定到了div的真实DOM上,而是在document处监听了所有的事件,当事件发生并且冒泡到document处的时候,React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗,还能在组件挂在销毁时统一订阅和移除事件。


除此之外,冒泡到document上的事件也不是原生的浏览器事件,而是由react自己实现的合成事件(SyntheticEvent)。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法,而不是调用event.stopProppagation()方法。

84a81ee2756c4fc7a4c2a2a467982f99.png

事件机制的好处有哪些?

JSX 上写的事件并没有绑定在对应的真实 DOM 上,而是通过事件代理的方式,将所有的事件都统一绑定在了 document上,这样的方式不仅仅减少了内存的消耗,还能在组件挂在销毁时统一订阅和移除事件。

合成事件的目的?

 ●  合成事件首先抹平了浏览器之间的兼容问题,另外这是一个跨浏览器原生事件包装器,赋予了跨浏览器开发的能力;

 ●  对于原生浏览器事件来说,浏览器会给监听器创建一个事件对象。如果你有很多的事件监听,那么就需要分配很多的事件对象,造成高额的内存分配问题。但是对于合成事件来说,有一个事件池专门来管理它们的创建和销毁,当事件需要被使用时,就会从池子中复用对象,事件回调结束后,就会销毁事件对象上的属性,从而便于下次复用事件对象。

相关文章
|
1月前
|
前端开发 JavaScript 开发者
React 中还有哪些其他机制可以影响任务的执行顺序?
【10月更文挑战第27天】这些机制在不同的场景下相互配合,共同影响着React中任务的执行顺序,开发者需要深入理解这些机制,以便更好地控制和优化React应用的性能和行为。
|
2月前
|
移动开发 前端开发 JavaScript
React 表单与事件
10月更文挑战第10天
41 1
|
1月前
|
前端开发 JavaScript 开发者
React 事件处理机制详解
【10月更文挑战第23天】本文介绍了 React 的事件处理机制,包括事件绑定、事件对象、常见问题及解决方案。通过基础概念和代码示例,详细讲解了如何处理 `this` 绑定、性能优化、阻止默认行为和事件委托等问题,帮助开发者编写高效、可维护的 React 应用程序。
95 4
|
1月前
|
前端开发 JavaScript 算法
React的运行时关键环节和机制
【10月更文挑战第25天】React的运行时通过虚拟DOM、组件渲染、状态管理、事件系统以及协调与更新等机制的协同工作,为开发者提供了一种高效、灵活的方式来构建用户界面和处理交互逻辑。这些机制相互配合,使得React应用能够快速响应用户操作,同时保持良好的性能和可维护性。
|
2月前
|
前端开发 JavaScript IDE
React 事件处理
10月更文挑战第8天
23 1
|
2月前
|
前端开发 JavaScript
一文详解React事件中this指向,面试必备
一文详解React事件中this指向,面试必备
47 0
|
3月前
|
前端开发 JavaScript
react学习(19)事件处理
react学习(19)事件处理
|
3月前
|
前端开发 JavaScript
React的事件与原生事件的执行顺序?
React的事件与原生事件的执行顺序?
|
4月前
|
前端开发 JavaScript Java
React 中的合成事件
【8月更文挑战第30天】
58 6
|
4月前
|
前端开发 JavaScript
React 中的事件是什么?
【8月更文挑战第30天】
80 5