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

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

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

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

介绍

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

状态管理: Zustand

这个我推荐还是安装，后面的作业没有 Zustand 用 React Context 和 useReduce 挺难写的。

• 网站: 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, 我建议你把两者的代码对比一下。

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