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: src/content/reference/react/useInsertionEffect.md
+40-40Lines changed: 40 additions & 40 deletions
Original file line number
Diff line number
Diff line change
@@ -4,13 +4,13 @@ title: useInsertionEffect
4
4
5
5
<Pitfall>
6
6
7
-
`useInsertionEffect`is for CSS-in-JS library authors. Unless you are working on a CSS-in-JS library and need a place to inject the styles, you probably want[`useEffect`](/reference/react/useEffect)or[`useLayoutEffect`](/reference/react/useLayoutEffect) instead.
7
+
`useInsertionEffect`предназначен для авторов библиотек CSS-in-JS. Если вы не работаете над библиотекой CSS-in-JS и вам не нужно место для внедреня стилей, вам вероятно понадобится[`useEffect`](/reference/react/useEffect)или[`useLayoutEffect`](/reference/react/useLayoutEffect).
8
8
9
9
</Pitfall>
10
10
11
11
<Intro>
12
12
13
-
`useInsertionEffect`allows inserting elements into the DOM before any layout Effects fire.
13
+
`useInsertionEffect`позволяет добавлять элементы в DOM, до срабатывания эффектов, вызванных `useLayoutEffect` и `useEffect`.
Call`useInsertionEffect` to insert styles before any Effects fire that may need to read layout:
29
+
Вызовите`useInsertionEffect`, чтобы вставить стили до того, как сработают любые эффекты, которым может потребоваться чтение разметки:
30
30
31
31
```js
32
32
import { useInsertionEffect } from'react';
33
33
34
-
//Inside your CSS-in-JS library
34
+
//Внутри вашей бибилиотеки CSS-in-JS
35
35
functionuseCSS(rule) {
36
36
useInsertionEffect(() => {
37
-
// ... inject <style> tags here ...
37
+
// ... вставьте свои теги <style> сюда ...
38
38
});
39
39
return rule;
40
40
}
41
41
```
42
42
43
-
[See more examples below.](#usage)
43
+
[Больше примеров ниже.](#usage)
44
44
45
-
#### Parameters {/*parameters*/}
45
+
#### Параметры {/*parameters*/}
46
46
47
-
* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. When your component is added to the DOM, but before any layout Effects fire, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. When your component is removed from the DOM, React will run your cleanup function.
47
+
* `setup`: Функция с логикой вашего эффекта. Ваша setup-функция, опционально, может возвращать функцию *очистки*. Перед тем, как ваш компонент добавится в DOM, React запустит вашу setup-функцию. После каждого повторного рендера с изменёнными зависимостями, React запустит функцию очистки (если вы её предоставили) со старыми значениями, а затем запустит вашу setup-функцию с новыми значениями. Перед тем как ваш компонент удалится из DOM, React запустит функцию очистки.
48
48
49
-
* **optional** `dependencies`: The list of all reactive values referenced inside of the `setup` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm. If you don't specify the dependencies at all, your Effect will re-run after every re-render of the component.
49
+
* `dependencies`: Список всех реактивных значений, на которые ссылается код функции `setup`. К реактивным значениям относятся пропсы, состояние, а также все переменные и функции, объявленные непосредственно в теле компонента. Если ваш линтер [настроен для использования с React](/learn/editor-setup#linting), он проверит, что каждое реактивное значение правильно указано как зависимость. Список зависимостей должен иметь постоянное количество элементов и быть записан примерно так: `[dep1, dep2, dep3]`. React будет сравнивать каждую зависимость с предыдущим значением, используя алгоритм сравнения [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Если не указать зависимости вообще, то эффект будет запускаться заново после каждого повторного рендера компонента.
50
50
51
-
#### Returns {/*returns*/}
51
+
#### Возвращаемое значение {/*returns*/}
52
52
53
-
`useInsertionEffect`returns`undefined`.
53
+
`useInsertionEffect`возвращает`undefined`.
54
54
55
-
#### Caveats {/*caveats*/}
55
+
#### Предостережения {/*caveats*/}
56
56
57
-
* Effects only run on the client. They don't run during server rendering.
58
-
* You can't update state from inside`useInsertionEffect`.
59
-
* By the time`useInsertionEffect`runs, refs are not attached yet.
60
-
* `useInsertionEffect`may run either before or after the DOM has been updated. You shouldn't rely on the DOM being updated at any particular time.
61
-
* Unlike other types of Effects, which fire cleanup for every Effect and then setup for every Effect, `useInsertionEffect`will fire both cleanup and setup one component at a time. This results in an "interleaving" of the cleanup and setup functions.
57
+
* Эффекты выполняются только на клиенте. Они не выполняются во время серверного рендера.
58
+
* Вы не можете обновить состояние изнутри`useInsertionEffect`.
59
+
* К моменту выполнения`useInsertionEffect`ссылки ещё не прикреплены, а DOM ещё не обновлён.
60
+
* `useInsertionEffect`может выполняться как до, так и после обновления DOM. Не следует полагаться на то, что DOM будет обновлён в какой-то конкретный момент.
61
+
* В отличие от других типов эффектов, которые запускают очистку для каждого эффекта, а затем установку для каждого эффекта, `useInsertionEffect`будет запускать очистку и установку поочерёдно для каждого компонента. Это приводит к "переплетению" функций очистки и установки.
62
62
---
63
63
64
-
## Usage {/*usage*/}
64
+
## Использование {/*usage*/}
65
65
66
-
### Injecting dynamic styles from CSS-in-JS libraries {/*injecting-dynamic-styles-from-css-in-js-libraries*/}
66
+
### Внедрение динамических стилей из библиотек CSS-in-JS {/*injecting-dynamic-styles-from-css-in-js-libraries*/}
67
67
68
-
Traditionally, you would style React components using plain CSS.
68
+
Традиционно для стилизации компонентов React используется обычный CSS.
69
69
70
70
```js
71
-
//In your JS file:
71
+
//В вашем JS-файле:
72
72
<button className="success"/>
73
73
74
-
//In your CSS file:
74
+
//В вашем CSS-файле:
75
75
.success { color: green; }
76
76
```
77
77
78
-
Some teams prefer to author styles directly in JavaScript code instead of writing CSS files. This usually requires using a CSS-in-JS library or a tool. There are three common approaches to CSS-in-JS:
78
+
Некоторые команды предпочитают создавать стили непосредственно в коде JavaScript, вместо того чтобы писать файлы CSS. Обычно это требует использования библиотеки или инструмента CSS-in-JS. Существует три распространённых подхода к CSS-in-JS:
If you use CSS-in-JS, we recommend a combination of the first two approaches (CSS files for static styles, inline styles for dynamic styles). **We don't recommend runtime `<style>`tag injection for two reasons:**
84
+
Если вы используете CSS-in-JS, мы рекомендуем комбинацию первых двух подходов (файлы CSS для статических стилей, встроенные стили для динамических стилей). Мы не рекомендуем внедрение тегов `<style>`во время выполнения по двум причинам:
85
85
86
-
1. Runtime injection forces the browser to recalculate the styles a lot more often.
87
-
2. Runtime injection can be very slow if it happens at the wrong time in the React lifecycle.
86
+
1. Внедрение во время выполнения заставляет браузер пересчитывать стили гораздо чаще.
87
+
2. Внедрение может быть очень медленным, если это происходит в неподходящее время жизненного цикла React.
88
88
89
-
The first problem is not solvable, but`useInsertionEffect`helps you solve the second problem.
89
+
Первая проблема неразрешима, но`useInsertionEffect`помогает решить вторую проблему.
90
90
91
-
Call`useInsertionEffect` to insert the styles before any layout Effects fire:
91
+
Вызовите`useInsertionEffect`, чтобы вставить стили до срабатывания любых эффектов разметки:
92
92
93
93
```js {4-11}
94
-
//Inside your CSS-in-JS library
94
+
//Внутри вашей CSS-in-JS библиотеки
95
95
let isInserted =newSet();
96
96
functionuseCSS(rule) {
97
97
useInsertionEffect(() => {
98
-
//As explained earlier, we don't recommend runtime injection of <style> tags.
99
-
//But if you have to do it, then it's important to do in useInsertionEffect.
98
+
//Как было объяснено ранее, мы не рекомендуем внедрение тегов <style> во время выполнения.
99
+
//Но если вам нужно это сделать, то важно использовать для этого useInsertionEffect.
100
100
if (!isInserted.has(rule)) {
101
101
isInserted.add(rule);
102
102
document.head.appendChild(getStyleForRule(rule));
@@ -111,7 +111,7 @@ function Button() {
111
111
}
112
112
```
113
113
114
-
Similarly to`useEffect`, `useInsertionEffect`does not run on the server. If you need to collect which CSS rules have been used on the server, you can do it during rendering:
114
+
Схожим образом`useEffect`, `useInsertionEffect`не запускается на сервере. Если вам нужно собрать информацию о том, какие CSS-правила были использованы на сервере, вы можете сделать это во время рендера:
115
115
116
116
```js {1,4-6}
117
117
let collectedRulesSet =newSet();
@@ -127,14 +127,14 @@ function useCSS(rule) {
127
127
}
128
128
```
129
129
130
-
[Read more about upgrading CSS-in-JS libraries with runtime injection to `useInsertionEffect`.](https://github.com/reactwg/react-18/discussions/110)
130
+
[Читайте больше о том, как обновить библиотеки CSS-in-JS с внедрением во время выполнения до использования useInsertionEffect`.](https://github.com/reactwg/react-18/discussions/110)
131
131
132
132
<DeepDive>
133
133
134
-
#### How is this better than injecting styles during rendering or useLayoutEffect? {/*how-is-this-better-than-injecting-styles-during-rendering-or-uselayouteffect*/}
134
+
#### Почему это лучше чем внедрение стилей во время рендера или использование useLayoutEffect? {/*how-is-this-better-than-injecting-styles-during-rendering-or-uselayouteffect*/}
135
135
136
-
If you insert styles during rendering and React is processing a [non-blocking update,](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) the browser will recalculate the styles every single frame while rendering a component tree, which can be **extremely slow.**
136
+
Если вы вставляете стили во время рендеринга, и React обрабатывает [неблокирующее обновление,](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) браузер будет пересчитывать стили на каждом кадре во время рендеринга дерева компонентов, что может быть**чрезвычайно медленным.**
137
137
138
-
`useInsertionEffect`is better than inserting styles during [`useLayoutEffect`](/reference/react/useLayoutEffect) or [`useEffect`](/reference/react/useEffect) because it ensures that by the time other Effects run in your components, the`<style>`tags have already been inserted. Otherwise, layout calculations in regular Effects would be wrong due to outdated styles.
138
+
`useInsertionEffect`лучше, чем вставка стилей во время [`useLayoutEffect`](/reference/react/useLayoutEffect) или [`useEffect`](/reference/react/useEffect) потому что это гарантирует, что к тому времени, как другие эффекты запускаются в ваших компонентах, теги`<style>`уже будут вставлены. В противном случае расчёты компоновки в обычных эффектах будут неверными из-за устаревших стилей.
0 commit comments