静かな森
·
浅谈 NextJS RSC/SSR 中数据水合和持久化数据（二）
原文中文，约8700字，阅读约需21分钟。
📝
内容提要
本文介绍了使用Jotai实现数据管理和UI更新的方法，包括数据注入atom、创建数据提供者和钩子以及实现数据的响应式修改和隔离。
🎯
关键要点
-
本文介绍了如何使用Jotai实现数据管理和UI更新。
-
在layout.tsx中使用queryClient获取数据，并将其注入到Jotai的atom中。
-
通过CurrentNoteDataProvider组件将数据源注入atom，简化了数据管理。
-
服务端的QueryClient可以作为单例，避免每次构建React Tree时创建新实例。
-
可以选择性地注入数据以避免数据污染。
-
在客户端组件中使用useCurrentNoteDataSelector钩子消费数据，实现细粒度更新。
-
创建工厂函数createDataProvider以批量生成数据提供者和钩子。
-
Jotai的状态和UI分离，使得数据修改驱动UI更新变得简单。
-
通过Socket连接实时更新数据，UI会自动反应变化。
-
为了解决多个组件依赖同一数据源的问题，引入React Context实现数据隔离。
-
通过Scope的CurrentProvider实现不同组件的数据隔离，避免互相干扰。
🏷️
