讲讲React中的事件处理

React中的事件处理是什么？

• React 合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。它根据 W3C 规范 来定义合成事件，兼容所有浏览器，拥有与浏览器原生事件相同的接口。

为什么要使用合成事件？

• 进行浏览器兼容，实现更好的跨平台
• 避免垃圾回收
• 方便事件统一管理

合成事件与原生事件的区别？

• React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
• 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。
• 合成事件必须显式的使用 preventDefault来组织默认行为，原生事件中可通过return false来实现
• 使用合成事件不需要使用 addEventListener 为已创建的 DOM 元素添加监听器。只需要在该元素初始渲染的时候添加监听器即可。
• 向合成事件传参须通过箭头函数或 Function.prototype.bind 来实现

合成事件与原生事件的执行顺序

• React 所有事件都挂载在 document 对象上；
• 当真实 DOM 元素触发事件，会冒泡到 document 对象后，再处理 React 事件；
• 所以会先执行原生事件，然后处理 React 事件；
• 最后真正执行 document 上挂载的事件。

参考文档

• https://segmentfault.com/a/1190000038251163