Skip to content

Commit 2ef75a3

Browse files
PalidosPalidos
committed
add suggestions
1 parent 6db5da0 commit 2ef75a3

File tree

1 file changed

+36
-36
lines changed

1 file changed

+36
-36
lines changed

‎src/content/reference/react/useTransition.md‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: useTransition
44

55
<Intro>
66

7-
`useTransition` — это React хук, который позволяет вам обновлять состояние, не блокируя UI.
7+
`useTransition` — это React-хук, который позволяет вам обновлять состояние, не блокируя UI.
88

99
```js
1010
const [isPending, startTransition] = useTransition()
@@ -205,7 +205,7 @@ export default function TabButton({ children, isActive, onClick }) {
205205
```js AboutTab.js
206206
export default function AboutTab() {
207207
return (
208-
<p>Welcome to my profile!</p>
208+
<p>Добро пожаловать в мой профиль!</p>
209209
);
210210
}
211211
```
@@ -236,7 +236,7 @@ function SlowPost({ index }) {
236236

237237
return (
238238
<li className="item">
239-
Post #{index + 1}
239+
Пост №{index + 1}
240240
</li>
241241
);
242242
}
@@ -249,7 +249,7 @@ export default function ContactTab() {
249249
return (
250250
<>
251251
<p>
252-
You can find me online here:
252+
Найти меня в Интернете можно здесь:
253253
</p>
254254
<ul>
255255
<li>admin@mysite.com</li>
@@ -273,7 +273,7 @@ b { display: inline-block; margin-right: 10px; }
273273

274274
В этом примере вкладка "Posts" также **искусственно замедлена**, так что для её рендера требуется не менее секунды. В отличие от предыдущего примера, это обновление состояния **не является переходом**.
275275

276-
Нажмите на "Posts", а затем сразу нажмите на "Contact". Обратите внимание, что приложение зависает при ренднре замедленной вкладки, а UI перестаёт отвечать на запросы. Это обновление состояния не является переходом, поэтому медленный повторный рендер заморозил пользовательский интерфейс.
276+
Нажмите на "Posts", а затем сразу нажмите на "Contact". Обратите внимание, что приложение зависает при рендере замедленной вкладки, а UI перестаёт отвечать на запросы. Это обновление состояния не является переходом, поэтому медленный повторный рендер заморозил пользовательский интерфейс.
277277

278278
<Sandpack>
279279

@@ -341,7 +341,7 @@ export default function TabButton({ children, isActive, onClick }) {
341341
```js AboutTab.js
342342
export default function AboutTab() {
343343
return (
344-
<p>Welcome to my profile!</p>
344+
<p>Добро пожаловать в мой профиль!</p>
345345
);
346346
}
347347
```
@@ -372,7 +372,7 @@ function SlowPost({ index }) {
372372

373373
return (
374374
<li className="item">
375-
Post #{index + 1}
375+
Пост №{index + 1}
376376
</li>
377377
);
378378
}
@@ -385,7 +385,7 @@ export default function ContactTab() {
385385
return (
386386
<>
387387
<p>
388-
You can find me online here:
388+
Найти меня в Интернете можно здесь:
389389
</p>
390390
<ul>
391391
<li>admin@mysite.com</li>
@@ -496,7 +496,7 @@ export default function TabButton({ children, isActive, onClick }) {
496496
```js AboutTab.js
497497
export default function AboutTab() {
498498
return (
499-
<p>Welcome to my profile!</p>
499+
<p>Добро пожаловать в мой профиль!</p>
500500
);
501501
}
502502
```
@@ -527,7 +527,7 @@ function SlowPost({ index }) {
527527

528528
return (
529529
<li className="item">
530-
Post #{index + 1}
530+
Пост №{index + 1}
531531
</li>
532532
);
533533
}
@@ -540,7 +540,7 @@ export default function ContactTab() {
540540
return (
541541
<>
542542
<p>
543-
You can find me online here:
543+
Найти меня в Интернете можно здесь:
544544
</p>
545545
<ul>
546546
<li>admin@mysite.com</li>
@@ -642,7 +642,7 @@ export default function TabButton({ children, isActive, onClick }) {
642642
```js AboutTab.js
643643
export default function AboutTab() {
644644
return (
645-
<p>Welcome to my profile!</p>
645+
<p>Добро пожаловать в мой профиль!</p>
646646
);
647647
}
648648
```
@@ -673,7 +673,7 @@ function SlowPost({ index }) {
673673

674674
return (
675675
<li className="item">
676-
Post #{index + 1}
676+
Пост №{index + 1}
677677
</li>
678678
);
679679
}
@@ -686,7 +686,7 @@ export default function ContactTab() {
686686
return (
687687
<>
688688
<p>
689-
You can find me online here:
689+
Найти меня в Интернете можно здесь:
690690
</p>
691691
<ul>
692692
<li>admin@mysite.com</li>
@@ -709,7 +709,7 @@ b { display: inline-block; margin-right: 10px; }
709709
710710
### Предотвращение нежелательных индикаторов загрузки {/*preventing-unwanted-loading-indicators*/}
711711
712-
В этом примере компонент `PostsTab` получает некоторые данные, используя источник данных поддерживающий [Задержку](/reference/react/Suspense). Когда вы нажимаете на вкладку "Posts", компонент `PostsTab` *приостанавливается*, что приводит к появлению ближайшего запасного варианта загрузки:
712+
В этом примере компонент `PostsTab` получает некоторые данные, используя источник данных поддерживающий [Задержку](/reference/react/Suspense). Когда вы нажимаете на вкладку "Posts", компонент `PostsTab` *задерживается*, что приводит к появлению ближайшего запасного варианта загрузки:
713713
714714
<Sandpack>
715715
@@ -723,7 +723,7 @@ import ContactTab from './ContactTab.js';
723723
export default function TabContainer() {
724724
const [tab, setTab] = useState('about');
725725
return (
726-
<Suspense fallback={<h1>🌀 Loading...</h1>}>
726+
<Suspense fallback={<h1>🌀 Загрузка...</h1>}>
727727
<TabButton
728728
isActive={tab === 'about'}
729729
onClick={() => setTab('about')}
@@ -769,7 +769,7 @@ export default function TabButton({ children, isActive, onClick }) {
769769
```js AboutTab.js hidden
770770
export default function AboutTab() {
771771
return (
772-
<p>Welcome to my profile!</p>
772+
<p>Добро пожаловать в мой профиль!</p>
773773
);
774774
}
775775
```
@@ -835,7 +835,7 @@ export default function ContactTab() {
835835
return (
836836
<>
837837
<p>
838-
You can find me online here:
838+
Найти меня в Интернете можно здесь:
839839
</p>
840840
<ul>
841841
<li>admin@mysite.com</li>
@@ -865,7 +865,7 @@ async function getData(url) {
865865
if (url.startsWith('/posts')) {
866866
return await getPosts();
867867
} else {
868-
throw Error('Not implemented');
868+
throw Error('Не реализовано');
869869
}
870870
}
871871

@@ -878,7 +878,7 @@ async function getPosts() {
878878
for (let i = 0; i < 500; i++) {
879879
posts.push({
880880
id: i,
881-
title: 'Post #' + (i + 1)
881+
title: 'Пост №' + (i + 1)
882882
});
883883
}
884884
return posts;
@@ -909,7 +909,7 @@ import ContactTab from './ContactTab.js';
909909
export default function TabContainer() {
910910
const [tab, setTab] = useState('about');
911911
return (
912-
<Suspense fallback={<h1>🌀 Loading...</h1>}>
912+
<Suspense fallback={<h1>🌀 Загрузка...</h1>}>
913913
<TabButton
914914
isActive={tab === 'about'}
915915
onClick={() => setTab('about')}
@@ -963,7 +963,7 @@ export default function TabButton({ children, isActive, onClick }) {
963963
```js AboutTab.js hidden
964964
export default function AboutTab() {
965965
return (
966-
<p>Welcome to my profile!</p>
966+
<p>Добро пожаловать в мой профиль!</p>
967967
);
968968
}
969969
```
@@ -1029,7 +1029,7 @@ export default function ContactTab() {
10291029
return (
10301030
<>
10311031
<p>
1032-
You can find me online here:
1032+
Найти меня в Интернете можно здесь:
10331033
</p>
10341034
<ul>
10351035
<li>admin@mysite.com</li>
@@ -1059,7 +1059,7 @@ async function getData(url) {
10591059
if (url.startsWith('/posts')) {
10601060
return await getPosts();
10611061
} else {
1062-
throw Error('Not implemented');
1062+
throw Error('Не реализовано');
10631063
}
10641064
}
10651065

@@ -1072,7 +1072,7 @@ async function getPosts() {
10721072
for (let i = 0; i < 500; i++) {
10731073
posts.push({
10741074
id: i,
1075-
title: 'Post #' + (i + 1)
1075+
title: 'Пост №' + (i + 1)
10761076
});
10771077
}
10781078
return posts;
@@ -1097,7 +1097,7 @@ b { display: inline-block; margin-right: 10px; }
10971097
10981098
---
10991099
1100-
### Создание маршрутизатора, поддерживающего Suspense {/*building-a-suspense-enabled-router*/}
1100+
### Создание маршрутизатора, поддерживающего Задержку {/*building-a-suspense-enabled-router*/}
11011101
11021102
Если вы создаёте React-фреймворк или маршрутизатор, мы рекомендуем помечать навигацию между страницами как переходы.
11031103
@@ -1185,7 +1185,7 @@ function Router() {
11851185
}
11861186

11871187
function BigSpinner() {
1188-
return <h2>🌀 Loading...</h2>;
1188+
return <h2>🌀 Загрузка...</h2>;
11891189
}
11901190
```
11911191
@@ -1196,7 +1196,7 @@ export default function Layout({ children, isPending }) {
11961196
<section className="header" style={{
11971197
opacity: isPending ? 0.7 : 1
11981198
}}>
1199-
Music Browser
1199+
Браузер музыки
12001200
</section>
12011201
<main>
12021202
{children}
@@ -1210,7 +1210,7 @@ export default function Layout({ children, isPending }) {
12101210
export default function IndexPage({ navigate }) {
12111211
return (
12121212
<button onClick={() => navigate('/the-beatles')}>
1213-
Open The Beatles artist page
1213+
Открыть страницу исполнителя The Beatles
12141214
</button>
12151215
);
12161216
}
@@ -1369,7 +1369,7 @@ async function getData(url) {
13691369
} else if (url === '/the-beatles/bio') {
13701370
return await getBio();
13711371
} else {
1372-
throw Error('Not implemented');
1372+
throw Error('Не реализовано');
13731373
}
13741374
}
13751375

@@ -1379,10 +1379,10 @@ async function getBio() {
13791379
setTimeout(resolve, 500);
13801380
});
13811381

1382-
return `The Beatles were an English rock band,
1383-
formed in Liverpool in 1960, that comprised
1384-
John Lennon, Paul McCartney, George Harrison
1385-
and Ringo Starr.`;
1382+
return `The Beatles — английская рок-группа,
1383+
сформированная в Ливерпуле в 1960 году, в состав которой входили
1384+
Джон Леннон, Пол Маккартни, Джордж Харрисон
1385+
и Ринго Старр.`;
13861386
}
13871387

13881388
async function getAlbums() {
@@ -1520,10 +1520,10 @@ function handleChange(e) {
15201520
return <input value={text} onChange={handleChange} />;
15211521
```
15221522
1523-
Это происходит потому, что переходы являются неблокирующими, но обновление ввода в ответ на событие изменения должно происходить синхронно. Если вы хотите запустить переход при вводе текста, у вас есть два варианта:
1523+
Это происходит, потому что переходы являются неблокирующими, но обновление ввода в ответ на событие изменения должно происходить синхронно. Если вы хотите запустить переход при вводе текста, у вас есть два варианта:
15241524
15251525
1. Вы можете объявить две отдельные переменные состояния: одну для состояния ввода (которая всегда обновляется синхронно), и одну, которую вы будете обновлять во время перехода. Это позволит вам управлять вводом с использованием синхронного состояния и передавать переменную состояния перехода (которая будет «отставать» от ввода) в остальную логику рендеринга.
1526-
2. В качестве альтернативы, вы можете использовать одну переменную состояния и добавить [`useDeferredValue`](/reference/react/useDeferredValue), которая будет «отставать» от реального значения. Она будет вызывать неблокирующие перерисовки, чтобы «догнать» новое значение автоматически.
1526+
2. В качестве альтернативы, вы можете использовать одну переменную состояния и добавить [`useDeferredValue`](/reference/react/useDeferredValue), так что она будет «отставать» от реального значения. Она будет вызывать неблокирующие перерисовки, чтобы «догнать» новое значение автоматически.
15271527
15281528
---
15291529

0 commit comments

Comments
 (0)