4.2.3.6 框架与库 - 状态、路由与数据管理

React 提供的工具很强大，但是面对复杂的需求我们可能还需要更多的工具组织我们的项目。

有可能我们需要一个全局的状态管理钩子处理一些需要共享的状态，有可能我们需要管理页面的路由。有时候我们还需要向服务端请求动态数据并且管理。这些时候都需要用到库来加快开发和标准化流程。

这里提到的库不一定非要包含在项目里面，用到可以自行去网站查看如何安装。

介绍

这里我给出的都是 GPT 的介绍。

状态管理: Zustand

客户端状态管理推荐。没有 Zustand 的话用 React Context 和 useReduce 挺难写的。

注意一点是我们现在要引出客户端状态的概念。就是客户端状态的概念。客户端状态指的是客户端本地独自维护的状态。它的数据来源不是服务端，至少不直接来自服务端。后续去向也会保留在本地，不需要上传到服务端。如果设计和服务端直接沟通的状态，应使用 React Query 管理。

• 网站: https://zustand.docs.pmnd.rs/getting-started/introduction
• 构成：轻量的状态管理库，基于 hooks，支持创建简单和复杂的状态逻辑。
• 原理: Zustand 允许你通过创建 store 来共享状态，并利用 React hooks 来管理状态的更新和订阅。
• 用途：用于管理全局或局部的应用状态，比 Redux 更简单，但也更灵活。
• 例子：在你的应用中使用 Zustand 来管理用户认证状态。

路由管理: React Router

• 网站: https://reactrouter.com
• 构成：一个为 React 提供的声明式路由解决方案。
• 原理：通过 URL 路径匹配渲染不同的组件，支持嵌套路由、动态路由和代码分割。
• 用途：实现多页面应用的路由系统，让用户可以在不同页面之间无缝导航。
• 例子：为你的应用添加导航菜单，使用户可以在首页、详情页和设置页面之间切换。

数据获取和缓存: React Query

非常推荐在大作业里面用，而不是在 useEffect 里面写 fetch 。如果你执意要写 Effect, 我建议你把两者的代码对比一下。

React Query 其实不只是一些用来 fetch 的 Hook 函数，它其实是一套完整的服务端状态管理方案。通过 Query 和 Mutation 等基本 API 和一些推荐实践就能方便地管理和服务端的数据通信。避免手写 useEffect 带来的业务逻辑杂糅，更好地管理需要和服务端通信的状态。

React Query 的文档给出了很多示例，可以参考对照实现。

• 网站: https://tanstack.com/query/latest/docs/framework/react/overview
• 构成：一个用于管理服务器状态的库，专注于数据获取、缓存和同步。
• 原理：它处理数据获取的复杂性，包括缓存、数据无效化、背景更新等，同时避免手动管理请求的繁琐工作。
• 用途：轻松管理异步数据流，如从 API 获取数据并自动更新视图。
• 例子：使用 React Query 获取并缓存用户数据，并确保当用户回到页面时不需要重复请求数据。