面试题：React中跨组件事件通信常用的设计模式有哪些及简单原理

Question

请列举React跨组件事件通信中至少两种常用的设计模式，并简要阐述每种模式的基本原理和适用场景。

Answer 1

• 发布 - 订阅模式
  • 基本原理：存在一个事件中心，组件通过在事件中心订阅特定事件来表明自己对该事件感兴趣，当其他组件触发该事件时，事件中心会通知所有订阅了该事件的组件，并传递相关数据。
  • 适用场景：适用于多个组件之间松散耦合的通信场景，比如一个复杂应用中，某个模块状态变化后，多个不相关组件需要作出响应。例如电商应用中，购物车商品数量变化，顶部购物车图标和结算页面等多个组件需要更新。
• 上下文（Context）模式
  • 基本原理：React 提供 Context 机制，它允许组件向其下层组件树中传递数据，而无需在组件链上的每个层级都手动传递 props。通过创建一个 Context 对象，顶层组件通过 Provider 组件向下传递数据，任何层级的子组件都可以通过 Consumer 组件或 useContext Hook 来获取这些数据。
  • 适用场景：当某些数据需要被多个层级的组件共享，且手动逐层传递 props 较为繁琐时适用。如一个多页面的应用，需要在各个页面组件中共享用户登录信息。