From 222932791418688726c21e712408dacc5618b286 Mon Sep 17 00:00:00 2001 From: AlLevykin Date: Sat, 23 Nov 2019 06:25:33 +0500 Subject: [PATCH 01/31] Translate Concurrent Mode API Reference --- content/docs/concurrent-mode-reference.md | 117 ++++++++++++---------- 1 file changed, 64 insertions(+), 53 deletions(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 81f333811..a9e8c745a 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -1,30 +1,41 @@ --- id: concurrent-mode-reference -title: Concurrent Mode API Reference (Experimental) +title: Справочник API конкурентного режима (экспериментально) permalink: docs/concurrent-mode-reference.html prev: concurrent-mode-adoption.html --- ->Caution: + + +
+ +>Внимание: > ->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React. +>На странице описаны **экспериментальные функции, которых еще нет в стабильной версии**. Не используйте экспериментальные сборки React в продакшен-приложениях. Эти функции могут значительно измениться без предупреждения перед тем, как попасть в React. > ->This documentation is aimed at early adopters and people who are curious. If you're new to React, don't worry about these features -- you don't need to learn them right now. +>Эта документация предназначена для ранних пользователей и интересующихся. Если вы новичок в React, не беспокойтесь об этих возможностях -- вам не нужно изучать их прямо сейчас. -This page is an API reference for the React [Concurrent Mode](/docs/concurrent-mode-intro.html). If you're looking for a guided introduction instead, check out [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html). +
-**Note: This is a Community Preview and not the final stable version. There will likely be future changes to these APIs. Use at your own risk!** +Страница содержит справочник API [конкурентного режима](/docs/concurrent-mode-intro.html) React. Если вам нужно вводное руководство по этому режиму, прочитайте о [паттернах конкурентного UI](/docs/concurrent-mode-patterns.html). -- [Enabling Concurrent Mode](#concurrent-mode) +**Примечание: это не стабильный релиз, а предварительная версия для комьюнити. Скорее всего, в будущем API изменится. Используйте его на свой страх и риск!** + +- [Включение конкурентного режима](#concurrent-mode) - [`createRoot`](#createroot) - [`createBlockingRoot`](#createblockingroot) -- [Suspense](#suspense) +- [API задержек](#suspense) - [`Suspense`](#suspensecomponent) - [`SuspenseList`](#suspenselist) - [`useTransition`](#usetransition) - [`useDeferredValue`](#usedeferredvalue) -## Enabling Concurrent Mode {#concurrent-mode} +## Включение конкурентного режима {#concurrent-mode} ### `createRoot` {#createroot} @@ -32,9 +43,9 @@ This page is an API reference for the React [Concurrent Mode](/docs/concurrent-m ReactDOM.createRoot(rootNode).render(); ``` -Replaces `ReactDOM.render(, rootNode)` and enables Concurrent Mode. +Чтобы включить конкурентный режим, замените `ReactDOM.render(, rootNode)` приведённым выше кодом. -For more information on Concurrent Mode, check out the [Concurrent Mode documentation.](/docs/concurrent-mode-intro.html) +Дополнительную информацию можно узнать в [документации конкурентного режима](/docs/concurrent-mode-intro.html). ### `createBlockingRoot` {#createblockingroot} @@ -42,13 +53,13 @@ For more information on Concurrent Mode, check out the [Concurrent Mode document ReactDOM.createBlockingRoot(rootNode).render() ``` -Replaces `ReactDOM.render(, rootNode)` and enables [Blocking Mode](/docs/concurrent-mode-adoption.html#migration-step-blocking-mode). +Чтобы включить [блокирующий режим](/docs/concurrent-mode-adoption.html#migration-step-blocking-mode), замените `ReactDOM.render(, rootNode)` приведённым выше кодом. -Opting into Concurrent Mode introduces semantic changes to how React works. This means that you can't use Concurrent Mode in just a few components. Because of this, some apps may not be able to migrate directly to Concurrent Mode. +Для реализации конкурентного режима решено сделать семантические изменения в работе React. Это значит, что вы не сможете использовать конкурентный режим лишь для некоторых компонентов проекта. Следовательно, не все приложения возможно сразу перевести на конкурентный режим. -Blocking Mode only contains a small subset of Concurrent Mode features and is intended as an intermediary migration step for apps that are unable to migrate directly. +Блокирующий режим содержит небольшую часть возможностей конкурентного режима. Он предназначен в качестве промежуточного этапа для приложений, которые нельзя мигрировать напрямую. -## Suspense API {#suspense} +## API задержек {#suspense} ### `Suspense` {#suspensecomponent} @@ -59,13 +70,13 @@ Blocking Mode only contains a small subset of Concurrent Mode features and is in ``` -`Suspense` lets your components "wait" for something before they can render, showing a fallback while waiting. +`Suspense` даёт возможность вашим компонентам "ждать", отображая запасное состояние, прежде чем они будут отрендерены. -In this example, `ProfileDetails` is waiting for an asynchronous API call to fetch some data. While we wait for `ProfileDetails` and `ProfilePhoto`, we will show the `Loading...` fallback instead. It is important to note that until all children inside `` has loaded, we will continue to show the fallback. +В примере `ProfileDetails` получают данные с помощью асинхронного вызова. Во время ожидания загрузки `ProfileDetails` и `ProfilePhoto`, отображается запасной заголовок `Loading...`. Важно отметить, что до тех пор, пока все дочерние компоненты `` не отрендерены, мы будем видеть запасное состояние. -`Suspense` takes two props: -* **fallback** takes a loading indicator. The fallback is shown until all of the children of the `Suspense` component have finished rendering. -* **unstable_avoidThisFallback** takes a boolean. It tells React whether to "skip" revealing this boundary during the initial load. This API will likely be removed in a future release. +У `Suspense` два пропса: +* **fallback** принимает запасное состояние, например, индикатор загрузки. Запасное состояние отображается до тех пор, пока не завершится рендеринг всех дочерних компонентов `Suspense`. +* **unstable_avoidThisFallback** принимает логическое значение, которое говорит, что не нужно отображать запасное состояние при первоначальной загрузке. Скорее всего, этот API будет исключён в будущих релизах. ### `` {#suspenselist} @@ -84,19 +95,19 @@ In this example, `ProfileDetails` is waiting for an asynchronous API call to fet ``` -`SuspenseList` helps coordinate many components that can suspend by orchestrating the order in which these components are revealed to the user. +`SuspenseList` помогает скоординировать загрузку множества компонентов с помощью определения порядка, в котором они будут показываться пользователю. -When multiple components need to fetch data, this data may arrive in an unpredictable order. However, if you wrap these items in a `SuspenseList`, React will not show an item in the list until previous items have been displayed (this behavior is adjustable). +Например, бывают ситуации, когда нескольким компонентам требуется получить данные, последовательность загрузки которых нельзя предсказать заранее. Если обернуть такие компоненты в `SuspenseList`, то React не покажет компонент из списка до тех пор, пока не будет отображён предыдущий. При этом поведением компонентов можно управлять. -`SuspenseList` takes two props: -* **revealOrder (forwards, backwards, together)** defines the order in which the `SuspenseList` children should be revealed. - * `together` reveals *all* of them when they're ready instead of one by one. -* **tail (collapsed, hidden)** dictates how unloaded items in a `SuspenseList` is shown. - * By default, `SuspenseList` will show all fallbacks in the list. - * `collapsed` shows only the next fallback in the list. - * `hidden` doesn't show any unloaded items. +У `SuspenseList` два пропса: +* **revealOrder (forwards, backwards, together)** определяет последовательность, в которой отображаются дочерние компоненты `SuspenseList`. + * `together` позволяет отобразить *все* компоненты одновременно вместо того, чтобы показывать их последовательно. +* **tail (collapsed, hidden)** определяет, как отображаются компоненты из `SuspenseList`, которые ещё не загружены. + * По умолчанию, `SuspenseList` отображает запасные состояния для всех компонентов в списке. + * `collapsed` показывает запасное состояние только для компонента, который будет загружен следующим. + * `hidden` не показывает компоненты, которые ещё не загружены. -Note that `SuspenseList` only operates on the closest `Suspense` and `SuspenseList` components below it. It does not search for boundaries deeper than one level. However, it is possible to nest multiple `SuspenseList` components in each other to build grids. +Учтите, что `SuspenseList` управляет только ближайшими вложенными компонентами `Suspense` и `SuspenseList`. Поиск осуществляеется не более, чем на один уровень вниз, но при этом можно делать многоуровневые вложения `SuspenseList` для построения более сложной разметки. ### `useTransition` {#usetransition} @@ -106,13 +117,14 @@ const SUSPENSE_CONFIG = { timeoutMs: 2000 }; const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG); ``` -`useTransition` allows components to avoid undesirable loading states by waiting for content to load before **transitioning to the next screen**. It also allows components to defer slower, data fetching updates until subsequent renders so that more crucial updates can be rendered immediately. +`useTransition` позволяет не отображать состояние загрузки, когда контент обновляется перед **переходом к следующему экрану**. Кроме этого, компоненты могут ожидать обновления в промежуточном состоянии при медленной загрузке данных до тех пор, пока нужный контент не сможет быть отрендерен. + +Хук `useTransition` возвращает массив из двух элементов. -The `useTransition` hook returns two values in an array. -* `startTransition` is a function that takes a callback. We can use it to tell React which state we want to defer. -* `isPending` is a boolean. It's React's way of informing us whether we're waiting for the transition to finish. +* `startTransition` -- это функция, которая получает колбэк. Её используют, чтобы сообщить React какое состояние нам нужно получить. +* `isPending` -- это логическое значение, которое позволяет React проинформировать нас, ожидаем ли мы в данный момент окончания загрузки. -**If some state update causes a component to suspend, that state update should be wrapped in a transition.** +**Если обновление состояния компонента является причиной задержки, то его нужно обернуть по паттерну перехода.** ```js const SUSPENSE_CONFIG = {timeoutMs: 2000 }; @@ -142,22 +154,21 @@ function App() { } ``` -In this code, we've wrapped our data fetching with `startTransition`. This allows us to start fetching the profile data right away, while deferring the render of the next profile page and its associated `Spinner` for 2 seconds (the time shown in `timeoutMs`). +В этом примере мы обернули получение данных в функцию `startTransition`. Благодаря чему мы можем запустить загрузку данных профиля пользователя, а во время ожидания рендеренга страницы, если загрузка займёт больше двух секунд, будем показывать компонент `Spinner`. Время ожидания до появления спиннера задаётся с помощью `timeoutMs`. -The `isPending` boolean lets React know that our component is transitioning, so we are able to let the user know this by showing some loading text on the previous profile page. +Логическое значение `isPending` показывает, что наш компонент в состоянии перехода. Это позволяет, находясь на предыдущем экране, показать пользователю сообщение о загрузке. -**For an in-depth look at transitions, you can read [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html#transitions).** +**Паттерн перехода более подробно рассматривается в разделе [Паттерны конкурентного UI](/docs/concurrent-mode-patterns.html#transitions).** -#### useTransition Config {#usetransition-config} +#### Конфигурирование useTransition {#usetransition-config} ```js const SUSPENSE_CONFIG = { timeoutMs: 2000 }; ``` -`useTransition` accepts an **optional Suspense Config** with a `timeoutMs`. This timeout (in milliseconds) tells React how long to wait before showing the next state (the new Profile Page in the above example). - -**Note: We recommend that you share Suspense Config between different modules.** +Хук `useTransition` принимает **объект настройки задержек** со свойством `timeoutMs`. Этот таймаут, заданный в миллисекундах, указывает React сколько времени нужно ждать появления следующего состояния, например, как это было сделано в программе выше. +**Примечание: мы рекомендуем делать объект настройки задержек глобальным для всех модулей проекта.** ### `useDeferredValue` {#usedeferredvalue} @@ -165,39 +176,39 @@ const SUSPENSE_CONFIG = { timeoutMs: 2000 }; const deferredValue = useDeferredValue(value, { timeoutMs: 2000 }); ``` -Returns a deferred version of the value that may "lag behind" it for at most `timeoutMs`. +Возвращает значение ожидания, которое реализует поведение компонента при "зависаниях", если задержка более чем `timeoutMs` миллисекунд. -This is commonly used to keep the interface responsive when you have something that renders immediately based on user input and something that needs to wait for a data fetch. +`useDeferredValue` обычно используется для создания отзывчивого интерфейса, когда нужно что-то отрендерить на основе пользовательского ввода и при этом требуется ожидать загрузки данных. -A good example of this is a text input. +Хорошим примером является ввод текста. ```js function App() { const [text, setText] = useState("hello"); - const deferredText = useDeferredValue(text, {timeoutMs: 2000 }); + const deferredText = useDeferredValue(text, {timeoutMs: 2000 }); return (
- {/* Keep passing the current text to the input */} + {/* При вводе текста ... */} ... - {/* But the list is allowed to "lag behind" when necessary */} + {/* ... в случае "зависания" можно показать список со значением ожидания */}
); } ``` -This allows us to start showing the new text for the `input` immediately, which allows the webpage to feel responsive. Meanwhile, `MySlowList` "lag behind" for up to 2 seconds according to the `timeoutMs` before updating, allowing it to render with the current text in the background. +`useDeferredValue` позволяет моментально начать показывать новый текст `input`, что делает страницу отзывчивой. При "зависаниях" более двух секунд, указанных в `timeoutMs`, отображается `MySlowList`. -**For an in-depth look at deferring values, you can read [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html#deferring-a-value).** +**Подробно значения ожидания описаны в разделе [Паттерны конкурентного UI](/docs/concurrent-mode-patterns.html#deferring-a-value).** -#### useDeferredValue Config {#usedeferredvalue-config} +#### Конфигурирование useDeferredValue {#usedeferredvalue-config} ```js const SUSPENSE_CONFIG = { timeoutMs: 2000 }; ``` -`useDeferredValue` accepts an **optional Suspense Config** with a `timeoutMs`. This timeout (in milliseconds) tells React how long the deferred value is allowed to lag behind. +`useDeferredValue` принимает **объект настройки задержек** со свойством `timeoutMs`. Этот таймаут, заданный в миллисекундах, указывает React сколько времени нужно показывать значение ожидания при "зависаниях". -React will always try to use a shorter lag when network and device allows it. +React постоянно пытается сократить "зависания", возникающие из-за сети или железа. From a57f6c91de192272c0bd6dbe3abe917082e01ab2 Mon Sep 17 00:00:00 2001 From: AlLevykin Date: Sat, 1 Feb 2020 11:07:55 +0500 Subject: [PATCH 02/31] Translate Concurrent Mode API Reference --- content/docs/concurrent-mode-reference.md | 6 +++--- content/docs/nav.yml | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 055a2cda4..3bcf0f0ec 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -55,7 +55,7 @@ ReactDOM.createBlockingRoot(rootNode).render() Чтобы включить [блокирующий режим](/docs/concurrent-mode-adoption.html#migration-step-blocking-mode), замените `ReactDOM.render(, rootNode)` приведённым выше кодом. -Для реализации конкурентного режима решено сделать семантические изменения в работе React. Это значит, что вы не сможете использовать конкурентный режим лишь для некоторых компонентов проекта. Следовательно, не все приложения возможно сразу перевести на конкурентный режим. +Для реализации конкурентного режима решено сделать семантические изменения в работе React. Это значит, что вы не сможете использовать конкурентный режим лишь для некоторых компонентов проекта. И как следствие, не все приложения можно будет напрямую перевести на конкурентный режим. Блокирующий режим содержит небольшую часть возможностей конкурентного режима. Он предназначен в качестве промежуточного этапа для приложений, которые нельзя мигрировать напрямую. @@ -201,7 +201,7 @@ function App() { `useDeferredValue` позволяет моментально начать показывать новый текст `input`, что делает страницу отзывчивой. При "зависаниях" более двух секунд, указанных в `timeoutMs`, отображается `MySlowList`. -**Подробно значения ожидания описаны в разделе [Паттерны конкурентного UI](/docs/concurrent-mode-patterns.html#deferring-a-value).** +**Паттерн ожидания значений более подробно рассматривается в разделе [Паттерны конкурентного UI](/docs/concurrent-mode-patterns.html#deferring-a-value).** #### Конфигурирование useDeferredValue {#usedeferredvalue-config} @@ -211,4 +211,4 @@ const SUSPENSE_CONFIG = { timeoutMs: 2000 }; `useDeferredValue` принимает **объект настройки задержек** со свойством `timeoutMs`. Этот таймаут, заданный в миллисекундах, указывает React сколько времени нужно показывать значение ожидания при "зависаниях". -React постоянно пытается сократить "зависания", возникающие из-за сети или железа. +React постоянно пытается сгладить "зависания", возникающие из-за сети или железа. diff --git a/content/docs/nav.yml b/content/docs/nav.yml index ee335fe48..cac9a5601 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -147,7 +147,7 @@ - id: concurrent-mode-adoption title: Использование конкурентного режима - id: concurrent-mode-reference - title: Concurrent Mode API Reference + title: Справочник API конкурентного режима - title: Участие в проекте items: - id: how-to-contribute From ac3a8a76c76b40506fe3acfcbdac62bbfeed5931 Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sat, 1 Feb 2020 21:00:14 +0500 Subject: [PATCH 03/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Anton Ahatov --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 3bcf0f0ec..7c02a306e 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -74,7 +74,7 @@ ReactDOM.createBlockingRoot(rootNode).render() В примере `ProfileDetails` получают данные с помощью асинхронного вызова. Во время ожидания загрузки `ProfileDetails` и `ProfilePhoto`, отображается запасной заголовок `Loading...`. Важно отметить, что до тех пор, пока все дочерние компоненты `` не отрендерены, мы будем видеть запасное состояние. -У `Suspense` два пропса: +`Suspense` принимает два пропса: * **fallback** принимает запасное состояние, например, индикатор загрузки. Запасное состояние отображается до тех пор, пока не завершится рендеринг всех дочерних компонентов `Suspense`. * **unstable_avoidThisFallback** принимает логическое значение, которое говорит, что не нужно отображать запасное состояние при первоначальной загрузке. Скорее всего, этот API будет исключён в будущих релизах. From eefd6590fa4c6aef7aa2bef8170ced66e64a749c Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sat, 1 Feb 2020 21:01:34 +0500 Subject: [PATCH 04/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Anton Ahatov --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 7c02a306e..0a9e45b05 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -75,7 +75,7 @@ ReactDOM.createBlockingRoot(rootNode).render() В примере `ProfileDetails` получают данные с помощью асинхронного вызова. Во время ожидания загрузки `ProfileDetails` и `ProfilePhoto`, отображается запасной заголовок `Loading...`. Важно отметить, что до тех пор, пока все дочерние компоненты `` не отрендерены, мы будем видеть запасное состояние. `Suspense` принимает два пропса: -* **fallback** принимает запасное состояние, например, индикатор загрузки. Запасное состояние отображается до тех пор, пока не завершится рендеринг всех дочерних компонентов `Suspense`. +* **fallback** принимает индикатор загрузки. Запасное состояние отображается до тех пор, пока не завершится рендер всех дочерних компонентов `Suspense`. * **unstable_avoidThisFallback** принимает логическое значение, которое говорит, что не нужно отображать запасное состояние при первоначальной загрузке. Скорее всего, этот API будет исключён в будущих релизах. ### `` {#suspenselist} From 2270a7c0dc27643dce47c6ca5ba35561cbbacea0 Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sat, 1 Feb 2020 21:02:27 +0500 Subject: [PATCH 05/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Anton Ahatov --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 0a9e45b05..a1621c538 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -76,7 +76,7 @@ ReactDOM.createBlockingRoot(rootNode).render() `Suspense` принимает два пропса: * **fallback** принимает индикатор загрузки. Запасное состояние отображается до тех пор, пока не завершится рендер всех дочерних компонентов `Suspense`. -* **unstable_avoidThisFallback** принимает логическое значение, которое говорит, что не нужно отображать запасное состояние при первоначальной загрузке. Скорее всего, этот API будет исключён в будущих релизах. +* **unstable_avoidThisFallback** принимает логическое значение. Оно сообщает React, что не нужно отображать запасное состояние при первоначальной загрузке. Скорее всего, этот API будет исключён в будущих релизах. ### `` {#suspenselist} From 25c13259cca8a1806636d125c8554932e0347430 Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sat, 1 Feb 2020 21:02:59 +0500 Subject: [PATCH 06/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Anton Ahatov --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index a1621c538..f3205d95d 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -53,7 +53,7 @@ ReactDOM.createRoot(rootNode).render(); ReactDOM.createBlockingRoot(rootNode).render() ``` -Чтобы включить [блокирующий режим](/docs/concurrent-mode-adoption.html#migration-step-blocking-mode), замените `ReactDOM.render(, rootNode)` приведённым выше кодом. +Заменяет `ReactDOM.render(, rootNode)` и включает [блокирующий режим](/docs/concurrent-mode-adoption.html#migration-step-blocking-mode). Для реализации конкурентного режима решено сделать семантические изменения в работе React. Это значит, что вы не сможете использовать конкурентный режим лишь для некоторых компонентов проекта. И как следствие, не все приложения можно будет напрямую перевести на конкурентный режим. From 2b2a2c109ebd2a7940adcae8026e1cc8f95b5ff6 Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sat, 1 Feb 2020 21:03:07 +0500 Subject: [PATCH 07/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Anton Ahatov --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index f3205d95d..1f38a406f 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -43,7 +43,7 @@ prev: concurrent-mode-adoption.html ReactDOM.createRoot(rootNode).render(); ``` -Чтобы включить конкурентный режим, замените `ReactDOM.render(, rootNode)` приведённым выше кодом. +Заменяет `ReactDOM.render(, rootNode)` и включает конкурентный режим. Дополнительную информацию можно узнать в [документации конкурентного режима](/docs/concurrent-mode-intro.html). From 95b54eeb4d0e245a296bc885b9ee1eccfbe49d8e Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sat, 1 Feb 2020 21:04:35 +0500 Subject: [PATCH 08/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Anton Ahatov --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 1f38a406f..5c29847d1 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -97,7 +97,7 @@ ReactDOM.createBlockingRoot(rootNode).render() `SuspenseList` помогает скоординировать загрузку множества компонентов с помощью определения порядка, в котором они будут показываться пользователю. -Например, бывают ситуации, когда нескольким компонентам требуется получить данные, последовательность загрузки которых нельзя предсказать заранее. Если обернуть такие компоненты в `SuspenseList`, то React не покажет компонент из списка до тех пор, пока не будет отображён предыдущий. При этом поведением компонентов можно управлять. +Бывают ситуации, когда нескольким компонентам требуется получить данные, последовательность загрузки которых нельзя предсказать заранее. Если обернуть такие компоненты в `SuspenseList`, то React не покажет компонент из списка до тех пор, пока не будет отображён предыдущий (этим поведением можно управлять). У `SuspenseList` два пропса: * **revealOrder (forwards, backwards, together)** определяет последовательность, в которой отображаются дочерние компоненты `SuspenseList`. From 6f87b4b696e4e42f470d48389c9918b7e07e5aa3 Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sat, 1 Feb 2020 21:04:49 +0500 Subject: [PATCH 09/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Anton Ahatov --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 5c29847d1..8a19db613 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -99,7 +99,7 @@ ReactDOM.createBlockingRoot(rootNode).render() Бывают ситуации, когда нескольким компонентам требуется получить данные, последовательность загрузки которых нельзя предсказать заранее. Если обернуть такие компоненты в `SuspenseList`, то React не покажет компонент из списка до тех пор, пока не будет отображён предыдущий (этим поведением можно управлять). -У `SuspenseList` два пропса: +`SuspenseList` принимает два пропса: * **revealOrder (forwards, backwards, together)** определяет последовательность, в которой отображаются дочерние компоненты `SuspenseList`. * `together` позволяет отобразить *все* компоненты одновременно вместо того, чтобы показывать их последовательно. * **tail (collapsed, hidden)** определяет, как отображаются компоненты из `SuspenseList`, которые ещё не загружены. From 3222962203b1a655d8c65983bd0580f837197665 Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sat, 1 Feb 2020 21:14:09 +0500 Subject: [PATCH 10/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Anton Ahatov --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 8a19db613..274483d78 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -121,7 +121,7 @@ const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG); Хук `useTransition` возвращает массив из двух элементов. -* `startTransition` -- это функция, которая получает колбэк. Её используют, чтобы сообщить React какое состояние нам нужно получить. +* `startTransition` -- это функция, которая получает колбэк. Её используют, чтобы сообщить React какое состояние нам нужно отложить. * `isPending` -- это логическое значение, которое позволяет React проинформировать нас, ожидаем ли мы в данный момент окончания загрузки. **Если обновление состояния компонента является причиной задержки, то его нужно обернуть по паттерну перехода.** From 6193a25c570e2588d4543170a41f4baf89b103ad Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sat, 1 Feb 2020 21:17:26 +0500 Subject: [PATCH 11/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Anton Ahatov --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 274483d78..b645d717b 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -122,7 +122,7 @@ const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG); Хук `useTransition` возвращает массив из двух элементов. * `startTransition` -- это функция, которая получает колбэк. Её используют, чтобы сообщить React какое состояние нам нужно отложить. -* `isPending` -- это логическое значение, которое позволяет React проинформировать нас, ожидаем ли мы в данный момент окончания загрузки. +* `isPending` -- это логическое значение, которое позволяет React проинформировать нас, ожидаем ли мы в данный момент окончания перехода. **Если обновление состояния компонента является причиной задержки, то его нужно обернуть по паттерну перехода.** From e694e2e223ae73b7b660c17e7293b0d4f59e9c1e Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sat, 1 Feb 2020 21:20:06 +0500 Subject: [PATCH 12/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Anton Ahatov --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index b645d717b..5b53d1d2e 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -178,7 +178,7 @@ const deferredValue = useDeferredValue(value, { timeoutMs: 2000 }); Возвращает значение ожидания, которое реализует поведение компонента при "зависаниях", если задержка более чем `timeoutMs` миллисекунд. -`useDeferredValue` обычно используется для создания отзывчивого интерфейса, когда нужно что-то отрендерить на основе пользовательского ввода и при этом требуется ожидать загрузки данных. +Это обычно используется для создания отзывчивого интерфейса, когда нужно что-то немедленно отрендерить на основе пользовательского ввода и что-то при этом ожидает загрузки данных. Хорошим примером является ввод текста. From c7873670fb000e5efd1716e4afb57a3ae6af8c57 Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sat, 1 Feb 2020 21:22:57 +0500 Subject: [PATCH 13/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Anton Ahatov --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 5b53d1d2e..abfc5051b 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -211,4 +211,4 @@ const SUSPENSE_CONFIG = { timeoutMs: 2000 }; `useDeferredValue` принимает **объект настройки задержек** со свойством `timeoutMs`. Этот таймаут, заданный в миллисекундах, указывает React сколько времени нужно показывать значение ожидания при "зависаниях". -React постоянно пытается сгладить "зависания", возникающие из-за сети или железа. +React будет пытаться использовать более короткую задержку, когда сеть и устройство это позволяют. From 8bc1b3b6a094a25f75c55b5cea4e9c84e9dd8edb Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sat, 1 Feb 2020 21:24:14 +0500 Subject: [PATCH 14/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Anton Ahatov --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index abfc5051b..8f859f169 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -209,6 +209,6 @@ function App() { const SUSPENSE_CONFIG = { timeoutMs: 2000 }; ``` -`useDeferredValue` принимает **объект настройки задержек** со свойством `timeoutMs`. Этот таймаут, заданный в миллисекундах, указывает React сколько времени нужно показывать значение ожидания при "зависаниях". +`useDeferredValue` принимает **объект настройки задержек** со свойством `timeoutMs`. Этот таймаут (в миллисекундах) сообщает React, на сколько долго отложенное значение может отставать. React будет пытаться использовать более короткую задержку, когда сеть и устройство это позволяют. From f0ce2eed353cfd27432e37d72137974e834f38de Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sat, 1 Feb 2020 21:24:39 +0500 Subject: [PATCH 15/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Anton Ahatov --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 8f859f169..75a18c441 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -199,7 +199,7 @@ function App() { } ``` -`useDeferredValue` позволяет моментально начать показывать новый текст `input`, что делает страницу отзывчивой. При "зависаниях" более двух секунд, указанных в `timeoutMs`, отображается `MySlowList`. +Это позволяет нам немедленно начать отображать новый текст для `input`, что позволяет странице чувствовать себя отзывчивой. Между тем, `MySlowList` "отстает" на 2 секунды в соответствии с` timeoutMs` перед обновлением, что позволяет выполнять рендеринг с текущим текстом в фоновом режиме.``` **Паттерн ожидания значений более подробно рассматривается в разделе [Паттерны конкурентного UI](/docs/concurrent-mode-patterns.html#deferring-a-value).** From 83de61c71c2e724ba226084e361e9e6351eeeab3 Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sat, 1 Feb 2020 21:25:06 +0500 Subject: [PATCH 16/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Anton Ahatov --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 75a18c441..c8f783a68 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -176,7 +176,7 @@ const SUSPENSE_CONFIG = { timeoutMs: 2000 }; const deferredValue = useDeferredValue(value, { timeoutMs: 2000 }); ``` -Возвращает значение ожидания, которое реализует поведение компонента при "зависаниях", если задержка более чем `timeoutMs` миллисекунд. +Возвращает отложенную версию значения, которое может «отставать» от него не более чем на `timeoutMs`. Это обычно используется для создания отзывчивого интерфейса, когда нужно что-то немедленно отрендерить на основе пользовательского ввода и что-то при этом ожидает загрузки данных. From 8cf7de52f200a1f01c784efb90d5cb85dbb84e21 Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sat, 1 Feb 2020 21:25:46 +0500 Subject: [PATCH 17/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Anton Ahatov --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index c8f783a68..e543c1240 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -154,7 +154,7 @@ function App() { } ``` -В этом примере мы обернули получение данных в функцию `startTransition`. Благодаря чему мы можем запустить загрузку данных профиля пользователя, а во время ожидания рендеренга страницы, если загрузка займёт больше двух секунд, будем показывать компонент `Spinner`. Время ожидания до появления спиннера задаётся с помощью `timeoutMs`. +В этом примере мы обернули получение данных в функцию `startTransition`. Это позволяет сразу загружать данные профиля пользователя, откладывая рендер страницы и компонента `Spinner` на 2 секунды (время указано в `timeoutMs`). Логическое значение `isPending` показывает, что наш компонент в состоянии перехода. Это позволяет, находясь на предыдущем экране, показать пользователю сообщение о загрузке. From add60af88bf03b9414a530edec38241968730e00 Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sat, 1 Feb 2020 21:26:31 +0500 Subject: [PATCH 18/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Anton Ahatov --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index e543c1240..ee8756813 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -117,7 +117,7 @@ const SUSPENSE_CONFIG = { timeoutMs: 2000 }; const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG); ``` -`useTransition` позволяет не отображать состояние загрузки, когда контент обновляется перед **переходом к следующему экрану**. Кроме этого, компоненты могут ожидать обновления в промежуточном состоянии при медленной загрузке данных до тех пор, пока нужный контент не сможет быть отрендерен. +`useTransition` позволяет не отображать состояние загрузки, когда контент обновляется перед **переходом к следующему экрану**. Это также позволяет компонентам так откладывать более медленные обновления выборки данных до последующих рендеров, что более важные обновления могут быть выполнены немедленно. Хук `useTransition` возвращает массив из двух элементов. From 9b2219f2f59b43505c5302eac2de2f195064e045 Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sat, 1 Feb 2020 21:27:13 +0500 Subject: [PATCH 19/31] Update concurrent-mode-reference.md --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index ee8756813..41c58a941 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -117,7 +117,7 @@ const SUSPENSE_CONFIG = { timeoutMs: 2000 }; const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG); ``` -`useTransition` позволяет не отображать состояние загрузки, когда контент обновляется перед **переходом к следующему экрану**. Это также позволяет компонентам так откладывать более медленные обновления выборки данных до последующих рендеров, что более важные обновления могут быть выполнены немедленно. +`useTransition` позволяет не отображать состояние загрузки, когда контент обновляется перед **переходом к следующему экрану**. Это также позволяет компонентам так откладывать более медленные обновления выборки данных до последующих рендеров, что более важные обновления могут быть выполнены немедленно. Хук `useTransition` возвращает массив из двух элементов. From 0fa9a01e9fcb2ba3f7ee0fc57f24de35b997e012 Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sun, 2 Feb 2020 10:04:55 +0500 Subject: [PATCH 20/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Alexey Pyltsyn --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 41c58a941..72a69b5b8 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -24,7 +24,7 @@ prev: concurrent-mode-adoption.html Страница содержит справочник API [конкурентного режима](/docs/concurrent-mode-intro.html) React. Если вам нужно вводное руководство по этому режиму, прочитайте о [паттернах конкурентного UI](/docs/concurrent-mode-patterns.html). -**Примечание: это не стабильный релиз, а предварительная версия для комьюнити. Скорее всего, в будущем API изменится. Используйте его на свой страх и риск!** +**Примечание: это не стабильный релиз, а предварительная версия для сообщества. Скорее всего, в будущем API изменится. Используйте его на свой страх и риск!** - [Включение конкурентного режима](#concurrent-mode) - [`createRoot`](#createroot) From 4e9d6c51f4d3fcbc8819e3617d902945928df113 Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sun, 2 Feb 2020 10:07:42 +0500 Subject: [PATCH 21/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Alexey Pyltsyn --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 72a69b5b8..1e8aeaf30 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -103,7 +103,7 @@ ReactDOM.createBlockingRoot(rootNode).render() * **revealOrder (forwards, backwards, together)** определяет последовательность, в которой отображаются дочерние компоненты `SuspenseList`. * `together` позволяет отобразить *все* компоненты одновременно вместо того, чтобы показывать их последовательно. * **tail (collapsed, hidden)** определяет, как отображаются компоненты из `SuspenseList`, которые ещё не загружены. - * По умолчанию, `SuspenseList` отображает запасные состояния для всех компонентов в списке. + * По умолчанию `SuspenseList` отображает запасные состояния для всех компонентов в списке. * `collapsed` показывает запасное состояние только для компонента, который будет загружен следующим. * `hidden` не показывает компоненты, которые ещё не загружены. From 0143094b7c30eb506f2bb6b0d7800969960dcc46 Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sun, 2 Feb 2020 10:08:39 +0500 Subject: [PATCH 22/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Alexey Pyltsyn --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 1e8aeaf30..c7db3bb96 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -121,7 +121,7 @@ const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG); Хук `useTransition` возвращает массив из двух элементов. -* `startTransition` -- это функция, которая получает колбэк. Её используют, чтобы сообщить React какое состояние нам нужно отложить. +* `startTransition` -- это функция, которая получает колбэк. Её используют, чтобы сообщить React, какое состояние нам нужно отложить. * `isPending` -- это логическое значение, которое позволяет React проинформировать нас, ожидаем ли мы в данный момент окончания перехода. **Если обновление состояния компонента является причиной задержки, то его нужно обернуть по паттерну перехода.** From af1d1a0b873f8a63c436283139af096db87452eb Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sun, 2 Feb 2020 10:09:07 +0500 Subject: [PATCH 23/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Alexey Pyltsyn --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index c7db3bb96..dd0e7d571 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -166,7 +166,7 @@ function App() { const SUSPENSE_CONFIG = { timeoutMs: 2000 }; ``` -Хук `useTransition` принимает **объект настройки задержек** со свойством `timeoutMs`. Этот таймаут, заданный в миллисекундах, указывает React сколько времени нужно ждать появления следующего состояния, например, как это было сделано в программе выше. +Хук `useTransition` принимает **объект настройки задержек** со свойством `timeoutMs`. Этот тайм-аут, заданный в миллисекундах, указывает React, сколько времени нужно ждать появления следующего состояния, например, как это было сделано в программе выше. **Примечание: мы рекомендуем делать объект настройки задержек глобальным для всех модулей проекта.** From c7f9dda3957858ae2c127a6637a001f8b7c2cba1 Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sun, 2 Feb 2020 10:11:02 +0500 Subject: [PATCH 24/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Alexey Pyltsyn --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index dd0e7d571..bfb711275 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -107,7 +107,7 @@ ReactDOM.createBlockingRoot(rootNode).render() * `collapsed` показывает запасное состояние только для компонента, который будет загружен следующим. * `hidden` не показывает компоненты, которые ещё не загружены. -Учтите, что `SuspenseList` управляет только ближайшими вложенными компонентами `Suspense` и `SuspenseList`. Поиск осуществляеется не более, чем на один уровень вниз, но при этом можно делать многоуровневые вложения `SuspenseList` для построения более сложной разметки. +Учтите, что `SuspenseList` управляет только ближайшими вложенными компонентами `Suspense` и `SuspenseList`. Поиск осуществляется не более, чем на один уровень вниз, но при этом можно делать многоуровневые вложения `SuspenseList` для построения более сложной разметки. ### `useTransition` {#usetransition} From ee7ad32a88eda86c90a591d435f3f0c1802a9e5c Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sun, 2 Feb 2020 10:11:30 +0500 Subject: [PATCH 25/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Alexey Pyltsyn --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index bfb711275..b60f9e0bc 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -209,6 +209,6 @@ function App() { const SUSPENSE_CONFIG = { timeoutMs: 2000 }; ``` -`useDeferredValue` принимает **объект настройки задержек** со свойством `timeoutMs`. Этот таймаут (в миллисекундах) сообщает React, на сколько долго отложенное значение может отставать. +`useDeferredValue` принимает **объект настройки задержек** со свойством `timeoutMs`. Этот тайм-аут (в миллисекундах) сообщает React, на сколько долго отложенное значение может отставать. React будет пытаться использовать более короткую задержку, когда сеть и устройство это позволяют. From d22a835777c2634338b7528a63b723ca8e87ebcc Mon Sep 17 00:00:00 2001 From: Aleksey Levykin Date: Sun, 2 Feb 2020 11:18:45 +0500 Subject: [PATCH 26/31] Update content/docs/concurrent-mode-reference.md Co-Authored-By: Alexey Pyltsyn --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index b60f9e0bc..8c9d3545f 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -72,7 +72,7 @@ ReactDOM.createBlockingRoot(rootNode).render() `Suspense` даёт возможность вашим компонентам "ждать", отображая запасное состояние, прежде чем они будут отрендерены. -В примере `ProfileDetails` получают данные с помощью асинхронного вызова. Во время ожидания загрузки `ProfileDetails` и `ProfilePhoto`, отображается запасной заголовок `Loading...`. Важно отметить, что до тех пор, пока все дочерние компоненты `` не отрендерены, мы будем видеть запасное состояние. +В примере компонент `ProfileDetails` получает данные с помощью асинхронного вызова. Во время ожидания загрузки `ProfileDetails` и `ProfilePhoto`, отображается запасной заголовок `Загрузка...`. Следует отметить, что до тех пор, пока все дочерние компоненты `` не отрендерены, мы увидим запасное состояние. `Suspense` принимает два пропса: * **fallback** принимает индикатор загрузки. Запасное состояние отображается до тех пор, пока не завершится рендер всех дочерних компонентов `Suspense`. From e25b20818590cfd3156f1ad212a5635de247eb5e Mon Sep 17 00:00:00 2001 From: AlLevykin Date: Sun, 2 Feb 2020 11:27:36 +0500 Subject: [PATCH 27/31] =?UTF-8?q?Loading=20->=20=D0=97=D0=B0=D0=B3=D1=80?= =?UTF-8?q?=D1=83=D0=B7=D0=BA=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/concurrent-mode-reference.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 8c9d3545f..beb12e104 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -64,7 +64,7 @@ ReactDOM.createBlockingRoot(rootNode).render() ### `Suspense` {#suspensecomponent} ```js -Loading...}> +Загрузка...}> @@ -82,13 +82,13 @@ ReactDOM.createBlockingRoot(rootNode).render() ```js - + - + - + ... @@ -145,7 +145,7 @@ function App() { > Next - {isPending ? " Loading..." : null} + {isPending ? " Загрузка..." : null} }> From fa42e9e5e3149ee8eb44bf754fd22a2cd2d8bbb0 Mon Sep 17 00:00:00 2001 From: AlLevykin Date: Sun, 2 Feb 2020 11:36:14 +0500 Subject: [PATCH 28/31] =?UTF-8?q?=D0=B7=D0=B0=D0=BF=D0=B0=D1=81=D0=BD?= =?UTF-8?q?=D0=BE=D0=B5=20=D1=81=D0=BE=D1=81=D1=82=D0=BE=D1=8F=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=20->=20=D0=B7=D0=B0=D0=BF=D0=B0=D1=81=D0=BD=D0=BE=D0=B9?= =?UTF-8?q?=20=D0=B8=D0=BD=D1=82=D0=B5=D1=80=D1=84=D0=B5=D0=B9=D1=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/concurrent-mode-reference.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index beb12e104..c510f4552 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -70,13 +70,13 @@ ReactDOM.createBlockingRoot(rootNode).render() ``` -`Suspense` даёт возможность вашим компонентам "ждать", отображая запасное состояние, прежде чем они будут отрендерены. +`Suspense` даёт возможность вашим компонентам "ждать", отображая запасной интерфейс, прежде чем они будут отрендерены. -В примере компонент `ProfileDetails` получает данные с помощью асинхронного вызова. Во время ожидания загрузки `ProfileDetails` и `ProfilePhoto`, отображается запасной заголовок `Загрузка...`. Следует отметить, что до тех пор, пока все дочерние компоненты `` не отрендерены, мы увидим запасное состояние. +В примере компонент `ProfileDetails` получает данные с помощью асинхронного вызова. Во время ожидания загрузки `ProfileDetails` и `ProfilePhoto`, отображается запасной заголовок `Загрузка...`. Следует отметить, что до тех пор, пока все дочерние компоненты `` не отрендерены, мы увидим запасной интерфейс. `Suspense` принимает два пропса: -* **fallback** принимает индикатор загрузки. Запасное состояние отображается до тех пор, пока не завершится рендер всех дочерних компонентов `Suspense`. -* **unstable_avoidThisFallback** принимает логическое значение. Оно сообщает React, что не нужно отображать запасное состояние при первоначальной загрузке. Скорее всего, этот API будет исключён в будущих релизах. +* **fallback** принимает индикатор загрузки. Запасной интерфейс отображается до тех пор, пока не завершится рендер всех дочерних компонентов `Suspense`. +* **unstable_avoidThisFallback** принимает логическое значение. Оно сообщает React, что не нужно отображать запасной интерфейс при первоначальной загрузке. Скорее всего, этот API будет исключён в будущих релизах. ### `` {#suspenselist} @@ -103,8 +103,8 @@ ReactDOM.createBlockingRoot(rootNode).render() * **revealOrder (forwards, backwards, together)** определяет последовательность, в которой отображаются дочерние компоненты `SuspenseList`. * `together` позволяет отобразить *все* компоненты одновременно вместо того, чтобы показывать их последовательно. * **tail (collapsed, hidden)** определяет, как отображаются компоненты из `SuspenseList`, которые ещё не загружены. - * По умолчанию `SuspenseList` отображает запасные состояния для всех компонентов в списке. - * `collapsed` показывает запасное состояние только для компонента, который будет загружен следующим. + * По умолчанию `SuspenseList` отображает запасной интерфейс для всех компонентов в списке. + * `collapsed` показывает запасной интерфейс только для компонента, который будет загружен следующим. * `hidden` не показывает компоненты, которые ещё не загружены. Учтите, что `SuspenseList` управляет только ближайшими вложенными компонентами `Suspense` и `SuspenseList`. Поиск осуществляется не более, чем на один уровень вниз, но при этом можно делать многоуровневые вложения `SuspenseList` для построения более сложной разметки. From db464ed12c8a98074402965e861916ba23c87ead Mon Sep 17 00:00:00 2001 From: AlLevykin Date: Sun, 2 Feb 2020 16:40:40 +0500 Subject: [PATCH 29/31] =?UTF-8?q?=D0=9E=D0=BF=D0=B8=D1=81=D0=B0=D0=BD?= =?UTF-8?q?=D0=B8=D0=B5=20useDeferredValue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/concurrent-mode-reference.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index c510f4552..165649feb 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -70,7 +70,7 @@ ReactDOM.createBlockingRoot(rootNode).render() ``` -`Suspense` даёт возможность вашим компонентам "ждать", отображая запасной интерфейс, прежде чем они будут отрендерены. +`Suspense` позволяет вашим компонентам "ждать", отображая запасной интерфейс, прежде чем они будут отрендерены. В примере компонент `ProfileDetails` получает данные с помощью асинхронного вызова. Во время ожидания загрузки `ProfileDetails` и `ProfilePhoto`, отображается запасной заголовок `Загрузка...`. Следует отметить, что до тех пор, пока все дочерние компоненты `` не отрендерены, мы увидим запасной интерфейс. @@ -176,9 +176,9 @@ const SUSPENSE_CONFIG = { timeoutMs: 2000 }; const deferredValue = useDeferredValue(value, { timeoutMs: 2000 }); ``` -Возвращает отложенную версию значения, которое может «отставать» от него не более чем на `timeoutMs`. +Хук возвращает отложенную версию для значения, получение которого может «отставать» от рендера всего компонента более чем на `timeoutMs`. -Это обычно используется для создания отзывчивого интерфейса, когда нужно что-то немедленно отрендерить на основе пользовательского ввода и что-то при этом ожидает загрузки данных. +Обычно это хук используется для создания отзывчивого интерфейса, когда часть компонента нужно немедленно отрендерить на основе пользовательского ввода и при этом другая часть ожидает загрузки данных. Хорошим примером является ввод текста. @@ -189,17 +189,17 @@ function App() { return (
- {/* При вводе текста ... */} + {/* Вводим текст в поле ... */} ... - {/* ... в случае "зависания" можно показать список со значением ожидания */} + {/* ... при этом список может отображать отложенное значение */}
); } ``` -Это позволяет нам немедленно начать отображать новый текст для `input`, что позволяет странице чувствовать себя отзывчивой. Между тем, `MySlowList` "отстает" на 2 секунды в соответствии с` timeoutMs` перед обновлением, что позволяет выполнять рендеринг с текущим текстом в фоновом режиме.``` +Такой подход позволяет немедленно показывать новый текст для `input`, чтобы улучшить отзывчивость UI. В тоже время, если рендер `MySlowList` "отстает" на 2 секунды, установленные в `timeoutMs`, то в фоновом режиме отображается отложенное значение. **Паттерн ожидания значений более подробно рассматривается в разделе [Паттерны конкурентного UI](/docs/concurrent-mode-patterns.html#deferring-a-value).** From 4297c69a27f7e1f55839f742a788c6669ccd8a08 Mon Sep 17 00:00:00 2001 From: AlLevykin Date: Sun, 2 Feb 2020 16:42:19 +0500 Subject: [PATCH 30/31] =?UTF-8?q?=D0=9E=D0=BF=D0=B8=D1=81=D0=B0=D0=BD?= =?UTF-8?q?=D0=B8=D0=B5=20useDeferredValue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 165649feb..594e94dfb 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -178,7 +178,7 @@ const deferredValue = useDeferredValue(value, { timeoutMs: 2000 }); Хук возвращает отложенную версию для значения, получение которого может «отставать» от рендера всего компонента более чем на `timeoutMs`. -Обычно это хук используется для создания отзывчивого интерфейса, когда часть компонента нужно немедленно отрендерить на основе пользовательского ввода и при этом другая часть ожидает загрузки данных. +Обычно этот хук используется для создания отзывчивого интерфейса, когда часть компонента нужно немедленно отрендерить на основе пользовательского ввода и при этом другая часть ожидает загрузки данных. Хорошим примером является ввод текста. From 18e15a7851dfdf492ff5eed20842674eea33229d Mon Sep 17 00:00:00 2001 From: AlLevykin Date: Sun, 2 Feb 2020 17:41:38 +0500 Subject: [PATCH 31/31] =?UTF-8?q?=D0=9A=D0=BE=D1=80=D1=80=D0=B5=D0=BA?= =?UTF-8?q?=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=BA=D0=B0=20=D0=BF=D1=83=D1=81?= =?UTF-8?q?=D1=82=D1=8B=D1=85=20=D1=81=D1=82=D1=80=D0=BE=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/concurrent-mode-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 594e94dfb..58f593acd 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -120,7 +120,6 @@ const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG); `useTransition` позволяет не отображать состояние загрузки, когда контент обновляется перед **переходом к следующему экрану**. Это также позволяет компонентам так откладывать более медленные обновления выборки данных до последующих рендеров, что более важные обновления могут быть выполнены немедленно. Хук `useTransition` возвращает массив из двух элементов. - * `startTransition` -- это функция, которая получает колбэк. Её используют, чтобы сообщить React, какое состояние нам нужно отложить. * `isPending` -- это логическое значение, которое позволяет React проинформировать нас, ожидаем ли мы в данный момент окончания перехода. @@ -170,6 +169,7 @@ const SUSPENSE_CONFIG = { timeoutMs: 2000 }; **Примечание: мы рекомендуем делать объект настройки задержек глобальным для всех модулей проекта.** + ### `useDeferredValue` {#usedeferredvalue} ```js