vercel · pengsp · Oct 6, 2024
@@ -2,19 +2,18 @@ import { Callout } from 'nextra-theme-docs'
 
 # DevTools
 
-
 <Callout>
-  SWRDevTools is not an official project of Vercel.
+  SWRDevTools不是Vercel官方项目。
 </Callout>
 
-[SWRDevTools](https://swr-devtools.vercel.app/) is a developer tool for SWR, which helps to debug your SWR cache and fetchers.
+[SWRDevTools](https://swr-devtools.vercel.app/) 是为SWR量身定制的开发工具,它可以帮助你调试SWR的缓存和请求。
 
 
-You can install SWR DevTools from the extension pages and use it with zero settings!
+你可以通过浏览器扩展页面安装SWR DevTools，无需任何配置就可以使用它。 
 
 - Chrome: https://chrome.google.com/webstore/detail/swr-devtools/liidbicegefhheghhjbomajjaehnjned
 - Firefox: https://addons.mozilla.org/en-US/firefox/addon/swr-devtools/
 
-After installing it, the SWR devtool panel will appear on browsers' developer tools.
+安装之后，可以在浏览器的开发人员工具中看到SWR面板。
 
-Checkout more information on the [website](https://swr-devtools.vercel.app/) and the [repository](https://github.com/koba04/swr-devtools)
+更多信息请访问 [SWR官网](https://swr-devtools.vercel.app/) 和 [GitHub仓库](https://github.com/koba04/swr-devtools)
@@ -27,7 +27,7 @@ const { data, error, isLoading, isValidating, mutate } = useSWR(key, fetcher, op
 - `suspense = false`: 启用 React Suspense 模式 [（详情）](/docs/suspense)
 - `fetcher(args)`: fetcher 函数
 - `revalidateIfStale = true`: 即使存在陈旧数据，也自动重新验证[（详情）](/docs/revalidation#disable-automatic-revalidations)
-- `revalidateOnMount`: 在挂载组件时启用或禁用自动重新验证 [(details)](/docs/revalidation#revalidate-on-mount)
+- `revalidateOnMount`: 在挂载组件时启用或禁用自动重新验证 [（详情）](/docs/revalidation#revalidate-on-mount)
 - `revalidateOnFocus = true`: 窗口聚焦时自动重新验证 [（详情）](/docs/revalidation)
 - `revalidateOnReconnect = true`: 浏览器恢复网络连接时自动重新验证（通过 `navigator.onLine`） [（详情）](/docs/revalidation)
 - `refreshInterval` [（详情）](/docs/revalidation):

@@ -336,15 +336,15 @@ function App () {
     当你启用了 `parallel` 选项，`getKey` 函数的参数 `previousPageData` 会变为 `null`。
 </Callout>
 
-### Revalidate Specific Pages [#revalidate-specific-pages]
+### 重新验证特定页面 [#revalidate-specific-pages]
 
 <Callout emoji="✅">
-  Please update to the latest version (≥ 2.2.5) to use this API.
+  请升级至最新版本（≥ 2.2.5）以使用此 API
 </Callout>
 
-The default behavior of the mutation of `useSWRInfinite` is to revalidate all pages that have been loaded. But you might want to revalidate only the specific pages that have been changed. You can revalidate only specific pages by passing a function to the `revalidate` option.
+`useSWRInfinite` 默认行为是重新验证所有已加载的页面，但你可能只想重新验证已更改的特定页面，你可以通过给 `revalidate` 选项传递一个函数来限定需要重新验证的页面。
 
-The `revalidate` function is called for each page.
+每个页面都会调用 `revalidate` 函数。
 
 ```jsx
 function App() {
@@ -354,17 +354,14 @@ function App() {
   );
 
   mutate(data, {
-    // only revalidate the last page
+    // 只重新验证最后一页
     revalidate: (pageData, [url, page]) => page === size
   });
 }
 ```
 
 ### 全局变更 `useSWRInfinite` 数据 [#global-mutate-with-useswrinfinite]
 
-
-`useSWRInfinite` stores all page data into the cache with a special cache key along with each page data, so you have to use `unstable_serialize` in `swr/infinite` to revalidate the data with the global mutate.
-
 `useSWRInfinite` 会将所有页面数据存储在缓存中，并使用特殊的缓存 key 来存储每个页面的数据。因此，您需要在 `swr/infinite` 中使用 `unstable_serialize` 对数据进行序列化，才能使用全局的 `mutate` 方法重新验证数据。
 
 ```jsx

@@ -14,19 +14,19 @@
 
 ## 手动预请求 [#programmatically-prefetch]
 
-SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments.
+SWR 提供 `preload` API 来以编程方式预加载资源并将结果存储在缓存中。`preload` 接受 `key` 和 `fetcher` 作为参数。   
 
-You can call `preload` even outside of React.
+你甚至可以在React之外调用 `preload`。
 
 ```jsx
 import { useState } from 'react'
 import useSWR, { preload } from 'swr'
 
 const fetcher = (url) => fetch(url).then((res) => res.json())
 
-// Preload the resource before rendering the User component below,
-// this prevents potential waterfalls in your application.
-// You can also start preloading when hovering the button or link, too.
+// 在渲染下面的用户组件之前预加载资源，
+// 这可以防止应用程序中出现潜在的网络请求瀑布。
+// 您也可以在鼠标悬停在按钮或链接上时开始预加载。
 preload('/api/user', fetcher)
 
 function User() {
@@ -45,13 +45,13 @@ export default function App() {
 }
 ```
 
-Within React rendering tree, `preload` is also available to use in event handlers or effects.
+在 React 渲染树中，`preload`也可以在事件处理或 effects 中使用。
 
 ```jsx
 function App({ userId }) {
   const [show, setShow] = useState(false)
 
-  // preload in effects
+  // 在 effects 中预加载
   useEffect(() => {
     preload('/api/user?id=' + userId, fetcher)
   }, [userId])
@@ -60,7 +60,7 @@ function App({ userId }) {
     <div>
       <button
         onClick={() => setShow(true)}
-        {/* preload in event callbacks */}
+        {/* 在事件回调中预加载 */}
         onHover={() => preload('/api/user?id=' + userId, fetcher)}
       >
         Show User
@@ -73,18 +73,18 @@ function App({ userId }) {
 
 配合 Next.js 的 [页面预加载](https://nextjs.org/docs/api-reference/next/router#routerprefetch)，你将能立即加载下一页和数据。
 
-In Suspense mode, you should utilize `preload` to avoid waterfall problems.
+在 Suspense 模式下，你应该利用`preload`来避免网络请求瀑布问题。
 
 ```jsx
 import useSWR, { preload } from 'swr'
 
-// should call before rendering
+// 在渲染前执行
 preload('/api/user', fetcher);
 preload('/api/movies', fetcher);
 
 const Page = () => {
-  // The below useSWR hooks will suspend the rendering, but the requests to `/api/user` and `/api/movies` have started by `preload` already,
-  // so the waterfall problem doesn't happen.
+  // 下面的 useSWR 钩子会暂停渲染，但是对 `/api/user` 和 `/api/movies` 的请求已经由 `preload` 启动，
+  // 因此不会出现网络请求瀑布。
   const { data: user } = useSWR('/api/user', fetcher, { suspense: true });
   const { data: movies } = useSWR('/api/movies', fetcher, { suspense: true });
   return (

@@ -87,14 +87,14 @@ useSWRImmutable(key, fetcher)
 
 上面这两个 hook 做**完全相同的**事情。一旦数据被缓存，他们将永远不会再次请求它。
 
-## Revalidate on Mount[#revalidate-on-mount]
+## 挂载时重新请求[#revalidate-on-mount]
 
-It's useful to force override SWR revalidation on mounting. By default, the value of `revalidateOnMount` is set to undefined.
+在组件挂载时，强制覆盖 SWR 的重新请求，这非常有用。默认情况下，`revalidateOnMount`的值为`undefined`。
 
-A SWR hook mounts as:
+SWR hook 挂载过程如下:
 
-- First it checks if `revalidateOnMount` is defined. It starts request if it's true, stop if it's false.
+- 首先，它检查是否定义了 `revalidateOnMount`。如果为 `true`，则开始请求，如果为 `false`，则停止请求。
 
-`revalidateIfStale` useful to control the mount behaviour. By default `revalidateIfStale` is set to true.
+`revalidateIfStale` 有助于控制挂载行为。默认情况下，`revalidateIfStale` 设置为 `true`。
 
-If `revalidateIfStale` is set to true it only refetches if there's any cache data else it will not refetch.
+如果 `revalidateIfStale` 设置为 `true`，则只有存在缓存数据时才会重新获取数据，否则不会重新获取。