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