Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(cn): translate the reference/react/lazy page #1101

Merged
merged 17 commits into from
Mar 28, 2023
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 31 additions & 34 deletions src/content/reference/react/lazy.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
---
title: lazy
translators:
- Davont
---

<Intro>

`lazy` lets you defer loading component's code until it is rendered for the first time.
`lazy` 可以让你推迟加载组件的代码,直到它第一次被渲染。
Davont marked this conversation as resolved.
Show resolved Hide resolved

```js
const SomeComponent = lazy(load)
Expand All @@ -16,63 +18,60 @@ 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';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
```

[See more examples below.](#usage)
[请看下面的更多例子。](#usage)
Davont marked this conversation as resolved.
Show resolved Hide resolved
#### 参数 {/*parameters*/}

#### Parameters {/*parameters*/}
* `load`: 一个返回 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) 或另一个 *thenable*(具有 `then` 方法的类 Promise 对象)的函数。在你尝试第一次渲染返回的组件之前,React 是不会调用 load 函数的。在 React 首次调用 `load` 后,它将等待其解析,然后将解析值渲染成 React 组件。返回的 Promise 和 Promise 的解析值都将被缓存,因此 React 不会多次调用 `load` 函数。如果 Promise 被拒绝,则 React 将 `throw` 抛出最近错误边界处理程序的拒绝原因。
Davont marked this conversation as resolved.
Show resolved Hide resolved
Davont marked this conversation as resolved.
Show resolved Hide resolved

* `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.
#### 返回值 {/*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 [`<Suspense>`](/reference/react/Suspense) to display a loading indicator while it's loading.
`lazy` 返回一个 React 组件,您可以在 fiber 树中渲染。当懒加载组件的代码仍在加载时,尝试渲染它将会处于 *暂停* 状态。使用 [`<Suspense>`](/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/en-US/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/en-US/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:
如果想在组件第一次渲染前推迟加载这个组件的代码,请使用以下导入替换:
Davont marked this conversation as resolved.
Show resolved Hide resolved

```js
import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
```
此代码依赖于动态 [动态 `import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import),可能需要你的打包工具或框架提供支持。
Davont marked this conversation as resolved.
Show resolved Hide resolved

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.

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 [`<Suspense>`](/reference/react/Suspense) boundary:
现在你的组件代码可以按需加载,同时你需要指定在它正在加载时应该显示什么。你可以通过将懒加载组件或其任何父级包装到 [`<Suspense>`](/reference/react/Suspense) 边界中来实现:

```js {1,4}
<Suspense fallback={<Loading />}>
Expand All @@ -81,7 +80,7 @@ Now that your component's code loads on demand, you also need to specify what sh
</Suspense>
```

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`。请尝试勾选复选框:

<Sandpack>

Expand Down Expand Up @@ -111,8 +110,7 @@ export default function MarkdownEditor() {
</>
);
}

// Add a fixed delay so you can see the loading state
// 添加一个固定的延迟,以便你可以看到加载状态
Davont marked this conversation as resolved.
Show resolved Hide resolved
function delayForDemo(promise) {
return new Promise(resolve => {
setTimeout(resolve, 2000);
Expand Down Expand Up @@ -175,34 +173,33 @@ body {

</Sandpack>

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”。
Davont marked this conversation as resolved.
Show resolved Hide resolved

[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() {
Expand Down