From 73b3539100d73f7854e038ca16a664aca1225388 Mon Sep 17 00:00:00 2001 From: Davont Date: Tue, 28 Mar 2023 12:51:50 +0800 Subject: [PATCH] docs(cn): translate the reference/react/lazy page (#1101) Co-authored-by: Xavi Lee --- src/content/reference/react/lazy.md | 60 +++++++++++++++-------------- 1 file changed, 31 insertions(+), 29 deletions(-) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index ba82d4fe2b..dc40771d6b 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -1,10 +1,12 @@ --- title: lazy +translators: + - Davont --- -`lazy` lets you defer loading component's code until it is rendered for the first time. +`lazy` 能够让你在组件第一次被渲染之前延迟加载组件的代码。 ```js const SomeComponent = lazy(load) @@ -16,11 +18,11 @@ const SomeComponent = lazy(load) --- -## Reference {/*reference*/} +## 参考 {/*reference*/} ### `lazy(load)` {/*lazy*/} -Call `lazy` outside your components to declare a lazy-loaded React component: +在组件外部调用 `lazy`，以声明一个懒加载的 React 组件: ```js import { lazy } from 'react'; @@ -28,41 +30,41 @@ import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ``` -[See more examples below.](#usage) +[请看下面的更多例子。](#usage) -#### Parameters {/*parameters*/} +#### 参数 {/*parameters*/} -* `load`: A function that returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or another *thenable* (a Promise-like object with a `then` method). React will not call `load` until the first time you attempt to render the returned component. After React first calls `load`, it will wait for it to resolve, and then render the resolved value as a React component. Both the returned Promise and the Promise's resolved value will be cached, so React will not call `load` more than once. If the Promise rejects, React will `throw` the rejection reason for the nearest Error Boundary to handle. +* `load`: 一个返回 [Promise](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 或另一个 *thenable*（具有 `then` 方法的类 Promise 对象）的函数。在你尝试第一次渲染返回的组件之前，React 是不会调用 load 函数的。在 React 首次调用 `load` 后，它将等待其解析，然后将解析值渲染成 React 组件。返回的 Promise 和 Promise 的解析值都将被缓存，因此 React 不会多次调用 `load` 函数。如果 Promise 被拒绝，则 React 将抛出拒绝原因给最近的错误边界处理。 -#### Returns {/*returns*/} +#### 返回值 {/*returns*/} -`lazy` returns a React component you can render in your tree. While the code for the lazy component is still loading, attempting to render it will *suspend.* Use [``](/reference/react/Suspense) to display a loading indicator while it's loading. +`lazy` 返回一个 React 组件，你可以在 fiber 树中渲染。当懒加载组件的代码仍在加载时，尝试渲染它将会处于 *暂停* 状态。使用 [``](/reference/react/Suspense) 可以在其加载时显示一个正在加载的提示。 --- -### `load` function {/*load*/} +### `load` 函数 {/*load*/} -#### Parameters {/*load-parameters*/} +#### 参数 {/*load-parameters*/} -`load` receives no parameters. +`load` 不接收任何参数。 -#### Returns {/*load-returns*/} +#### 返回值 {/*load-returns*/} -You need to return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or some other *thenable* (a Promise-like object with a `then` method). It needs to eventually resolve to a valid React component type, such as a function, [`memo`](/reference/react/memo), or a [`forwardRef`](/reference/react/forwardRef) component. +你需要返回一个 [Promise](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 或其他 *thenable* （具有 `then` 方法的类 Promise 对象）。它最终需要解析为有效的 React 组件类型，例如函数、[`memo`](/reference/react/memo) 或 [`forwardRef`](/reference/react/forwardRef) 组件。 --- -## Usage {/*usage*/} +## 使用方法 {/*usage*/} -### Lazy-loading components with Suspense {/*suspense-for-code-splitting*/} +### 使用 Suspense 实现懒加载组件 {/*suspense-for-code-splitting*/} -Usually, you import components with the static [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) declaration: +通常，你可以使用静态 [`import`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import) 声明来导入组件： ```js import MarkdownPreview from './MarkdownPreview.js'; ``` -To defer loading this component's code until it's rendered for the first time, replace this import with: +如果想在组件第一次渲染前延迟加载这个组件的代码，请替换成以下导入方式： ```js import { lazy } from 'react'; @@ -70,9 +72,9 @@ import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ``` -This code relies on [dynamic `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) which might require support from your bundler or framework. +此代码依赖于 [动态 `import()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/import)，可能需要你的打包工具或框架提供支持。 -Now that your component's code loads on demand, you also need to specify what should be displayed while it is loading. You can do this by wrapping the lazy component or any of its parents into a [``](/reference/react/Suspense) boundary: +现在你的组件代码可以按需加载，同时你需要指定在它正在加载时应该显示什么。你可以通过将懒加载组件或其任何父级包装到 [``](/reference/react/Suspense) 边界中来实现： ```js {1,4} }> @@ -81,7 +83,7 @@ Now that your component's code loads on demand, you also need to specify what sh ``` -In this example, the code for `MarkdownPreview` won't be loaded until you attempt to render it. If `MarkdownPreview` hasn't loaded yet, `Loading` will be shown in its place. Try ticking the checkbox: +在这个例子中，`MarkdownPreview` 的代码只有在你尝试渲染它时才会被加载。如果 `MarkdownPreview` 还没有加载完成，将显示 `Loading`。请尝试勾选复选框： @@ -112,7 +114,7 @@ export default function MarkdownEditor() { ); } -// Add a fixed delay so you can see the loading state +// 添加一个固定的延迟时间，以便你可以看到加载状态 function delayForDemo(promise) { return new Promise(resolve => { setTimeout(resolve, 2000); @@ -175,34 +177,34 @@ body { -This demo loads with an artificial delay. The next time you untick and tick the checkbox, `Preview` will be cached, so there will be no loading state. To see the loading state again, click "Reset" on the sandbox. +这个示例代码人为地延迟了加载。在你下次取消选中并重新选中复选框时，`Preview` 将被缓存，因此不会出现加载状态。要再次查看加载状态，请在示例中单击“Reset”。 -[Learn more about managing loading states with Suspense.](/reference/react/Suspense) +[了解如何使用 Suspense 管理加载状态。](/reference/react/Suspense) --- -## Troubleshooting {/*troubleshooting*/} +## 疑难解答 {/*troubleshooting*/} -### My `lazy` component's state gets reset unexpectedly {/*my-lazy-components-state-gets-reset-unexpectedly*/} +### 我的 `lazy` 组件状态意外重置 {/*my-lazy-components-state-gets-reset-unexpectedly*/} -Do not declare `lazy` components *inside* other components: +不要在其他组件 *内部* 声明 `lazy` 组件： ```js {4-5} import { lazy } from 'react'; function Editor() { - // 🔴 Bad: This will cause all state to be reset on re-renders + // 🔴 Bad: 这将导致在重新渲染时重置所有状态 const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); // ... } ``` -Instead, always declare them at the top level of your module: +相反，总是在模块的顶层声明它们： ```js {3-4} import { lazy } from 'react'; -// ✅ Good: Declare lazy components outside of your components +// ✅ Good: 将 lazy 组件声明在组件外部 const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); function Editor() {