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
Обратите внимание, что для React всё ещё может быть необходим повторный рендер этого компонента. Это не должно быть проблемой, потому что React не будет сильно «углубляться» в дерево. Если вы делаете дорогостоящие вычисления во время рендеринга, вы можете оптимизировать их с помощью `useMemo`.
110
110
111
-
#### Batching of state updates {#batching-of-state-updates}
111
+
#### Группировка обновлений состояния {#batching-of-state-updates}
112
112
113
-
React may group several state updates into a single re-render to improve performance. Normally, this improves performance and shouldn't affect your application's behavior.
113
+
React может группировать несколько обновлений состояния в один повторный рендер для улучшения производительности. Обычно это улучшает производительность и не должно влиять на поведение вашего приложения.
114
114
115
-
Before React 18, only updates inside React event handlers were batched. Starting with React 18, [batching is enabled for all updates by default](/blog/2022/03/08/react-18-upgrade-guide.html#automatic-batching). Note that React makes sure that updates from several *different* user-initiated events -- for example, clicking a button twice -- are always processed separately and do not get batched. This prevents logical mistakes.
115
+
До 18 версии React группировал только обновления внутри обработчиков событий. Начиная с 18 версии, [группировка включена по умолчанию для всех обновлений](/blog/2022/03/08/react-18-upgrade-guide.html#automatic-batching). Обратите внимание, что если обновления вызваны несколькими *различными* действиями пользователя -- например, пользователь дважды кликнул на кнопку -- то они обрабатываются раздельно и не будут сгруппированы. Это позволяет избежать логических ошибок.
116
116
117
-
In the rare case that you need to force the DOM update to be applied synchronously, you may wrap it in[`flushSync`](/docs/react-dom.html#flushsync). However, this can hurt performance so do this only where needed.
117
+
В редких случаях, когда вам нужно вызвать принудительное синхронное обновление DOM, вы можете обернуть его в[`flushSync`](/docs/react-dom.html#flushsync). Однако это может вызвать ухудшение производительности, используйте это только в тех случаях, где это действительно нужно.
118
118
119
119
### `useEffect` {#useeffect}
120
120
@@ -152,11 +152,11 @@ useEffect(() => {
152
152
153
153
Однако не все эффекты могут быть отложены. Например, изменение DOM, которое видно пользователю, должно запускаться синхронно до следующей отрисовки, чтобы пользователь не замечал визуального несоответствия. (Различие концептуально схоже с пассивным и активным слушателями событий.) Для этих типов эффектов React предоставляет один дополнительный хук, называемый [`useLayoutEffect`](#uselayouteffect). Он имеет ту же сигнатуру, что и `useEffect`, и отличается только в его запуске.
154
154
155
-
Additionally, starting in React 18, the function passed to `useEffect` will fire synchronously**before**layout and paint when it's the result of a discrete user input such as a click, or when it's the result of an update wrapped in [`flushSync`](/docs/react-dom.html#flushsync). This behavior allows the result of the effect to be observed by the event system, or by the caller of [`flushSync`](/docs/react-dom.html#flushsync).
155
+
Также с 18 версии React, функция, переданная в `useEffect`, будет вызвана синхронно**перед**разметкой и отрисовкой, если эффект был вызван действием пользователя или результат обновления был обернут в [`flushSync`](/docs/react-dom.html#flushsync). Такое поведение позволяет системе событий или функции, вызвавшей [`flushSync`](/docs/react-dom.html#flushsync) следить за результатом эффекта.
156
156
157
157
> Примечание
158
-
>
159
-
> This only affects the timing of when the function passed to `useEffect` is called - updates scheduled inside these effects are still deferred. This is different than[`useLayoutEffect`](#uselayouteffect), which fires the function and processes the updates inside of it immediately.
158
+
>
159
+
> Это влияет только на время, когда функция, переданная в `useEffect`, будет вызвана - обновления, которые запланированы внутри эффектов останутся отложенными. Это поведение отлично от[`useLayoutEffect`](#uselayouteffect), который вызывает функцию и обрабатывает обновления внутри него мнгновенно.
160
160
161
161
Хотя `useEffect` откладывается до тех пор, пока браузер не выполнит отрисовку, он гарантированно срабатывает перед любыми новыми рендерами. React всегда полностью применяет эффекты предыдущего рендера перед началом нового обновления.
> Both`render`and`hydrate`have been replaced with new [client methods](/docs/react-dom-client.html)in React 18. These methods will warn that your app will behave as if it's running React 17 (learn more [here](https://reactjs.org/link/switch-to-createroot)).
37
+
> Примечание:
38
+
>
39
+
> Методы`render`и`hydrate`были заменены на новые [client методы](https://reactjs.org/docs/react-dom-client.html)в React 18. Эти методы будут предупреждать, что ваше приложение будет работать, словно используется версия React 17 (узнайте больше [здесь](https://reactjs.org/link/switch-to-createroot)).
40
40
41
41
### Поддержка браузерами {#browser-support}
42
42
@@ -54,43 +54,43 @@ React поддерживает все современные браузеры,
54
54
createPortal(child, container)
55
55
```
56
56
57
-
Creates a portal. Portals provide a way to [render children into a DOM node that exists outside the hierarchy of the DOM component](/docs/portals.html).
57
+
Создаёт портал. Порталы предоставляют способ [отрендерить дочерние элементы в узле DOM, который существует вне иерархии DOM-компонента](/docs/portals.html).
58
58
59
59
### `flushSync()` {#flushsync}
60
60
61
61
```javascript
62
62
flushSync(callback)
63
63
```
64
64
65
-
Force React to flush any updates inside the provided callback synchronously. This ensures that the DOM is updated immediately.
65
+
Заставляет React произвести любые обновления внутри колбэка синхронно. При этом DOM обновляется сразу.
66
66
67
67
```javascript
68
-
//Force this state update to be synchronous.
68
+
//Принудительно укажем, что данное обновление состояния должно быть синхронным.
69
69
flushSync(() => {
70
70
setCount(count +1);
71
71
});
72
-
//By this point, DOM is updated.
72
+
//К этому моменту DOM уже обновлен.
73
73
```
74
74
75
75
> Примечание:
76
-
>
77
-
> `flushSync`can significantly hurt performance. Use sparingly.
78
-
>
79
-
> `flushSync`may force pending Suspense boundaries to show their `fallback`state.
80
-
>
81
-
> `flushSync`may also run pending effects and synchronously apply any updates they contain before returning.
82
-
>
83
-
> `flushSync`may also flush updates outside the callback when necessary to flush the updates inside the callback. For example, if there are pending updates from a click, React may flush those before flushing the updates inside the callback.
84
-
85
-
## Legacy Reference {#legacy-reference}
76
+
>
77
+
> `flushSync`может сильно влиять на производительность. Используйте в редких случаях.
78
+
>
79
+
> `flushSync`может заставить Suspense, которые ожидают содержимое, показывать их `fallback`состояние.
80
+
>
81
+
> `flushSync`может вызывать ожидающие эффекты и синхронно применять любые их обновления перед возвратом.
82
+
>
83
+
> `flushSync`может вызывать обновления вне колбэка, если это нужно для выполнения обновлений внутри колбэка. Например, если есть ожидающие обновления от клика, React может применить их до того, как применит обновления внутри колбэка.
84
+
85
+
## Устаревшие методы {#legacy-reference}
86
86
### `render()` {#render}
87
87
```javascript
88
88
render(element, container[, callback])
89
89
```
90
90
91
91
> Примечание:
92
92
>
93
-
> `render`has been replaced with `createRoot`in React 18. See [createRoot](/docs/react-dom-client.html#createroot) for more info.
93
+
> `render`был заменен на `createRoot`в React 18. Подробнее о [createRoot](https://reactjs.org/docs/react-dom-client.html#createroot).
94
94
95
95
Рендерит React-элемент в DOM-элемент, переданный в аргумент `container` и возвращает [ссылку](/docs/more-about-refs.html) на компонент (или возвращает `null` для [компонентов без состояния](/docs/components-and-props.html#function-and-class-components)).
0 commit comments