From 82f563509edf28897f204eaaecc53d96bff3f187 Mon Sep 17 00:00:00 2001 From: YashinaAnastasia <83582926+YashinaAnastasia@users.noreply.github.com> Date: Wed, 3 May 2023 19:55:07 +0300 Subject: [PATCH 1/7] v1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Первый перевод без правок --- src/content/reference/react/lazy.md | 57 ++++++++++++++--------------- 1 file changed, 28 insertions(+), 29 deletions(-) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index ba82d4fe2b..0ecaf7d52e 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -4,8 +4,7 @@ title: lazy -`lazy` lets you defer loading component's code until it is rendered for the first time. - +`lazy` позволяет отложить загрузку кода компонента до его первого рендеринга. ```js const SomeComponent = lazy(load) ``` @@ -16,11 +15,11 @@ const SomeComponent = lazy(load) --- -## Reference {/*reference*/} +## Справочник {/*reference*/} ### `lazy(load)` {/*lazy*/} -Call `lazy` outside your components to declare a lazy-loaded React component: +Чтобы объявить React компонент ленивой загрузки, вызовите `lazy` вне своих компонентов: ```js import { lazy } from 'react'; @@ -28,41 +27,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`: Функция, которая возвращает [Промис](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) или другой *thenable* (объект, в котором определен метод `then`). Вызова `load` не произойдет до тех пор, пока вы не попытайтесь отрендерить возвращенный компонент. После первого вызова `load`, React будет ждать завершения выполнения команды, а затем отрендерит получившиеся значение как React компонент. Все промисы будут кэшированы, `load` больше вызывать не придется. Если промис отклонили, причина этого будет указана в ближайшем Error Boundary. -#### 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 компонент, которые можно отрендерить в вашем дереве. Во время загрузки ленивых компонентов попытки их рендора будут *заморожены.* Используйте [``](/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. +Возвращает [Промис](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) или другой *thenable* (объект, в котором определен метод `then`). В коненом итоге он вернется к действительному 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/ru/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 +69,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/en-US/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) boundary: ```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`. Попробуйте поставить галочку в чекбоксе: @@ -175,34 +174,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() { From d0af1721db34928e7ca9b7e8034a6a6d72e59cda Mon Sep 17 00:00:00 2001 From: YashinaAnastasia <83582926+YashinaAnastasia@users.noreply.github.com> Date: Wed, 3 May 2023 22:26:42 +0300 Subject: [PATCH 2/7] v1.1 --- 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 0ecaf7d52e..46dd921a89 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -31,7 +31,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); #### Параметры {/*parameters*/} -* `load`: Функция, которая возвращает [Промис](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) или другой *thenable* (объект, в котором определен метод `then`). Вызова `load` не произойдет до тех пор, пока вы не попытайтесь отрендерить возвращенный компонент. После первого вызова `load`, React будет ждать завершения выполнения команды, а затем отрендерит получившиеся значение как React компонент. Все промисы будут кэшированы, `load` больше вызывать не придется. Если промис отклонили, причина этого будет указана в ближайшем Error Boundary. +* `load`: Функция, которая возвращает [Промис](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) или другой *thenable* (объект, в котором определен метод `then`). Вызова `load` не произойдет до тех пор, пока вы не попытайтесь отрендерить возвращённый компонент. После первого вызова `load`, React будет ждать завершения выполнения команды, а затем отрендерит разрешённое значение как React компонент. Возвращенный промис и разрешенное значение Промиса будут кэшированы, `load` больше вызывать не придется. Если промис отклонили, причина этого будет указана в ближайшем Error Boundary. #### Возвращаемое значение {/*returns*/} From 113f93150a8cbd833dc9a86b88a542693a977626 Mon Sep 17 00:00:00 2001 From: YashinaAnastasia <83582926+YashinaAnastasia@users.noreply.github.com> Date: Thu, 4 May 2023 15:53:24 +0300 Subject: [PATCH 3/7] =?UTF-8?q?=D1=84=D0=B8=D0=BD=D0=B0=D0=BB=D1=8C=D0=BD?= =?UTF-8?q?=D1=8B=D0=B5=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/reference/react/lazy.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index 46dd921a89..248285209a 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -31,11 +31,11 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); #### Параметры {/*parameters*/} -* `load`: Функция, которая возвращает [Промис](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) или другой *thenable* (объект, в котором определен метод `then`). Вызова `load` не произойдет до тех пор, пока вы не попытайтесь отрендерить возвращённый компонент. После первого вызова `load`, React будет ждать завершения выполнения команды, а затем отрендерит разрешённое значение как React компонент. Возвращенный промис и разрешенное значение Промиса будут кэшированы, `load` больше вызывать не придется. Если промис отклонили, причина этого будет указана в ближайшем Error Boundary. +* `load`: Функция, которая возвращает [Промис](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) или другой *thenable* (объект, в котором определен метод `then`). Вызова `load` не произойдет до тех пор, пока вы не попытайтесь отрендерить возвращённый компонент. После первого вызова `load`, React будет ждать завершения выполнения команды, а затем отрендерит разрешённое значение как React компонент. Возвращённый промис и разрешённое значение Промиса будут кэшированы, `load` больше вызывать не придется. Если промис отклонили, причина этого будет указана в ближайшем Error Boundary. #### Возвращаемое значение {/*returns*/} -`lazy` возвращает React компонент, которые можно отрендерить в вашем дереве. Во время загрузки ленивых компонентов попытки их рендора будут *заморожены.* Используйте [``](/reference/react/Suspense) для отображения индикатора во время загрузки. +`lazy` возвращает React компонент, которые можно отрендерить в вашем дереве. Во время загрузки ленивых компонентов попытки их рендера будут *заморожены.* Используйте [``](/reference/react/Suspense) для отображения индикатора во время загрузки. --- @@ -47,7 +47,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); #### Возвращаемое значение {/*load-returns*/} -Возвращает [Промис](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) или другой *thenable* (объект, в котором определен метод `then`). В коненом итоге он вернется к действительному React компоненту, например к функции, [`memo`](/reference/react/memo), или [`forwardRef`](/reference/react/forwardRef) компоненту. +Возвращает [Промис](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) или другой *thenable* (объект, в котором определен метод `then`). В конечном итоге он вернётся к действительному React компоненту, например к функции, [`memo`](/reference/react/memo), или [`forwardRef`](/reference/react/forwardRef) компоненту. --- @@ -69,7 +69,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) boundary: @@ -80,7 +80,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ``` -Например, код для `MarkdownPreview` не загрузится, пока его не попытаются вызвать. Если `MarkdownPreview` еще не загрузился, на его месте отобразится `Loading`. Попробуйте поставить галочку в чекбоксе: +Например, код для `MarkdownPreview` не загрузится, пока его не попытаются вызвать. Если `MarkdownPreview` ещё не загрузился, на его месте отобразится `Loading`. Попробуйте поставить галочку в чекбоксе: @@ -111,7 +111,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); @@ -174,7 +174,7 @@ body { -Это демо загрузится с искуственной задержкой. В следуйщий раз когда вы снимите и поставите галочку, `Preview` будет закэшировано, загрузки не будет. Чтобы снова увидеть загрузку, нужно нажать "Reset" в сэндбоксе. +Это демо загрузится с искусственной задержкой. В следующий раз когда вы снимите и поставите галочку, `Preview` будет закэшировано, загрузки не будет. Чтобы снова увидеть загрузку, нужно нажать "Reset" в сандбоксе. [Узнать об управлении состояниями загрузки с помощью Suspense.](/reference/react/Suspense) @@ -184,13 +184,13 @@ body { ### Состояние моего `lazy` компонента неожиданно сбрасывается {/*my-lazy-components-state-gets-reset-unexpectedly*/} -Не объявляйте `lazy` компоненты *внтури* других компонентов: +Не объявляйте `lazy` компоненты *внутри* других компонентов: ```js {4-5} import { lazy } from 'react'; function Editor() { - // 🔴 Bad: Все состояния сбросятся при ре-рендере + // 🔴 Плохо: Все состояния сбросятся при ре-рендере const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); // ... } @@ -201,7 +201,7 @@ function Editor() { ```js {3-4} import { lazy } from 'react'; -// ✅ Good: lazy компонент объявлен вне ваших компонентов. +// ✅ Хорошо: lazy компонент объявлен вне ваших компонентов. const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); function Editor() { From d4f5be50d8ad85734883bb1733c4f989a0cd1058 Mon Sep 17 00:00:00 2001 From: YashinaAnastasia <83582926+YashinaAnastasia@users.noreply.github.com> Date: Mon, 22 May 2023 12:11:17 +0300 Subject: [PATCH 4/7] Update src/content/reference/react/lazy.md Co-authored-by: Anton Ahatov --- 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 248285209a..b164aa1cc5 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -19,7 +19,7 @@ const SomeComponent = lazy(load) ### `lazy(load)` {/*lazy*/} -Чтобы объявить React компонент ленивой загрузки, вызовите `lazy` вне своих компонентов: +Вызовите `lazy` вне ваших компонентов, чтобы объявить компонент React с ленивой загрузкой: ```js import { lazy } from 'react'; From c942ad7d26364da4cd690533a4b71c44c61b7993 Mon Sep 17 00:00:00 2001 From: YashinaAnastasia <83582926+YashinaAnastasia@users.noreply.github.com> Date: Mon, 22 May 2023 12:11:28 +0300 Subject: [PATCH 5/7] Update src/content/reference/react/lazy.md Co-authored-by: Anton Ahatov --- 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 b164aa1cc5..4e894a61d1 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -31,7 +31,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); #### Параметры {/*parameters*/} -* `load`: Функция, которая возвращает [Промис](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) или другой *thenable* (объект, в котором определен метод `then`). Вызова `load` не произойдет до тех пор, пока вы не попытайтесь отрендерить возвращённый компонент. После первого вызова `load`, React будет ждать завершения выполнения команды, а затем отрендерит разрешённое значение как React компонент. Возвращённый промис и разрешённое значение Промиса будут кэшированы, `load` больше вызывать не придется. Если промис отклонили, причина этого будет указана в ближайшем Error Boundary. +* `load`: Функция, которая возвращает [Промис](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) или другой *thenable* (объект, в котором определен метод `then`). Вызова `load` не произойдет до тех пор, пока вы не попытаетесь отрендерить возвращённый компонент. После первого вызова `load`, React будет ждать завершения выполнения команды, а затем отрендерит разрешённое значение как React-компонент. Возвращаемый промис и разрешенное значение промиса будут кэшироваться, поэтому React не будет вызывать `load` более одного раза. Если Promise отклоняется, React укажет причину в ближайшем Error Boundary. #### Возвращаемое значение {/*returns*/} From 1f4d2761e7a0c2406a98850650768cb596107ff6 Mon Sep 17 00:00:00 2001 From: YashinaAnastasia <83582926+YashinaAnastasia@users.noreply.github.com> Date: Mon, 22 May 2023 12:11:57 +0300 Subject: [PATCH 6/7] Update src/content/reference/react/lazy.md Co-authored-by: Anton Ahatov --- 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 4e894a61d1..70436132ae 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -71,7 +71,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); Этот код опирается на [динамический `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) который должен поддерживаться вашим бандлером или фреймворком. -Теперь, когда код вашего компонента загружается по запросу, вам также необходимо указать, что должно отображаться во время его загрузки. Это можно сделать путем оборачивания ленивого компонента или его родителя в [``](/reference/react/Suspense) boundary: +Теперь, когда код вашего компонента загружается по запросу, вам также необходимо указать, что должно отображаться во время его загрузки. Это можно сделать путем оборачивания ленивого компонента или его родителя в границы [``](/reference/react/Suspense): ```js {1,4} }> From 3981c451e022aaaa93cc5ed52df5810749d899ce Mon Sep 17 00:00:00 2001 From: YashinaAnastasia <83582926+YashinaAnastasia@users.noreply.github.com> Date: Mon, 22 May 2023 12:13:06 +0300 Subject: [PATCH 7/7] Update src/content/reference/react/lazy.md Co-authored-by: Anton Ahatov --- 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 70436132ae..f1b83828fc 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -35,7 +35,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); #### Возвращаемое значение {/*returns*/} -`lazy` возвращает React компонент, которые можно отрендерить в вашем дереве. Во время загрузки ленивых компонентов попытки их рендера будут *заморожены.* Используйте [``](/reference/react/Suspense) для отображения индикатора во время загрузки. +`lazy` возвращает React-компонент, который можно отрендерить в вашем дереве. Пока код для ленивого компонента все еще загружается, попытка его отрисовки *приостанавливается.* Используйте [``](/reference/react/Suspense) для отображения индикатора загрузки во время загрузки. ---