在一个基于 React 构建的项目里，你通常采用哪些技术方案或模式来处理异步操作，比如数据请求、状态更新等？
考察说明
考察候选人对 React 异步编程模式的掌握与实际选型能力。
回答思路
- 【回答框架 1】在 React 中处理异步操作，核心是管理异步数据流和状态。常见的方案包括使用 Hooks 如 useEffect 和 useCallback，配合 async/await 或 Promise 处理请求，并利用 useState 或 useReducer 管理加载、成功、失败状态。
- 【回答框架 2】对于复杂应用，状态管理库如 Redux 常结合中间件 Redux Thunk 或 Redux Saga。Thunk 允许 action 返回函数处理副作用，Saga 则使用 Generator 实现更复杂的异步流程和并发控制。
- 【回答框架 3】现代实践中，也可能使用 React Query 或 SWR 等数据请求库，它们封装了缓存、重试、自动更新等能力，减少手动管理异步状态的重复代码。
- 【回答框架 4】选择方案需考虑项目复杂度、团队熟悉度及性能要求。简单场景优先使用 Hooks，中大型项目可能需引入状态管理库或数据请求库。
- 【回答框架 5】实现时需注意避免内存泄漏，在 useEffect 中使用清理函数取消未完成的请求；同时处理好竞态条件，确保响应结果反映最新请求状态。
- 【关键点 1】基于 Hooks 的 useEffect 与自定义 Hook 是最基本的异步处理方式。
- 【关键点 2】Redux Thunk 和 Redux Saga 是 Redux 生态中处理异步 action 的常用中间件。
- 【关键点 3】React Query 和 SWR 能显著简化服务端状态管理。
- 【关键点 4】异步操作需考虑取消与竞态条件，避免数据错乱。
- 【关键点 5】应根据项目规模与需求选择合适的技术方案。
- 【易错点 1】在 useEffect 中未正确清理异步操作，导致组件卸载后仍更新状态，引发内存泄漏。
- 【易错点 2】使用多个异步请求时未处理竞态条件，可能导致旧响应覆盖新数据。
- 【易错点 3】过度依赖状态管理库处理简单异步逻辑，增加冗余代码。