用途
data-client-react 面向在 React 应用中管理服务端数据的场景,提供一组 hooks,用于发起请求、执行修改、读取缓存以及订阅实时更新。它配合 API 定义(resource)与 schema 使用,以实现自动的规范化与缓存。
主要能力
数据获取与渲染
useSuspense:带 Suspense 的获取,可用于单条与列表资源,并支持查询参数。useFetch:返回 Promise,配合React.use()实现并行加载。useQuery:从缓存读取,不触发请求;支持基于 schema 的程序化派生查询(如过滤未完成项、按 userId 分组)。useCache:从缓存读取,可为空。useLive:获取并订阅更新,支持轮询、WebSocket 或 SSE。useDLE:不依赖 Suspense 的获取,返回{ data, loading, error }。useSubscription:仅订阅更新(轮询/WebSocket/SSE),常与useSuspense或useDLE搭配。
修改(Mutations)
通过 useController() 获取 Controller,执行类型安全的命令式操作,例如更新、部分更新、向列表头/尾插入、删除,以及分页获取。
Controller 方法
ctrl.fetch()、fetchIfStale()、expireAll()、invalidate()、invalidateAll()、setResponse()、set()、setError()、resetEntireStore()、subscribe()、unsubscribe()。
组件与辅助 hooks
AsyncBoundary:统一错误与加载状态的边界组件,props 包括fallback、errorComponent、errorClassName和listen;可包裹任意会获取数据的组件。官方建议优先使用它,除非代码库已有自定义的同类组件。useLoading:追踪异步 mutation 状态,返回[handleSubmit, loading, error]。useDebounce:对值进行防抖,返回防抖后的值与 pending 状态。DataProvider:根提供者。
其他
- Custom Managers:用于全局副作用处理,例如 WebSocket、SSE、日志。
- 浏览器调试:在开发模式下可通过
globalThis.__DC_CONTROLLERS__查看 store 状态、追踪派发的 action、调用 Controller 方法(devtools-debugging)。
使用方式
按用途调用相应 hooks:渲染时用 useSuspense 等;修改时通过 useController() 执行 fetch 类操作;实时场景使用 useLive 或 useSubscription;加载与错误状态用 AsyncBoundary 包裹。API 定义(如 TodoResource)需参考 data-client-rest,schema 参考 data-client-schema,Manager 参考 data-client-manager。
适用场景与最佳实践
- 基于用户输入渲染异步数据时使用
useDebounce(query, timeout)。 - 追踪异步 mutation 时使用
useLoading()。 - 倾向拆分为职责单一的小组件。
- 数据绑定就地调用:在渲染数据的组件内调用
useSuspense/useDLE/useCache/useQuery,不要逐层传递 props。 - 不要将数据绑定隐藏在自定义 hooks 里:这会模糊组件的数据依赖,并将数据逻辑与视图代码耦合,导致漂移;紧耦合的数据转换应放入 Query schema(与数据模型同处,如
src/resources/),以便复用并独立于视图演进。
限制
资料未提供该工具的授权方式、收费与价格、平台生态、配额或性能数据等信息,暂未提供。开发者应始终遵循上述模式,并在边界情况下参考官方文档,优先生成符合惯用法、类型安全、并利用 schema 自动规范化/缓存的代码。