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
Copy file name to clipboardExpand all lines: content/docs/concurrent-mode-suspense.md
+7-43Lines changed: 7 additions & 43 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -220,11 +220,7 @@ function ProfileTimeline() {
220
220
}
221
221
```
222
222
223
-
<<<<<<< HEAD
224
-
**[Посмотреть пример на CodeSandbox](https://codesandbox.io/s/fragrant-glade-8huj6)**
225
-
=======
226
-
**[Try it on CodeSandbox](https://codesandbox.io/s/fast-glade-rqnhtt)**
227
-
>>>>>>> 5e9d673c6bc1530c901548c0b51af3ad3f91d594
223
+
**[Посмотреть пример на CodeSandbox](https://codesandbox.io/s/fast-glade-rqnhtt)**
228
224
229
225
Если вы запустите этот код в логах консоли вы увидите следующую последовательность:
230
226
@@ -299,11 +295,7 @@ function ProfileTimeline({ posts }) {
299
295
}
300
296
```
301
297
302
-
<<<<<<< HEAD
303
-
**[Посмотреть пример на CodeSandbox](https://codesandbox.io/s/wandering-morning-ev6r0)**
304
-
=======
305
-
**[Try it on CodeSandbox](https://codesandbox.io/s/hopeful-lake-loddz9)**
306
-
>>>>>>> 5e9d673c6bc1530c901548c0b51af3ad3f91d594
298
+
**[Посмотреть пример на CodeSandbox](https://codesandbox.io/s/hopeful-lake-loddz9)**
307
299
308
300
Последовательность событий теперь выглядит так:
309
301
@@ -429,11 +421,7 @@ function App() {
429
421
}
430
422
```
431
423
432
-
<<<<<<< HEAD
433
-
**[Посмотреть пример на CodeSandbox](https://codesandbox.io/s/infallible-feather-xjtbu)**
434
-
=======
435
-
**[Try it on CodeSandbox](https://codesandbox.io/s/sparkling-field-41z4r3)**
436
-
>>>>>>> 5e9d673c6bc1530c901548c0b51af3ad3f91d594
424
+
**[Посмотреть пример на CodeSandbox](https://codesandbox.io/s/sparkling-field-41z4r3)**
437
425
438
426
С таким подходом мы можем **получать код и данные параллельно**. Когда мы перемещаемся между страницами, нам не нужно ждать загрузки кода страницы, чтобы начать получать данные для этой страницы. Мы можем начать получать и данные и код одновременно (во время клика по ссылке), улучшив опыт взаимодействия пользователя с интерфейсом.
439
427
@@ -520,11 +508,7 @@ function ProfileTimeline({ id }) {
520
508
}
521
509
```
522
510
523
-
<<<<<<< HEAD
524
-
**[Посмотреть пример на CodeSandbox](https://codesandbox.io/s/nervous-glade-b5sel)**
525
-
=======
526
-
**[Try it on CodeSandbox](https://codesandbox.io/s/beautiful-mendeleev-qwyxzg)**
527
-
>>>>>>> 5e9d673c6bc1530c901548c0b51af3ad3f91d594
511
+
**[Посмотреть пример на CodeSandbox](https://codesandbox.io/s/beautiful-mendeleev-qwyxzg)**
528
512
529
513
Обратите внимание, как мы изменили зависимости эффекта с `[]` на `[id]` – потому что мы хотим перезапускать эффект, когда меняется `id`. В противном случае мы не будем получать новые данные.
530
514
@@ -602,11 +586,7 @@ class ProfileTimeline extends React.Component {
602
586
}
603
587
```
604
588
605
-
<<<<<<< HEAD
606
-
**[Посмотреть пример на CodeSandbox](https://codesandbox.io/s/trusting-clarke-8twuq)**
607
-
=======
608
-
**[Try it on CodeSandbox](https://codesandbox.io/s/async-wind-9o4ojn)**
609
-
>>>>>>> 5e9d673c6bc1530c901548c0b51af3ad3f91d594
589
+
**[Посмотреть пример на CodeSandbox](https://codesandbox.io/s/async-wind-9o4ojn)**
610
590
611
591
Этот код обманчиво легко читаем.
612
592
@@ -666,11 +646,7 @@ function ProfileTimeline({ resource }) {
666
646
}
667
647
```
668
648
669
-
<<<<<<< HEAD
670
-
**[Посмотреть пример на CodeSandbox](https://codesandbox.io/s/infallible-feather-xjtbu)**
671
-
=======
672
-
**[Try it on CodeSandbox](https://codesandbox.io/s/sparkling-field-41z4r3)**
673
-
>>>>>>> 5e9d673c6bc1530c901548c0b51af3ad3f91d594
649
+
**[Посмотреть пример на CodeSandbox](https://codesandbox.io/s/sparkling-field-41z4r3)**
674
650
675
651
В предыдущем примере с задержкой у нас был только один `resource`, поэтому мы запишем его в переменную на верхнем уровне. Сейчас у нас несколько ресурсов, мы переместили их в состояние компонента `<App>`:
676
652
@@ -743,11 +719,7 @@ function ProfilePage() {
743
719
}
744
720
```
745
721
746
-
<<<<<<< HEAD
747
-
**[Посмотреть пример на CodeSandbox](https://codesandbox.io/s/adoring-goodall-8wbn7)**
748
-
=======
749
-
**[Try it on CodeSandbox](https://codesandbox.io/s/sparkling-rgb-r5vfhs)**
750
-
>>>>>>> 5e9d673c6bc1530c901548c0b51af3ad3f91d594
722
+
**[Посмотреть пример на CodeSandbox](https://codesandbox.io/s/sparkling-rgb-r5vfhs)**
751
723
752
724
Он будет ловить ошибки рендера *и* ошибки получения данных в задержке. У нас может быть столько предохранителей, сколько мы захотим, но лучше расставлять их [избирательно](https://aweary.dev/fault-tolerance-react/).
753
725
@@ -757,18 +729,10 @@ function ProfilePage() {
757
729
758
730
Задержка отвечает на некоторые вопросы, но и поднимает свои собственные:
759
731
760
-
<<<<<<< HEAD
761
-
* Если какой-то компонент «задерживается», то приложением зависает? Как этого избежать?
762
-
* Что, если мы хотим показать спиннер в другой части дерева, а не «над» компонентом?
763
-
* Если мы намеренно *хотим* недолго показывать неполный пользовательский интерфейс, можем ли мы это сделать?
764
-
* Можем ли мы показывать визуальный эффект затенения текущего экрана вместо спиннера?
765
-
* Почему [последний пример с задержкой](https://codesandbox.io/s/infallible-feather-xjtbu) выводит в лог предупреждение, когда мы кликаем по кнопке «Next»?
766
-
=======
767
732
* If some component "suspends", does the app freeze? How to avoid this?
768
733
* What if we want to show a spinner in a different place than "above" the component in a tree?
769
734
* If we intentionally *want* to show an inconsistent UI for a small period of time, can we do that?
770
735
* Instead of showing a spinner, can we add a visual effect like "greying out" the current screen?
771
736
* Why does our [last Suspense example](https://codesandbox.io/s/sparkling-field-41z4r3) log a warning when clicking the "Next" button?
772
-
>>>>>>> 5e9d673c6bc1530c901548c0b51af3ad3f91d594
773
737
774
738
Чтобы ответить на эти вопросы, мы ссылаемся на следующий раздел о [Паттернах Конкурентных Пользовательских Интерфейсов](/docs/concurrent-mode-patterns.html).
Copy file name to clipboardExpand all lines: content/docs/how-to-contribute.md
+1-5Lines changed: 1 addition & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -70,11 +70,7 @@ React использует [семантическое версионирова
70
70
71
71
### Ваш первый пулреквест {#your-first-pull-request}
72
72
73
-
<<<<<<< HEAD
74
-
Уже приступили к работе над вашим первым пулреквестом? Посмотрите несколько видеороликов о том, [как нужно работать с проектом на GitHub](https://app.egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github).
75
-
=======
76
-
**[How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)**
77
-
>>>>>>> 5e9d673c6bc1530c901548c0b51af3ad3f91d594
73
+
Уже приступили к работе над вашим первым пулреквестом? Посмотрите несколько видеороликов о том, [как нужно работать с проектом на GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github).
78
74
79
75
Чтобы облегчить вам первые шаги в освоении процесса разработки React, мы завели специальный тег **[good first issues](https://github.com/facebook/react/issues?q=is:open+is:issue+label:"good+first+issue")**, по которому можно получить список не очень сложных багов. Будет хорошо, если вы начнёте работу именно с этого списка.
Copy file name to clipboardExpand all lines: content/tutorial/tutorial.md
-8Lines changed: 0 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1162,21 +1162,13 @@ class Game extends React.Component {
1162
1162
}
1163
1163
```
1164
1164
1165
-
<<<<<<< HEAD
1166
1165
Обратите внимание, что в методе `jumpTo` мы не обновили свойство `history` состояния. Это потому, что обновления состояния объединяются или, проще говоря, React обновит только те свойства, которые были указаны в методе `setState` без изменения остальных свойств. Подробнее об этом читайте в **[документации](/docs/state-and-lifecycle.html#state-updates-are-merged)**.
1167
-
=======
1168
-
Notice in `jumpTo` method, we haven't updated `history` property of the state. That is because state updates are merged or in more simple words React will update only the properties mentioned in `setState` method leaving the remaining state as is. For more info **[see the documentation](/docs/state-and-lifecycle.html#state-updates-are-merged)**.
1169
-
>>>>>>> 5e9d673c6bc1530c901548c0b51af3ad3f91d594
1170
1166
1171
1167
Мы сделаем ещё несколько изменений в методе Game `handleClick`, который выполняется когда вы кликаете на клетки.
1172
1168
1173
1169
Добавленный нами `stepNumber` указывает номер хода, отображающегося пользователю. Когда мы делаем очередной ход, нам нужно обновить `stepNumber` используя `stepNumber: history.length` как часть аргумента для `this.setState`. Это гарантирует, что мы не застрянем, показывая одно и то же после того, как был сделан новый ход.
1174
1170
1175
-
<<<<<<< HEAD
1176
1171
Мы также заменим чтение `this.state.history` на `this.state.history.slice(0, this.state.stepNumber + 1)`. Это гарантирует, что если мы «вернёмся назад», а затем сделаем новый шаг из этой точки, мы удалим всю «будущую» историю, которая перестала быть актуальной.
1177
-
=======
1178
-
We will also replace reading `this.state.history` with `this.state.history.slice(0, this.state.stepNumber + 1)`. This ensures that if we "go back in time" and then make a new move from that point, we throw away all the "future" history that would now be incorrect.
1. Если вам кажется, что используется корректный проп, внимательно проверьте правильность его написания. Часто бывают написаны с ошибками `aria-labelledby` и `aria-activedescendant`.
10
10
11
-
<<<<<<< HEAD
12
-
2. React пока не распознаёт определённый вами атрибут. Скорее всего эта проблема будет решена в будущей версии React. На данный момент React удаляет все неизвестные атрибуты, поэтому их присутствие в приложении не приведёт к их рендеру.
13
-
=======
14
-
2. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React.
15
-
>>>>>>> 5e9d673c6bc1530c901548c0b51af3ad3f91d594
11
+
2. React пока не распознаёт определённый вами атрибут. Скорее всего эта проблема будет решена в будущей версии React.
0 commit comments