请描述在 React 应用中，如何利用 Hooks 机制进行服务端数据请求？
考察说明
考察对 React Hooks 中数据获取模式的理解及实际应用能力。
回答思路
- 【回答框架 1】数据获取的核心 Hook 是 useEffect，在组件挂载后执行异步请求，并配合 useState 管理 loading、error、data 三个状态，以渲染不同 UI。
- 【回答框架 2】为避免请求竞态和内存泄漏，需要在 effect 中设置取消标志（如 let ignore = false），并在 cleanup 中置为 true，或使用 AbortController 取消请求。
- 【回答框架 3】抽取自定义 Hook（如 useFetch）可将逻辑复用，参数化 URL 和依赖项，并返回状态和控制函数，提高代码可维护性。
- 【回答框架 4】现代方案可用 useReducer 或 SWR、React Query 等库简化状态管理和缓存，但需理解其底层基于 Hooks 的原理。
- 【回答框架 5】注意 effect 依赖数组的准确性，避免遗漏导致重复请求或闭包陷阱；服务端渲染需考虑水合阶段的数据获取策略。
- 【关键点 1】useEffect 负责触发请求，useState 管理请求状态。
- 【关键点 2】需处理竞态和卸载后的状态更新。
- 【关键点 3】自定义 Hook 提升复用性，可用 useReducer 管理复杂状态。
- 【关键点 4】SWR/React Query 提供缓存和重新验证能力，但增加依赖。
- 【关键点 5】依赖数组决定 effect 执行时机。
- 【易错点 1】未处理竞态可能导致旧响应覆盖新数据。
- 【易错点 2】忽略装载状态检查可能在卸载后 setState 造成警告。
- 【易错点 3】请求错误未捕获会导致崩溃，需 try-catch 和错误状态。