SWR是一种流行的数据获取和缓存库,它利用缓存技术最大化性能。但是,在使用SWR时,不要将参数或头信息传递给缓存键。因为这可能会导致SWR缓存的失效和错误数据的获取。
下面是一个示例,展示如何正确地使用SWR,不传递参数或头信息到缓存键中:
import useSWR from 'swr';
function MyComponent() {
const { data, error } = useSWR('/api/data', fetcher);
// ...
}
在上面的代码中,我们只传递了url,这是处理数据的唯一依据。SWR会自动缓存数据,并在需要时自动重新验证。这种设计可以通过在请求中使用参数来实现另一个目标。例如:
import useSWR from 'swr';
function MyComponent({ id }) {
const { data, error } = useSWR(`/api/data/${id}`, fetcher);
// ...
}
在上面的代码中,我们使用id参数来查询不同的数据。SWR会将不同的数据缓存并进行验证,而不必担心缓存的混淆和数据的错误获取。所以,记得不要将参数或头信息传递到缓存键中。