首页 > 试题广场 >

React事件绑定原理

[问答题]
React事件绑定原理
添加回答
推荐
可乐加冰upuppp头像 可乐加冰upuppp

得分点

非原生事件、SyntheticBaseEvent

参考答案

标准回答

  • React中event事件不是原生事件，而是对原生event进行了封装的新类SyntheticBaseEvent，模拟出DOM事件的所有功能，通过event.nativeEvent可以获取到原生事件。
  • React17版本开始所有事件都绑定在root根组件上，之前都是绑定在document上。
  • React中event和DOM事件不一样，和Vue也不一样。

加分回答

React并不是将click事件绑在该div的真实DOM上，而是在root处监听所有支持的事件，当事件发生并冒泡至root处时，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅减少了内存消耗，还能在组件挂载销毁时统一订阅和移除事件。另外冒泡到 root上的事件也不是原生浏览器事件，而是 React 自己实现的合成事件（SyntheticBaseEvent）。因此我们如果不想要事件冒泡的话，调用 event.stopPropagation 是无效的，而应该调用event.preventDefault。

延伸阅读：

事件绑定原理图：

图片说明

编辑于 2021-09-15 12:22:19 回复(0)
帅气西瓜头像 帅气西瓜
react中的事件都是合成事件，不是把每一个dom的事件绑定在dom上，而是把事件统一绑定到document中，触发时通过事件冒泡到document进行触发合成事件，因为是合成事件，所以我们无法去使用e.stopPropagation去阻止，而是使用e.preventDefault去阻止。

发表于 2022-07-27 14:41:23 回复(0)
提交观点

问题信息

上传者：小小
难度：
2条回答 981浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号