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

在 React 应用中,采用哪些方式可以把自定义事件传递给子组件?请简述其适用场景。

前端/移动开发技术原理方案权衡React

考察说明

考察 React 中事件传递的基础方式及其适用场景。

回答思路

  1. 【回答框架 1】React 中事件传递主要通过 props 实现。父组件定义回调函数,通过 JSX 属性传递给子组件,子组件在需要时调用。这是最常用且推荐的方式,适合大多数场景。
  2. 【回答框架 2】如果传递的是 DOM 事件(如 onClick),子组件需要将其绑定到具体的 DOM 元素上,或者通过合成事件处理。也可以通过 ref 调用子组件方法,但一般用于命令式操作。
  3. 【回答框架 3】Context API 可以跨层级传递事件处理函数,避免逐层传递 props。适合多个子组件共享同一事件或回调的场景。
  4. 【回答框架 4】对于复杂状态管理,可使用状态管理库(如 Redux、Zustand)将事件作为 action 分发,子组件通过 dispatch 触发。
  5. 【回答框架 5】自定义事件(如 EventEmitter 或 Web API 的 CustomEvent)可以用于父子通信,但 React 中不常用,因为 props 和回调已足够。
  6. 【关键点 1】最主要方式是通过 props 传递回调函数。
  7. 【关键点 2】Context API 适合跨层级共享事件处理函数。
  8. 【关键点 3】ref 调用子组件方法用于命令式场景。
  9. 【关键点 4】状态管理库(如 Redux)通过 dispatch 分发事件。
  10. 【关键点 5】自定义事件(如 CustomEvent)在 React 中较少使用。
  11. 【易错点 1】过度依赖 ref 和命令式调用可能违背 React 数据流模式。
  12. 【易错点 2】自定义事件需要手动管理监听和清理,容易造成内存泄漏。
  13. 【易错点 3】Context 更新会导致所有消费组件重新渲染,需注意性能优化。