React事件绑定原理

[问答题]

React事件绑定原理

查看答案及解析

得分点

非原生事件、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。