React面试题整理（一）

1、React事件机制

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

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

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

另外冒泡到document上的事件也不是原生浏览器事件，而是React自己实现的合成事件(SynctheticEvent)。因此我们如果不想要事件冒泡的话，调用event.stopPropagation是无效的，而是应该调用event.preventDedault。

实现合成事件的目的如下：

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

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