无论是从远程服务器获取静态内容,还是与 REST API 进行数据交互,ReactLynx 应用通常需要通过网路请求从外部数据源获取信息。例如,你可能希望在社交应用中加载用户的动态,或是在电商应用中获取最新的商品列表。
Lynx 提供了 Fetch API,使你能够进行网络请求,你可以参考网络章节了解更多信息。Lynx 提供的 Fetch API 可以与 React 社区生态中的服务器状态管理(Server State Management)库结合使用,如 Tanstack Query(React Query)等,以简化数据获取和状态管理。
需要注意的是,Lynx 的 Fetch API 与 Web Fetch API 存在细微差异,你可以参考 Fetch API Reference - 兼容性章节来了解这些差异。因此,你可能需要对 React 社区中的库进行适配,以确保其兼容性。如果你遇到问题,欢迎提出功能请求,或贡献新的功能来帮助 Lynx 更好地支持 React 社区生态。
TanStack Query 是 React 生态中流行的服务器状态管理库,能够帮助开发者轻松管理数据获取和缓存。
以下示例应用演示了如何在 ReactLynx 中使用 TanStack Query 结合 Fetch API 来获取、显示,并删除 JSONPlaceholder API 的用户帖子。
应用首先通过 Tanstack Query 提供的 useQuery
hook 调用 fetchPosts
获取并展示前 10 个帖子。当用户点击“Delete Post 1”按钮后,通过 useMutation
hook 立即进行乐观更新(Optimistic Update):将 id
为 1
的帖子从列表中移除,同时使用 deletePost
调用 Fetch API 发送删除请求,如若请求失败则会回滚至原状态。