React中的事件处理是什么?
- React 合成事件(SyntheticEvent)是 React 模拟原生 DOM 事件所有能力的一个事件对象,即浏览器原生事件的跨浏览器包装器。它根据 W3C 规范 来定义合成事件,兼容所有浏览器,拥有与浏览器原生事件相同的接口。
为什么要使用合成事件?
- 进行浏览器兼容,实现更好的跨平台
- 避免垃圾回收
- 方便事件统一管理
合成事件与原生事件的区别?
- React 事件的命名采用小驼峰式(camelCase),而不是纯小写。
- 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。
- 合成事件必须显式的使用 preventDefault来组织默认行为,原生事件中可通过return false来实现
- 使用合成事件不需要使用 addEventListener 为已创建的 DOM 元素添加监听器。只需要在该元素初始渲染的时候添加监听器即可。
- 向合成事件传参须通过箭头函数或 Function.prototype.bind 来实现
合成事件与原生事件的执行顺序
- React 所有事件都挂载在 document 对象上;
- 当真实 DOM 元素触发事件,会冒泡到 document 对象后,再处理 React 事件;
- 所以会先执行原生事件,然后处理 React 事件;
- 最后真正执行 document 上挂载的事件。