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`даёт возможность вашим компонентам "ждать", отображая запасной интерфейс, прежде чем они будут отрендерены.
73
+
`Suspense`позволяет вашим компонентам "ждать", отображая запасной интерфейс, прежде чем они будут отрендерены.
74
74
75
75
В примере компонент `ProfileDetails` получает данные с помощью асинхронного вызова. Во время ожидания загрузки `ProfileDetails` и `ProfilePhoto`, отображается запасной заголовок `Загрузка...`. Следует отметить, что до тех пор, пока все дочерние компоненты `<Suspense>` не отрендерены, мы увидим запасной интерфейс.
Возвращает отложенную версию значения, которое может «отставать» от него не более чем на `timeoutMs`.
179
+
Хук возвращает отложенную версию для значения, получение которого может «отставать» от рендера всего компонента более чем на `timeoutMs`.
180
180
181
-
Это обычно используется для создания отзывчивого интерфейса, когда нужно что-то немедленно отрендерить на основе пользовательского ввода и что-то при этом ожидает загрузки данных.
181
+
Обычно это хук используется для создания отзывчивого интерфейса, когда часть компонента нужно немедленно отрендерить на основе пользовательского ввода и при этом другая часть ожидает загрузки данных.
182
182
183
183
Хорошим примером является ввод текста.
184
184
@@ -189,17 +189,17 @@ function App() {
189
189
190
190
return (
191
191
<div className="App">
192
-
{/*При вводе текста ... */}
192
+
{/*Вводим текст в поле ... */}
193
193
<input value={text} onChange={handleChange} />
194
194
...
195
-
{/* ... в случае "зависания" можно показать список со значением ожидания*/}
195
+
{/* ... при этом список может отображать отложенное значение*/}
196
196
<MySlowList text={deferredText} />
197
197
</div>
198
198
);
199
199
}
200
200
```
201
201
202
-
Это позволяет нам немедленно начать отображать новый текст для `input`, что позволяет странице чувствовать себя отзывчивой. Между тем, `MySlowList` "отстает" на 2 секунды в соответствии с`timeoutMs` перед обновлением, что позволяет выполнять рендеринг с текущим текстом в фоновом режиме.```
202
+
Такой подход позволяет немедленно показывать новый текст для `input`, чтобы улучшить отзывчивость UI. В тоже время, если рендер `MySlowList` "отстает" на 2 секунды, установленные в `timeoutMs`, то в фоновом режиме отображается отложенное значение.
203
203
204
204
**Паттерн ожидания значений более подробно рассматривается в разделе [Паттерны конкурентного UI](/docs/concurrent-mode-patterns.html#deferring-a-value).**
0 commit comments