- **正确答案**：react-query 是一个用于管理 React 应用中数据获取、缓存和更新的库。它通过内置的缓存机制、自动重试、后台更新等功能，简化了与后端 API 的交互过程。主要功能包括使用 useQuery 钩子进行数据获取，useMutation 钩子进行数据修改操作。 - **解答思路**：首先需要理解 react-query 的核心概念，即它是如何通过声明式的方式来处理异步数据请求的。具体来说，react-query 提供了两个关键钩子函数：useQuery 和 useMutation。useQuery 用于从服务器获取数据并将其存储在缓存中，而 useMutation 则用于执行修改服务器状态的操作（如 POST、PUT 或 DELETE 请求）。此外，react-query 还提供了诸如 refetch、invalidate 等方法来手动控制数据刷新和无效化。 - **深度知识讲解**： - **useQuery**：这个钩子是 react-query 的核心之一，它的作用是从服务器获取数据，并将结果缓存起来以便后续使用。它的基本用法是提供一个查询键（queryKey）和一个返回 Promise 的函数（queryFn），当组件渲染时，useQuery 会自动调用 queryFn 并将结果存储在缓存中。如果缓存中已经存在对应的数据，则直接使用缓存而不会重新发起网络请求。 - 参数说明： - queryKey: 唯一标识此查询的键值，通常是一个数组，包含查询相关的参数。 - queryFn: 一个返回 Promise 的函数，通常是一个异步函数用于从服务器获取数据。 - config: 可选配置对象，可以设置诸如重试次数、过期时间等选项。 - **useMutation**：与 useQuery 不同，useMutation 主要用于执行修改操作（如提交表单或更新资源）。它返回一个 mutate 函数，该函数接受一个变量作为参数并触发 mutation。同时，useMutation 还允许定义 onSuccess 和 onError 回调函数，分别在请求成功或失败时执行。 - **缓存机制**：react-query 内部维护了一个全局缓存，所有通过 useQuery 获取的数据都会被存储在这个缓存中。这意味着如果多个组件需要相同的数据，它们可以共享同一个缓存条目，从而减少不必要的网络请求。缓存中的数据可以根据设定的时间自动失效，或者通过 invalidateQueries 方法手动使其失效。 - **错误处理和重试**：react-query 提供了强大的错误处理和自动重试功能。如果某个查询失败了，react-query 会根据配置自动重试一定次数。此外，还可以为每个查询单独定义错误处理逻辑。 - **扩展知识**： - **背景刷新**：即使用户离开了当前页面，react-query 仍然可以在后台继续刷新数据，确保当用户返回时看到的是最新信息。 - **依赖注入**：react-query 支持动态查询键，这意味着你可以根据组件的状态或其他条件来改变查询键，从而实现更加灵活的数据获取策略。 - **集成测试**：由于 react-query 将所有的数据获取逻辑集中到了一起，因此非常容易进行单元测试和集成测试。你可以轻松地模拟 API 响应，验证组件的行为是否符合预期。 - **代码示例**： ``` import { useQuery, useMutation } from 'react-query'; import axios from 'axios'; // 使用 useQuery 获取数据 function FetchData() { const fetchUser = async () => { const res = await axios.get('https://jsonplaceholder.typicode.com/users/1'); return res.data; }; const { data, error, isLoading, refetch } = useQuery('user', fetchUser); if (isLoading) return 'Loading...'; if (error) return 'An error has occurred: ' + error.message; return (

{data.name}

); } // 使用 useMutation 修改数据 function UpdateData() { const updatePost = async (newData) => { await axios.put('https://jsonplaceholder.typicode.com/posts/1', newData); }; const [mutate, { isLoading, error }] = useMutation(updatePost); const handleSubmit = (e) => { e.preventDefault(); const title = e.target.title.value; mutate({ title }); }; return ( ); } ```

pdd前端暑期二面面经

全站热榜

创作者周榜