Skip to content

Commit 59cae7d

Browse files
committed
feat: changed docs for react-dom and some hooks updates
1 parent 5598b52 commit 59cae7d

File tree

2 files changed

+30
-30
lines changed

2 files changed

+30
-30
lines changed

content/docs/hooks-reference.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -108,13 +108,13 @@ const [state, setState] = useState(() => {
108108

109109
Обратите внимание, что для React всё ещё может быть необходим повторный рендер этого компонента. Это не должно быть проблемой, потому что React не будет сильно «углубляться» в дерево. Если вы делаете дорогостоящие вычисления во время рендеринга, вы можете оптимизировать их с помощью `useMemo`.
110110

111-
#### Batching of state updates {#batching-of-state-updates}
111+
#### Группировка обновлений состояния {#batching-of-state-updates}
112112

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 может группировать несколько обновлений состояния в один повторный рендер для улучшения производительности. Обычно это улучшает производительность и не должно влиять на поведение вашего приложения.
114114

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). Обратите внимание, что если обновления вызваны несколькими *различными* действиями пользователя -- например, пользователь дважды кликнул на кнопку -- то они обрабатываются раздельно и не будут сгруппированы. Это позволяет избежать логических ошибок.
116116

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). Однако это может вызвать ухудшение производительности, используйте это только в тех случаях, где это действительно нужно.
118118

119119
### `useEffect` {#useeffect}
120120

@@ -152,11 +152,11 @@ useEffect(() => {
152152

153153
Однако не все эффекты могут быть отложены. Например, изменение DOM, которое видно пользователю, должно запускаться синхронно до следующей отрисовки, чтобы пользователь не замечал визуального несоответствия. (Различие концептуально схоже с пассивным и активным слушателями событий.) Для этих типов эффектов React предоставляет один дополнительный хук, называемый [`useLayoutEffect`](#uselayouteffect). Он имеет ту же сигнатуру, что и `useEffect`, и отличается только в его запуске.
154154

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) следить за результатом эффекта.
156156

157157
> Примечание
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), который вызывает функцию и обрабатывает обновления внутри него мнгновенно.
160160
161161
Хотя `useEffect` откладывается до тех пор, пока браузер не выполнит отрисовку, он гарантированно срабатывает перед любыми новыми рендерами. React всегда полностью применяет эффекты предыдущего рендера перед началом нового обновления.
162162

content/docs/reference-react-dom.md

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,31 @@ permalink: docs/react-dom.html
1212
import * as ReactDOM from 'react-dom';
1313
```
1414

15-
If you use ES5 with npm, you can write:
15+
Если вы используете ES5 с npm, можете написать:
1616

1717
```js
1818
var ReactDOM = require('react-dom');
1919
```
2020

21-
The `react-dom` package also provides modules specific to client and server apps:
22-
- [`react-dom/client`](/docs/react-dom-client.html)
21+
Также `react-dom` предоставляет отдельные модули для клиентских и серверных приложений:
22+
- [`react-dom/client`](https://reactjs.org/docs/react-dom-client.html)
2323
- [`react-dom/server`](/docs/react-dom-server.html)
2424

2525
## Обзор {#overview}
2626

27-
The `react-dom` package exports these methods:
27+
Пакет `react-dom` экспортирует следующие методы:
2828
- [`createPortal()`](#createportal)
2929
- [`flushSync()`](#flushsync)
3030

31-
These `react-dom` methods are also exported, but are considered legacy:
31+
Следующие методы `react-dom` все еще экспортируются, но считаются устаревшими:
3232
- [`render()`](#render)
3333
- [`hydrate()`](#hydrate)
3434
- [`findDOMNode()`](#finddomnode)
3535
- [`unmountComponentAtNode()`](#unmountcomponentatnode)
3636

37-
> Примечание:
38-
>
39-
> 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)).
4040
4141
### Поддержка браузерами {#browser-support}
4242

@@ -54,43 +54,43 @@ React поддерживает все современные браузеры,
5454
createPortal(child, container)
5555
```
5656

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).
5858

5959
### `flushSync()` {#flushsync}
6060

6161
```javascript
6262
flushSync(callback)
6363
```
6464

65-
Force React to flush any updates inside the provided callback synchronously. This ensures that the DOM is updated immediately.
65+
Заставляет React произвести любые обновления внутри колбэка синхронно. При этом DOM обновляется сразу.
6666

6767
```javascript
68-
// Force this state update to be synchronous.
68+
// Принудительно укажем, что данное обновление состояния должно быть синхронным.
6969
flushSync(() => {
7070
setCount(count + 1);
7171
});
72-
// By this point, DOM is updated.
72+
// К этому моменту DOM уже обновлен.
7373
```
7474

7575
> Примечание:
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}
8686
### `render()` {#render}
8787
```javascript
8888
render(element, container[, callback])
8989
```
9090

9191
> Примечание:
9292
>
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).
9494
9595
Рендерит React-элемент в DOM-элемент, переданный в аргумент `container` и возвращает [ссылку](/docs/more-about-refs.html) на компонент (или возвращает `null` для [компонентов без состояния](/docs/components-and-props.html#function-and-class-components)).
9696

0 commit comments

Comments
 (0)