面试官：react 组件通信方式有哪些？

参考链接：2023 再谈 React 组件通信

1. Props 和 Callback：

   • 这是 React 中最基本和常见的组件通信方式。父组件通过 props 将数据传递给子组件，子组件通过 props 接收数据，并且可以通过回调函数（callback）来向父组件传递数据。
   • 父组件可以将数据作为 props 的属性传递给子组件，子组件通过 this.props 访问这些属性。
   • 当子组件需要向父组件传递数据时，可以通过回调函数的方式，将数据作为参数传递给父组件中的函数，从而实现数据的传递。

2. Context：

   • Context 是 React 提供的一种跨组件通信的机制，可以在组件树中传递数据而不必一级一级手动传递 props。
   • 父组件可以通过创建 Context 对象并通过 Provider 提供数据，子组件可以通过 Consumer 或 useContext 钩子函数来获取数据。
   • 这种方式适用于需要在多个层级的组件中共享数据的场景。

3. Event Bus（事件总线）：

   • 事件总线是一种通过事件订阅和发布的方式进行组件间通信的机制。通常使用第三方库（如 EventEmitter、PubSub.js 等）来实现。
   • 组件可以订阅特定的事件，并在事件发生时执行相应的操作，也可以发布事件来通知其他组件。
   • 事件总线适用于组件之间松散耦合的场景，但过度使用可能会导致代码不易维护和理解。

4. Ref 传递：

   • Ref 是 React 提供的一种引用对象的方式，可以用来访问组件实例或 DOM 元素。
   • 父组件可以通过 ref 属性将一个回调函数传递给子组件，子组件可以在合适的时机调用这个回调函数并传递自己的引用。
   • 这种方式通常用于获取子组件的实例或 DOM 元素，但不推荐在组件间传递数据。

5. 状态管理库：

   • 状态管理库（如 Redux、MobX、Zustand、Recoil 等）是一种用于管理应用程序状态的工具。
   • 这些库提供了全局的状态管理机制，使得不同组件之间可以共享和同步状态，并且提供了一套统一的 API 来操作状态。
   • 这种方式适用于大型应用程序或需要共享全局状态的场景，但对于小型应用程序可能会增加复杂性。