前端/移动开发面试题更新 2026-08-05

请解释在 React 应用中创建和处理事件的方法,并说明其与传统 DOM 事件处理的区别。

前端/移动开发技术原理React

考察说明

考察对 React 事件系统基础知识的理解,包括合成事件和事件绑定方式。

回答思路

  1. 【回答框架 1】React 中的事件是通过 JSX 属性绑定的,例如 onClick、onChange 等,事件处理函数接收合成事件对象。
  2. 【回答框架 2】合成事件是 React 对原生事件的跨浏览器封装,统一了事件接口,并拥有事件委托机制。
  3. 【回答框架 3】React 事件处理与原生 DOM 事件的区别包括:命名使用驼峰、绑定方式为函数引用、无法通过 return false 阻止默认行为,而需调用 preventDefault。
  4. 【回答框架 4】事件处理中的 this 绑定需要注意,可以通过箭头函数或 bind 显式绑定。
  5. 【回答框架 5】React 17 及之后版本,事件委托的挂载点从 document 改为根容器,有助于多个 React 应用共存。
  6. 【关键点 1】事件绑定采用 JSX 属性并传入函数引用。
  7. 【关键点 2】合成事件提供跨浏览器一致性,并支持事件委托。
  8. 【关键点 3】阻止默认行为需调用 preventDefault,不能返回 false。
  9. 【关键点 4】处理 this 指向可使用箭头函数或 bind。
  10. 【易错点 1】不能直接使用 return false 来阻止默认行为,必须调用 preventDefault。
  11. 【易错点 2】事件函数中 this 指向可能为 undefined,需正确绑定。