Skip to content

Commit db464ed

Browse files
committed
Описание useDeferredValue
1 parent fa42e9e commit db464ed

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

content/docs/concurrent-mode-reference.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ ReactDOM.createBlockingRoot(rootNode).render(<App />)
7070
</Suspense>
7171
```
7272

73-
`Suspense` даёт возможность вашим компонентам "ждать", отображая запасной интерфейс, прежде чем они будут отрендерены.
73+
`Suspense` позволяет вашим компонентам "ждать", отображая запасной интерфейс, прежде чем они будут отрендерены.
7474

7575
В примере компонент `ProfileDetails` получает данные с помощью асинхронного вызова. Во время ожидания загрузки `ProfileDetails` и `ProfilePhoto`, отображается запасной заголовок `Загрузка...`. Следует отметить, что до тех пор, пока все дочерние компоненты `<Suspense>` не отрендерены, мы увидим запасной интерфейс.
7676

@@ -176,9 +176,9 @@ const SUSPENSE_CONFIG = { timeoutMs: 2000 };
176176
const deferredValue = useDeferredValue(value, { timeoutMs: 2000 });
177177
```
178178

179-
Возвращает отложенную версию значения, которое может «отставать» от него не более чем на `timeoutMs`.
179+
Хук возвращает отложенную версию для значения, получение которого может «отставать» от рендера всего компонента более чем на `timeoutMs`.
180180

181-
Это обычно используется для создания отзывчивого интерфейса, когда нужно что-то немедленно отрендерить на основе пользовательского ввода и что-то при этом ожидает загрузки данных.
181+
Обычно это хук используется для создания отзывчивого интерфейса, когда часть компонента нужно немедленно отрендерить на основе пользовательского ввода и при этом другая часть ожидает загрузки данных.
182182

183183
Хорошим примером является ввод текста.
184184

@@ -189,17 +189,17 @@ function App() {
189189

190190
return (
191191
<div className="App">
192-
{/* При вводе текста ... */}
192+
{/* Вводим текст в поле ... */}
193193
<input value={text} onChange={handleChange} />
194194
...
195-
{/* ... в случае "зависания" можно показать список со значением ожидания */}
195+
{/* ... при этом список может отображать отложенное значение */}
196196
<MySlowList text={deferredText} />
197197
</div>
198198
);
199199
}
200200
```
201201

202-
Это позволяет нам немедленно начать отображать новый текст для `input`, что позволяет странице чувствовать себя отзывчивой. Между тем, `MySlowList` "отстает" на 2 секунды в соответствии с` timeoutMs` перед обновлением, что позволяет выполнять рендеринг с текущим текстом в фоновом режиме.```
202+
Такой подход позволяет немедленно показывать новый текст для `input`, чтобы улучшить отзывчивость UI. В тоже время, если рендер `MySlowList` "отстает" на 2 секунды, установленные в `timeoutMs`, то в фоновом режиме отображается отложенное значение.
203203

204204
**Паттерн ожидания значений более подробно рассматривается в разделе [Паттерны конкурентного UI](/docs/concurrent-mode-patterns.html#deferring-a-value).**
205205

0 commit comments

Comments
 (0)