DEV Community
·
观察者模式 | React 中的组件通信 - 第二部分
💡
原文英文，约1600词，阅读约需6分钟。
📝
内容提要
本文介绍了观察者模式，这是一种有效的数据共享管理方法，类似于发布-订阅模式。观察者注册到主题，状态变化时接收通知，允许组件更新状态并访问最新信息。在某些情况下，观察者模式可能优于其他状态管理库。
🎯
关键要点
- 观察者模式是一种有效的数据共享管理方法，类似于发布-订阅模式。
- 观察者直接注册到主题，当状态变化时接收通知。
- 观察者模式允许组件从任何地方更新状态并访问最新信息。
- 主题负责存储和管理状态，并跟踪观察者列表。
- 创建观察者时，使用 Set 存储观察者以避免重复注册。
- subscribe 函数用于注册观察者并立即通知当前状态。
- next 函数用于更新状态并通知所有注册的观察者。
- get 函数用于获取当前值，方便随时访问最新状态。
- 自定义 Hook 允许组件订阅主题并在状态变化时自动重新渲染。
- 观察者模式在 React 中的应用与 useEffect Hook 有相似之处。
- Redux 等状态管理库也借鉴了观察者模式的思想。
- 选择观察者模式而非其他工具取决于数据共享的性质。
- 观察者模式适合在两个页面或非父子组件之间共享数据。
- 当观察者数量过多时，可能需要重新考虑使用观察者模式。
❓
延伸问答
观察者模式的基本概念是什么？
观察者模式是一种数据共享管理方法，允许观察者直接注册到主题，并在状态变化时接收通知。
观察者模式与发布-订阅模式有什么区别？
在观察者模式中，观察者直接注册到主题，主题持有观察者的引用；而在发布-订阅模式中，发布者与订阅者之间没有直接联系。
如何在 React 中实现观察者模式？
可以通过创建一个主题对象，使用 subscribe 函数注册观察者，并使用 next 函数更新状态和通知观察者。
观察者模式适合用于哪些场景？
观察者模式适合在两个页面或非父子组件之间共享数据，尤其是当数据不需要全局访问时。
使用观察者模式有哪些潜在风险？
当观察者数量过多时，可能会导致状态难以追踪，影响开发体验，因此需要谨慎使用。
观察者模式与 Redux 有什么关系？
观察者模式的思想在 Redux 中得到了借鉴，Redux 的 store 可以视为主题，组件通过选择器订阅状态变化。
➡️
