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/useEffect.md
+8-8Lines changed: 8 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -44,7 +44,7 @@ function ChatRoom({ roomId }) {
44
44
45
45
#### Параметры {/*parameters*/}
46
46
47
-
* `setup`: Функция *установки* вашего эффекта. Если нужно, из функции можно вернуть функцию *очистки*. Сначала React вызовет `setup`, когда в первый раз добавит компонент в DOM. Потом при изменении зависимостей будет вызывать после рендеринга сначала функцию очистки со старыми зависимостями (если такая была), и затем функцию установки с новыми зависимостями. В конце React вызовет последнюю полученную функцию очистки, когда удалит компонент из DOM.
47
+
* `setup`: Функция *установки* вашего эффекта. Если нужно, из функции можно вернуть функцию *сброса*. Сначала React вызовет `setup`, когда в первый раз добавит компонент в DOM. Потом при изменении зависимостей будет вызывать после рендеринга сначала функцию сброса со старыми зависимостями (если такая была), и затем функцию установки с новыми зависимостями. В конце React вызовет последнюю полученную функцию сброса, когда удалит компонент из DOM.
48
48
49
49
* **необязательный** `dependencies`: Список всех реактивных значений, от которых зависит функция `setup`: пропсы, состояние, переменные и функции, объявленные непосредственно в теле вашего компонента. Если вы [настроите свой линтер под React](/learn/editor-setup#linting), то он сможет автоматически следить, чтобы все нужные реактивные значения были указаны в зависимостях. Количество зависимостей должно быть всегда одинаковое, а сам список нужно указать прямо в месте передачи параметра как `[dep1, dep2, dep3]`. React будет сравнивать старые и новые значения зависимостей через [`Object.is`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Если не указать зависимости совсем, то эффект будет запускаться после каждого рендеринга. [Важно понимать, как будет отличаться поведение, если передать список с зависимостями, пустой список, или не передать ничего.](#examples-dependencies)
50
50
@@ -58,7 +58,7 @@ function ChatRoom({ roomId }) {
58
58
59
59
* Если ваша цель **не в том, чтобы синхронизировать компонент с некой внешней системой,** то [возможно, вам и не нужен Эффект.](/learn/you-might-not-need-an-effect)
60
60
61
-
* В Строгом режиме (Strict Mode) после первого рендеринга React **вызовет `setup` дважды**: один раз вызовет `setup` и сразу его очистку, и затем вызовет `setup` как обычно. Это будет происходить только в режиме разработки. Такой тест помогает убедиться, что очистка эффекта "обратна" его установке: она отменяет и откатывает всю ту работу, которую проделала функция `setup`. Если у вас нет функции очистки, а тест приводит к неправильной работе -- значит [вам нужна функция очистки](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development).
61
+
* В Строгом режиме (Strict Mode) после первого рендеринга React **вызовет `setup` дважды**: один раз вызовет `setup` и сразу его сброс, и затем вызовет `setup` как обычно. Это будет происходить только в режиме разработки. Такой тест помогает убедиться, что сброс эффекта "обратен" его установке: он отменяет и откатывает всю ту работу, которую проделала функция `setup`. Если у вас нет функции сброса, а тест приводит к неправильной работе -- значит [вам нужна функция сброса](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development).
62
62
63
63
* Если эффект зависит от объектов или функций, которые создаются в компоненте, есть риск, что **эффект будет запускаться слишком часто**. Такие лишние зависимости можно убрать, переместив создание [объекта](#removing-unnecessary-object-dependencies) или [функции](#removing-unnecessary-function-dependencies) внутрь эффекта. Кроме того можно [убрать зависимость от состояния, если эффект просто его обновляет](#updating-state-based-on-previous-state-from-an-effect). А [не реактивную логику](#reading-the-latest-props-and-state-from-an-effect) можно вынести за пределы эффекта.
64
64
@@ -99,24 +99,24 @@ function ChatRoom({ roomId }) {
99
99
В `useEffect` нужно передать два аргумента:
100
100
101
101
1. *Функцию установки*, которая <CodeStep step={1}>устанавливает эффект,</CodeStep> подключаясь к внешней системе.
102
-
- Установка должна вернуть *функцию очистки*, которая <CodeStep step={2}>очищает эффект</CodeStep>, отключаясь от внешней системы.
102
+
- Установка должна вернуть *функцию сброса*, которая <CodeStep step={2}>сбрасывает эффект</CodeStep>, отключаясь от внешней системы.
103
103
2. <CodeStep step={3}>Список зависимостей</CodeStep> этих функций, где перечислены все нужные им значения в компоненте.
104
104
105
-
**По мере необходимости React вызовет функции установки и очистки несколько раз:**
105
+
**По мере необходимости React вызовет функции установки и сброса несколько раз:**
106
106
107
107
1. Когда ваш компонент появится на странице *(монтируется)*, выполнится <CodeStep step={1}>код установки.</CodeStep>
108
108
2. После каждого рендеринга, в котором изменились <CodeStep step={3}>зависимости:</CodeStep>
109
-
- Сначала запустится <CodeStep step={2}>код очистки</CodeStep> со старыми пропсами и состоянием.
109
+
- Сначала запустится <CodeStep step={2}>код сброса</CodeStep> со старыми пропсами и состоянием.
110
110
- Затем запустится <CodeStep step={1}>код установки</CodeStep> с новыми пропсами и состоянием.
111
-
3. В конце, когда ваш компонент будет удалён со страницы *(размонтируется)*, выполнится <CodeStep step={2}>код очистки</CodeStep>.
111
+
3. В конце, когда ваш компонент будет удалён со страницы *(размонтируется)*, выполнится <CodeStep step={2}>код сброса</CodeStep>.
112
112
113
113
**Разберём эту последовательность на примере кода выше.**
114
114
115
115
Когда в примере выше компонент `ChatRoom` добавится на страницу, эффектом добавления станет подключение к чату, используя начальные значения `roomId` и `serverUrl`. Если в процессе рендеринга `serverUrl` или `roomId` изменятся (например, пользователь выберет в выпадающем меню другой чат), эффект *отключится от предыдущего чата, и подключится к новому чату.* А когда компонент будет удалён со страницы, эффект закроет последнее подключение.
116
116
117
-
**В режиме разработки [для выявления дефектов](/learn/synchronizing-with-effects#step-3-add-cleanup-if-needed) React будет запускать один предварительный цикл <CodeStep step={1}>установки</CodeStep> и <CodeStep step={2}>очистки</CodeStep> перед тем, как начинать <CodeStep step={1}>установку</CodeStep> как обычно.** Это такой стресс-тест, проверяющий, что логика вашего эффекта реализована правильно. Если вы видите, что тест создаёт проблемы -- значит у вас в логике очистки чего-то не хватает. Код очистки должен отменять и откатывать всю ту работу, которую проделал код установки. Эмпирическое правило такое: пользователь не должен замечать разницы, вызвалась установка один раз (как в продакшене) или последовательностью *установка* → *очистка* → *установка* (как в режиме разработки). [См. решения для типичных ситуаций.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development)
117
+
**В режиме разработки [для выявления дефектов](/learn/synchronizing-with-effects#step-3-add-cleanup-if-needed) React будет запускать один предварительный цикл <CodeStep step={1}>установки</CodeStep> и <CodeStep step={2}>сброса</CodeStep> перед тем, как начинать <CodeStep step={1}>установку</CodeStep> как обычно.** Это такой стресс-тест, проверяющий, что логика вашего эффекта реализована правильно. Если вы видите, что тест создаёт проблемы -- значит у вас в логике сброса чего-то не хватает. Код сброса должен отменять и откатывать всю ту работу, которую проделал код установки. Эмпирическое правило такое: пользователь не должен замечать разницы, вызвалась установка один раз (как в продакшене) или последовательностью *установка* → *сброс* → *установка* (как в режиме разработки). [См. решения для типичных ситуаций.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development)
118
118
119
-
**Старайтесь [описывать каждый эффект, как отдельный процесс,](/learn/lifecycle-of-reactive-effects#each-effect-represents-a-separate-synchronization-process) а так же [рассматривать каждую установку вместе с её очисткой, как одно целое.](/learn/lifecycle-of-reactive-effects#thinking-from-the-effects-perspective)** Монтируется компонент, обновляется, или размонтируется -- не должно играть роли. Если правильно реализовать очистку -- как "зеркальное отражение" установки, -- то ваш эффект сможет без последствий устанавливаться и очищаться настолько часто, насколько потребуется.
119
+
**Старайтесь [описывать каждый эффект, как отдельный процесс,](/learn/lifecycle-of-reactive-effects#each-effect-represents-a-separate-synchronization-process) а так же [рассматривать каждую установку вместе с её сбросом, как одно целое.](/learn/lifecycle-of-reactive-effects#thinking-from-the-effects-perspective)** Монтируется компонент, обновляется, или размонтируется -- не должно играть роли. Если правильно реализовать сброс -- как "зеркальное отражение" установки, -- то ваш эффект сможет без последствий устанавливаться и сбрасываться настолько часто, насколько потребуется.
0 commit comments