You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Задержка при получении данных – это новая возможность, которая позволяет использовать `<Suspense>` и **декларативно «ждать» чего-либо ещё, включая данные.** Эта страница описывает получение данных, однако это применимо к изображениям, скриптам и другим асинхронным действиям.
38
38
39
-
-[Что такое Задержка?](#what-is-suspense-exactly)
40
-
-[Чем Задержка не является](#what-suspense-is-not)
41
-
-[Что позволяет делать Задержка](#what-suspense-lets-you-do)
39
+
-[Что такое задержка?](#what-is-suspense-exactly)
40
+
-[Чем задержка не является](#what-suspense-is-not)
41
+
-[Что позволяет делать задержка](#what-suspense-lets-you-do)
42
42
-[Использование Задержки на практике](#using-suspense-in-practice)
43
43
-[Что если я не использую Relay?](#what-if-i-dont-use-relay)
44
44
-[Для авторов библиотек](#for-library-authors)
45
45
-[Классические подходы против Задержки](#traditional-approaches-vs-suspense)
46
-
-[Подход 1: Получаем-после-рендера (Задержка не используется)](#approach-1-fetch-on-render-not-using-suspense)
47
-
-[Подход 2: Получаем-потом-рендерим (Задержка не используется)](#approach-2-fetch-then-render-not-using-suspense)
46
+
-[Подход 1: Получаем-после-рендера (задержка не используется)](#approach-1-fetch-on-render-not-using-suspense)
47
+
-[Подход 2: Получаем-потом-рендерим (задержка не используется)](#approach-2-fetch-then-render-not-using-suspense)
## Что такое Задержка? {#what-is-suspense-exactly}
59
+
## Что такое задержка? {#what-is-suspense-exactly}
60
60
61
61
Задержка позволяет вашим компонентам «ждать» чего-то до их рендера. В [этом примере](https://codesandbox.io/s/frosty-hermann-bztrp) два компонента ждут асинхронного вызова API, чтобы получить данные:
62
62
@@ -95,23 +95,23 @@ function ProfileTimeline() {
95
95
96
96
**[Посмотреть пример на CodeSandbox](https://codesandbox.io/s/frosty-hermann-bztrp)**
97
97
98
-
Это раннее демо. Не переживайте, если оно кажется бессмысленным. Мы поговорим о том, как оно работает ниже. Имейте ввиду, что Задержка – это больше *механизм* и определенные API, такие как `fetchProfileData()` или `resource.posts.read()` в примере выше не очень важны. Если интересно, вы можете найти их определения прямо в [демо песочнице](https://codesandbox.io/s/frosty-hermann-bztrp).
98
+
Это раннее демо. Не переживайте, если оно кажется бессмысленным. Мы поговорим о том, как оно работает ниже. Имейте ввиду, что задержка – это больше *механизм* и определенные API, такие как `fetchProfileData()` или `resource.posts.read()` в примере выше не очень важны. Если интересно, вы можете найти их определения прямо в [демо песочнице](https://codesandbox.io/s/frosty-hermann-bztrp).
99
99
100
100
Задержка – это не библиотека для получения данных. Это **механизм для библиотек получения данных**, который сообщает React, что *данные, которые читает компонент ещё не готовы*. React в этом случае может подождать, пока они будут готовы и обновить пользовательский интерфейс. В Facebook, мы используем Relay с [интеграцией новой Задержки](https://relay.dev/docs/en/experimental/a-guided-tour-of-relay#loading-states-with-suspense). Мы ожидаем, что другие библиотеки, такие как Apollo смогут предоставить подобную интеграцию.
101
101
102
102
В долгосрочной перспективе мы собираемся сделать Задержку основным способом чтения асинхронных данных из компонентов, независимо от того, откуда эти данные пришли.
103
103
104
-
### Чем Задержка не является {#what-suspense-is-not}
104
+
### Чем задержка не является {#what-suspense-is-not}
105
105
106
106
Задержка — это совершенно иной подход среди существующих для решения этих проблем, поэтому на первый взгляд это часто ведёт к заблуждениям. Давайте проясним самые распространенные:
107
107
108
108
***Это не реализация получения данных.** Задержка не предполагает, что вы используете GraphQL, REST или какой-то другой определённый формат данных, библиотеку, транспорт или протокол.
109
109
110
-
***Это не готовый к использованию клиент.** Вы не сможете заменить `fetch` или Relay Задержкой. Но вы можете использовать библиотеку, в которую интегрирована Задержка (например [новый API у Relay](https://relay.dev/docs/en/experimental/api-reference)).
110
+
***Это не готовый к использованию клиент.** Вы не сможете заменить `fetch` или Relay Задержкой. Но вы можете использовать библиотеку, в которую интегрирована задержка (например [новый API у Relay](https://relay.dev/docs/en/experimental/api-reference)).
111
111
112
112
***Задержка не привязывает получение данных к слою представления.** Она помогает управлять отображением состояния загрузки в пользовательском интерфейсе, но она не связывает вашу сетевую логику с React-компонентами.
113
113
114
-
### Что позволяет делать Задержка {#what-suspense-lets-you-do}
114
+
### Что позволяет делать задержка {#what-suspense-lets-you-do}
115
115
116
116
Итак, в чём идея Задержки? Есть несколько вариантов ответа на этот вопрос:
117
117
@@ -125,7 +125,7 @@ function ProfileTimeline() {
125
125
126
126
До настоящего времени в Facebook мы использовали в продакшн только Relay с интегрированной Задержкой. **Если вы ищете практическое руководство как начать сегодня, [посмотрите руководство Relay](https://relay.dev/docs/en/experimental/step-by-step)!** Там рассмотрены подходы, которые уже хорошо работают у нас в продакшн.
127
127
128
-
**Код примеров на этой странице использует «фальшивую» реализацию API, а не Relay.** Это позволяет легче их понимать, если вы не знакомы с GraphQL, но они не расскажут вам о «правильном способе» как построить приложение с использованием Задержки. Эта страница скорее о концептуальных принципах и нацелена помочь вам понять *почему*Задержка работает определенным образом и какие проблемы она решает.
128
+
**Код примеров на этой странице использует «фальшивую» реализацию API, а не Relay.** Это позволяет легче их понимать, если вы не знакомы с GraphQL, но они не расскажут вам о «правильном способе» как построить приложение с использованием Задержки. Эта страница скорее о концептуальных принципах и нацелена помочь вам понять *почему*задержка работает определенным образом и какие проблемы она решает.
129
129
130
130
### Что, если я не использую Relay? {#what-if-i-dont-use-relay}
131
131
@@ -139,13 +139,13 @@ function ProfileTimeline() {
139
139
140
140
Мы ожидаем увидеть в сообществе много экспериментов с другими библиотеками. Есть одна важная деталь на заметку авторам библиотек получения данных.
141
141
142
-
Несмотря на то, что это технически выполнимо, Задержка сейчас **не** предназначена для получения данных во время рендера компонента. Скорее она позволяет компонентам показать, что они «ждут» данные, которые *уже были получены*. **[Построение хорошего опыта взаимодействия пользователя с интерфейсами в Конкурентном режиме с Задержкой](/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html) описывает почему это важно и как реализовать этот подход на практике.**
142
+
Несмотря на то, что это технически выполнимо, задержка сейчас **не** предназначена для получения данных во время рендера компонента. Скорее она позволяет компонентам показать, что они «ждут» данные, которые *уже были получены*. **[Построение хорошего опыта взаимодействия пользователя с интерфейсами в Конкурентном режиме с Задержкой](/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html) описывает почему это важно и как реализовать этот подход на практике.**
143
143
144
144
Если у вас нет решения, которое помогает предотвращать водопады, мы предлагаем использовать API, которые поддерживают или обеспечивают получение данных до рендера. В качестве конкретного примера, посмотрите как в [Relay Suspense API](https://relay.dev/docs/en/experimental/api-reference#usepreloadedquery) организована предзагрузка. Наша информация про это была не очень последовательной. Задержка для получения данных все ещё в экспериментальном режиме, наши рекомендации могут измениться со временем, так как мы учимся новому во время использования технологии в продакшн и лучше понимаем предметную область.
145
145
146
146
## Классические подходы против Задержки {#traditional-approaches-vs-suspense}
147
147
148
-
Мы могли бы рассказать о Задержке без упоминания популярных способов получения данных. В этом случае было бы сложнее увидеть какие проблемы решает Задержка, почему эти проблемы нужно решать и как Задержка отличается от существующих решений.
148
+
Мы могли бы рассказать о Задержке без упоминания популярных способов получения данных. В этом случае было бы сложнее увидеть какие проблемы решает задержка, почему эти проблемы нужно решать и как задержка отличается от существующих решений.
149
149
150
150
Наоборот, мы взглянем на Задержку, как на следующий логический шаг в перечне подходов:
151
151
@@ -159,7 +159,7 @@ function ProfileTimeline() {
159
159
160
160
Для сравнения подходов мы реализуем страницу с профилем пользователя используя каждый из них.
161
161
162
-
### Подход 1: Получаем-после-рендера (Задержка не используется) {#approach-1-fetch-on-render-not-using-suspense}
162
+
### Подход 1: Получаем-после-рендера (задержка не используется) {#approach-1-fetch-on-render-not-using-suspense}
163
163
164
164
Распространённый сегодня способ получения данных в React с использованием эффекта:
165
165
@@ -233,7 +233,7 @@ function ProfileTimeline() {
233
233
234
234
Водопады распространены в коде который получает данные после рендера. Их можно устранить, но по мере роста продукта, многие люди предпочитают использовать решение, которое защищает от этой проблемы.
235
235
236
-
### Подход 2: Получаем-потом-рендерим (Задержка не используется) {#approach-2-fetch-then-render-not-using-suspense}
236
+
### Подход 2: Получаем-потом-рендерим (задержка не используется) {#approach-2-fetch-then-render-not-using-suspense}
237
237
238
238
Библиотеки могут предотвратить появление водопадов предлагая более централизованный способ получения данных. Например, Relay решает эту проблему перемещением информации о данных, которые нужны компоненту в статически анализируемые *фрагменты*, которые позже собираются в единый запрос.
239
239
@@ -723,7 +723,7 @@ function ProfilePage() {
723
723
724
724
## Что дальше? {#next-steps}
725
725
726
-
Мы рассмотрели основы Задержки для получения данных! Важно, что теперь мы лучше понимаем *почему*Задержка работает таким образом и как вписывается в область получения данных.
726
+
Мы рассмотрели основы Задержки для получения данных! Важно, что теперь мы лучше понимаем *почему*задержка работает таким образом и как вписывается в область получения данных.
727
727
728
728
Задержка отвечает на некоторые вопросы, но и поднимает свои собственные:
0 commit comments