From 817fab1811588e7f0798e1faf9e39542c11898d4 Mon Sep 17 00:00:00 2001 From: davont Date: Sat, 25 Mar 2023 18:24:39 +0800 Subject: [PATCH 01/13] docs(cn): translate the reference/react/lazy page --- src/content/reference/react/lazy.md | 65 ++++++++++++++--------------- 1 file changed, 31 insertions(+), 34 deletions(-) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index ba82d4fe2b..abf8cd7ef5 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,51 +30,48 @@ import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ``` -[See more examples below.](#usage) +[请看下面的更多例子。](#usage) +#### 参数 {/*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` 抛出最近错误边界处理程序的拒绝原因。 -* `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 [``](/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/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: +如果想在组件第一次渲染前推迟加载这个组件的代码，请使用以下导入替换： ```js import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ``` +此代码依赖于动态 [动态 `import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import)，可能需要你的打包工具或框架提供支持。 -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 [``](/reference/react/Suspense) boundary: +现在你的组件代码可以按需加载，同时你需要指定在它正在加载时应该显示什么。你可以通过将懒加载组件或其任何父级包装到 [``](/reference/react/Suspense) 边界中来实现： ```js {1,4} }> @@ -81,7 +80,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`。请尝试勾选复选框： @@ -111,8 +110,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 +173,33 @@ 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() { From 90d58247008e261afc330cdc569d0280d72e9d6f Mon Sep 17 00:00:00 2001 From: Davont Date: Sun, 26 Mar 2023 12:03:06 +0800 Subject: [PATCH 02/13] Update src/content/reference/react/lazy.md Co-authored-by: Xavi Lee --- src/content/reference/react/lazy.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index abf8cd7ef5..88ab3ae873 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -31,6 +31,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ``` [请看下面的更多例子。](#usage) + #### 参数 {/*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` 抛出最近错误边界处理程序的拒绝原因。 From 1d3ccb3db2d1e9e34542669ac671c109c14683f3 Mon Sep 17 00:00:00 2001 From: Davont Date: Sun, 26 Mar 2023 12:03:24 +0800 Subject: [PATCH 03/13] Update src/content/reference/react/lazy.md Co-authored-by: Xavi Lee --- src/content/reference/react/lazy.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index 88ab3ae873..5ce63a5718 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -34,7 +34,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); #### 参数 {/*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` 抛出最近错误边界处理程序的拒绝原因。 +* `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 将 `throw` 抛出最近错误边界处理程序的拒绝原因。 #### 返回值 {/*returns*/} From 3f47a363b20cb6aa38b750e1f6d47164675b9f3e Mon Sep 17 00:00:00 2001 From: Davont Date: Sun, 26 Mar 2023 12:03:41 +0800 Subject: [PATCH 04/13] Update src/content/reference/react/lazy.md Co-authored-by: Xavi Lee --- src/content/reference/react/lazy.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index 5ce63a5718..63c18ce296 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -70,7 +70,7 @@ import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ``` -此代码依赖于动态 [动态 `import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import)，可能需要你的打包工具或框架提供支持。 +此代码依赖于 [动态 `import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import)，可能需要你的打包工具或框架提供支持。 现在你的组件代码可以按需加载，同时你需要指定在它正在加载时应该显示什么。你可以通过将懒加载组件或其任何父级包装到 [``](/reference/react/Suspense) 边界中来实现： From f31caf39be12a1561bc4d0a8cd4a4160f2812826 Mon Sep 17 00:00:00 2001 From: davont Date: Sun, 26 Mar 2023 12:07:14 +0800 Subject: [PATCH 05/13] docs(cn): translate the reference/react/lazy page --- src/content/reference/react/lazy.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index 63c18ce296..07e4a27b8e 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -34,11 +34,11 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); #### 参数 {/*parameters*/} -* `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 将 `throw` 抛出最近错误边界处理程序的拒绝原因。 +* `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*/} -`lazy` 返回一个 React 组件，您可以在 fiber 树中渲染。当懒加载组件的代码仍在加载时，尝试渲染它将会处于 *暂停* 状态。使用 [``](/reference/react/Suspense) 在其加载时显示一个加载指示器。 +`lazy` 返回一个 React 组件，你可以在 fiber 树中渲染。当懒加载组件的代码仍在加载时，尝试渲染它将会处于 *暂停* 状态。使用 [``](/reference/react/Suspense) 在其加载时显示一个加载指示器。 --- @@ -50,7 +50,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); #### 返回值 {/*load-returns*/} -你需要返回一个 [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) 组件。 +你需要返回一个 [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) 组件。 --- @@ -58,7 +58,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ### 使用 Suspense 实现懒加载组件 {/*suspense-for-code-splitting*/} -通常，您可以使用静态 [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 声明来导入组件： +通常，你可以使用静态 [`import`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import) 声明来导入组件： ```js import MarkdownPreview from './MarkdownPreview.js'; @@ -70,7 +70,7 @@ import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ``` -此代码依赖于 [动态 `import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import)，可能需要你的打包工具或框架提供支持。 +此代码依赖于 [动态 `import()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/import)，可能需要你的打包工具或框架提供支持。 现在你的组件代码可以按需加载，同时你需要指定在它正在加载时应该显示什么。你可以通过将懒加载组件或其任何父级包装到 [``](/reference/react/Suspense) 边界中来实现： From 6d2cc239458391b9f0761700bc9009bdfa390344 Mon Sep 17 00:00:00 2001 From: Davont Date: Sun, 26 Mar 2023 20:14:35 +0800 Subject: [PATCH 06/13] Update src/content/reference/react/lazy.md Co-authored-by: Xavi Lee --- src/content/reference/react/lazy.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index 07e4a27b8e..3e893164bb 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -6,7 +6,7 @@ translators: -`lazy` 可以让你推迟加载组件的代码，直到它第一次被渲染。 +`lazy` 能够让你在组件第一次被渲染之前延迟加载组件的代码。 ```js const SomeComponent = lazy(load) From c462d179ffc12cb2f3d3a3e00b35b454db967768 Mon Sep 17 00:00:00 2001 From: Davont Date: Sun, 26 Mar 2023 20:15:22 +0800 Subject: [PATCH 07/13] Update src/content/reference/react/lazy.md Co-authored-by: Xavi Lee --- src/content/reference/react/lazy.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index 3e893164bb..2bb319093d 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -63,7 +63,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ```js import MarkdownPreview from './MarkdownPreview.js'; ``` -如果想在组件第一次渲染前推迟加载这个组件的代码，请使用以下导入替换： +如果想在组件第一次渲染前延迟加载这个组件的代码，请替换成以下导入方式： ```js import { lazy } from 'react'; From bc45c9f28a1c926427e2a027260edb0ca1feb819 Mon Sep 17 00:00:00 2001 From: Davont Date: Sun, 26 Mar 2023 20:16:00 +0800 Subject: [PATCH 08/13] Update src/content/reference/react/lazy.md Co-authored-by: Xavi Lee --- src/content/reference/react/lazy.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index 2bb319093d..2c1512564e 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -174,7 +174,7 @@ body { -这个示例代码加载时有人工延迟。如果下次你取消选中并重新选中复选框时，`Preview` 将被缓存，因此不会出现加载状态。要再次查看加载状态，请在示例中单击 “Reset”。 +这个示例代码人为地延迟了加载。在你下次取消选中并重新选中复选框时，`Preview` 将被缓存，因此不会出现加载状态。要再次查看加载状态，请在示例中单击“Reset”。 [了解如何使用 Suspense 管理加载状态。](/reference/react/Suspense) From 78442cf25935ea44ea2208e94a12761c1c074a92 Mon Sep 17 00:00:00 2001 From: Davont Date: Sun, 26 Mar 2023 20:16:37 +0800 Subject: [PATCH 09/13] Update src/content/reference/react/lazy.md Co-authored-by: Xavi Lee --- src/content/reference/react/lazy.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index 2c1512564e..7d3de4915f 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -111,7 +111,8 @@ export default function MarkdownEditor() { ); } -// 添加一个固定的延迟，以便你可以看到加载状态 + +// 添加一个固定的延迟时间，以便你可以看到加载状态 function delayForDemo(promise) { return new Promise(resolve => { setTimeout(resolve, 2000); From 1d915bb24ba02e823f035e769f6d6a06255e395b Mon Sep 17 00:00:00 2001 From: Davont Date: Sun, 26 Mar 2023 20:17:07 +0800 Subject: [PATCH 10/13] Update src/content/reference/react/lazy.md Co-authored-by: Xavi Lee --- src/content/reference/react/lazy.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index 7d3de4915f..9b73fbecfb 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -38,7 +38,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); #### 返回值 {/*returns*/} -`lazy` 返回一个 React 组件，你可以在 fiber 树中渲染。当懒加载组件的代码仍在加载时，尝试渲染它将会处于 *暂停* 状态。使用 [``](/reference/react/Suspense) 在其加载时显示一个加载指示器。 +`lazy` 返回一个 React 组件，你可以在 fiber 树中渲染。当懒加载组件的代码仍在加载时，尝试渲染它将会处于 *暂停* 状态。使用 [``](/reference/react/Suspense) 可以在其加载时显示一个正在加载的提示。 --- From d4a43e475b4543a1c0312808e5dc7342d4761de2 Mon Sep 17 00:00:00 2001 From: Xavi Lee Date: Mon, 27 Mar 2023 22:19:44 +0800 Subject: [PATCH 11/13] Update src/content/reference/react/lazy.md --- src/content/reference/react/lazy.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index 9b73fbecfb..f1b14e3f24 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -63,6 +63,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ```js import MarkdownPreview from './MarkdownPreview.js'; ``` + 如果想在组件第一次渲染前延迟加载这个组件的代码，请替换成以下导入方式： ```js From e4c397476065c0c4b5fc80d57de0a79a4ff32888 Mon Sep 17 00:00:00 2001 From: Davont Date: Tue, 28 Mar 2023 09:16:46 +0800 Subject: [PATCH 12/13] Update src/content/reference/react/lazy.md Co-authored-by: Xavi Lee --- src/content/reference/react/lazy.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index f1b14e3f24..4e1eb942e6 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -71,6 +71,7 @@ import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ``` + 此代码依赖于 [动态 `import()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/import)，可能需要你的打包工具或框架提供支持。 现在你的组件代码可以按需加载，同时你需要指定在它正在加载时应该显示什么。你可以通过将懒加载组件或其任何父级包装到 [``](/reference/react/Suspense) 边界中来实现： From 243ed4c59af639d3c3f65125e79e7797aadc1548 Mon Sep 17 00:00:00 2001 From: davont Date: Tue, 28 Mar 2023 10:35:37 +0800 Subject: [PATCH 13/13] docs(cn): translate the reference/react/lazy page --- src/content/reference/react/lazy.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index 4e1eb942e6..dc40771d6b 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -198,6 +198,7 @@ function Editor() { // ... } ``` + 相反，总是在模块的顶层声明它们： ```js {3-4}