React Query,提供了一种方便的方式来管理React应用程序中的数据。它是基于Query体系结构,提供了一系列功能强大的工具来处理数据获取、缓存、更新等相关问题。
使用场景:
1.数据获取和管理:通过React Query,您可以轻松地获取和管理应用程序中的数据,不必编写大量的手动逻辑代码。
2.优化性能:React Query提供了许多有用的优化功能,如数据缓存、分页加载、异步数据获取等,可以大大提高应用程序的性能。
3.实时数据更新:React Query还支持实时数据更新,您可以使用它来订阅实时数据更改,以及使用缓存和乐观更新来提高性能和响应速度。
使用示例:
1、基本使用
/* 堆代码 duidaima.com */
import { useQuery } from '@tanstack/react-query';
function App() {
const { isLoading, error, data } = useQuery('todos', () =>
fetch('https://jsonplaceholder.typicode.com/todos').then(res =>
res.json()
)
);
if (isLoading) return 'Loading...';
if (error) return 'An error has occurred: ' + error.message;
return (
<ul>
{data.map(item => (
<li key={item.id}>{item.title}</li>
))}
</ul>
);
}
这里使用useQuery钩子来获取todos数据。如果数据正在加载,则显示Loading...;如果发生错误,则显示错误消息;否则,显示获取到的数据。
2、使用缓存
import { useQuery, queryCache } from '@tanstack/react-query';
function App() {
const [userId, setUserId] = useState(1);
const { isLoading, error, data } = useQuery(
['todos', userId],
() => fetch(`https://jsonplaceholder.typicode.com/todos?userId=${userId}`).then(res => res.json()),
{ cacheTime: 60000 }
);
if (isLoading) return 'Loading...';
if (error) return 'An error has occurred: ' + error.message;
return (
<div>
<button onClick={() => setUserId(userId => userId + 1)}>Next user</button>
<ul>
{data.map(item => (
<li key={item.id}>{item.title}</li>
))}
</ul>
</div>
);
}
这里使用了带有缓存的useQuery钩子,使用了查询键来表示userId。当用户更改时,数据将从服务器重新获取,并存储在缓存中,以便下一次使用。
3、实时数据更新
这是一个使用 React Query 和 Axios 来实时获取和更新数据的例子。
首先,在 App.js 中,我们导入 useQuery 和 useMutation hooks,以及 axios 库,然后定义一个 fetchUser 函数来获取用户数据:
import { useQuery, useMutation } from 'react-query';
import axios from 'axios';
const fetchUser = async () => {
const res = await axios.get('/api/user');
return res.data;
}
function App() {
// useQuery hook to get user data
const { data: user, isLoading, isError } = useQuery('user', fetchUser);
// useMutation hook to update user data
const [updateUser] = useMutation(async (updatedUser) => {
const res = await axios.put('/api/user', updatedUser);
return res.data;
});
// handler for updating user data
const handleUpdateUser = (e) => {
const { name, value } = e.target;
updateUser({ ...user, [name]: value });
};
// render user data and update form
return (
<div>
{isLoading ? (
<div>Loading...</div>
) : isError ? (
<div>Error loading data.</div>
) : (
<div>
<h1>User Data</h1>
<p>Name: {user.name}</p>
<p>Email: {user.email}</p>
<form>
<label>
Name:
<input type="text" name="name" value={user.name} onChange={handleUpdateUser} />
</label>
<label>
Email:
<input type="email" name="email" value={user.email} onChange={handleUpdateUser} />
</label>
</form>
</div>
)}
</div>
);
}
然后,我们可以在服务器端创建一个 API 来获取和更新用户数据。这里我们使用 Express.js:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
let user = {
name: 'John',
email: 'john@example.com',
};
// GET /api/user route to get user data
app.get('/api/user', (req, res) => {
res.send(user);
});
// PUT /api/user route to update user data
app.put('/api/user', (req, res) => {
user = req.body;
res.send(user);
});
app.listen(5000, () => console.log('Server started on port 5000'));
在这个例子中,我们使用了 useQuery hook 来获取用户数据,并使用 useMutation hook 来更新用户数据。我们还定义了一个 handleUpdateUser 函数,它会在表单数据发生变化时被调用,并通过 updateUser 函数来更新用户数据。当用户数据更新成功后,React Query 会自动更新 user 数据并重新渲染组件,从而实现实时数据更新的效果。
官网:
https://tanstack.com/query/latest/
NPM:
https://www.npmjs.com/package/@tanstack/react-query