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/state-and-lifecycle.md
+16-12
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,7 @@ prev: components-and-props.html
8
8
next: handling-events.html
9
9
---
10
10
11
-
На этой странице представлены понятия «состояния» (state) и «жизненного цикла» (lifecycle) React-компонентов. Подробный [справочник API компонентов доступен по ссылке](/docs/react-component.html).
11
+
На этой странице представлены понятия «состояние» (state) и «жизненный цикл» (lifecycle) React-компонентов. Подробный [справочник API компонентов находится по этой ссылке](/docs/react-component.html).
12
12
13
13
В качестве примера рассмотрим идущие часы из [предыдущего раздела](/docs/rendering-elements.html#updating-the-rendered-element). В главе [Рендeринг элементов](/docs/rendering-elements.html#rendering-an-element-into-the-dom) мы изучили лишь один способ обновления UI — вызвать `ReactDOM.render()` для изменения результата рендера:
14
14
@@ -157,7 +157,7 @@ class Clock extends React.Component {
157
157
}
158
158
```
159
159
160
-
Классовые компоненты всегда должны вызывать базовый конструктор с передачей ему`props`.
160
+
Классовые компоненты всегда должны вызывать базовый конструктор с агрументом`props`.
161
161
162
162
3) Удалим проп `date` из элемента `<Clock />`:
163
163
@@ -197,17 +197,17 @@ ReactDOM.render(
197
197
198
198
[**Посмотреть на CodePen**](http://codepen.io/gaearon/pen/KgQpJd?editors=0010)
199
199
200
-
Следущий этап — создать собственный таймер внутри `Clock` и обновлять компонент каждую секунду.
200
+
Теперь осталось только создать собственный таймер внутри `Clock` и обновлять компонент каждую секунду.
201
201
202
202
## Добавим методы жизненного цикла в класс {#adding-lifecycle-methods-to-a-class}
203
203
204
204
В приложениях с множеством компонентов очень важно освобождать используемые системные ресурсы когда компоненты удаляются.
205
205
206
-
Первоначальный рендеринг компонента в DOM называется «монтирование» (установка). Наша цель —[создавать таймер](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) всякий раз, когда это происходит.
206
+
Первоначальный рендеринг компонента в DOM называется «монтирование» (установка). Нам нужно[создавать таймер](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) всякий раз, когда это происходит.
207
207
208
-
Каждый раз когда DOM-узел, созданный компонентом, удаляется, просходит то, что мы называем «размонтирование». Учитывая важность сохранения ресурсов, мы [сбросим таймер](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval) при каждой «размонтировке».
208
+
Каждый раз когда DOM-узел, созданный компонентом, удаляется, просходит то, что мы называем «размонтирование». Учитывая важность сохранения ресурсов, мы будем [сбрасывать таймер](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval) при каждой «размонтировке».
209
209
210
-
Давайте объявим специальные методы - когда компонент устанавливается (монтируется) или удаляется (размонтируется) он будет их вызывать:
210
+
Объявим специальные методы, которые компонент будет вызывать при монтировнии и размонтировании:
211
211
212
212
```js{7-9,11-13}
213
213
class Clock extends React.Component {
@@ -250,7 +250,7 @@ class Clock extends React.Component {
250
250
251
251
Обратите внимание, что мы сохраняем ID таймера в `this`.
252
252
253
-
В классовых компонентах React сам создает `this.props`, у этого поля так же как и у `this.state` особое назначение. Однако, если вам нужно сохранить информацию, которая не является частью процесса обработки данных React, можете вручную добавить дополнительные поля в класс (например, ID таймера).
253
+
В классовых компонентах у полей `this.props` и `this.state` особое назначение, более того, React сам создает `this.props`. Вы можете вручную добавить новые поля (например, ID таймера), если нужно сохранить дополнительную информацию о классе.
254
254
255
255
Удалим таймер в методе жизненного цикла `componentWillUnmount()`:
256
256
@@ -260,7 +260,9 @@ class Clock extends React.Component {
260
260
}
261
261
```
262
262
263
-
Наконец, реализуем метод `tick()` — он запускается таймером каждую секунду и использует `this.setState()`, который планирует обновление внутреннего состояния компонента:
263
+
Наконец, реализуем метод `tick()`. Он запускается таймером каждую секунду и использует `this.setState()`.
264
+
265
+
`this.setState()` планирует обновление внутреннего состояния компонента:
264
266
265
267
```js{18-22}
266
268
class Clock extends React.Component {
@@ -304,7 +306,7 @@ ReactDOM.render(
304
306
305
307
[**Посмотреть на CodePen**](http://codepen.io/gaearon/pen/amqdNA?editors=0010)
306
308
307
-
Результат — часы обновляются каждую секунду.
309
+
Теперь часы обновляются каждую секунду.
308
310
309
311
Давайте рассмотрим наше решение и разберем порядок, в котором вызываются методы:
310
312
@@ -320,7 +322,7 @@ ReactDOM.render(
320
322
321
323
## Как правильно использовать состояние {#using-state-correctly}
322
324
323
-
Важно знать три детали о правильно применении `setState()`.
325
+
Важно знать три детали о правильном применении `setState()`.
324
326
325
327
### Не изменяйте состояние напрямую {#do-not-modify-state-directly}
326
328
@@ -355,7 +357,7 @@ this.setState({
355
357
});
356
358
```
357
359
358
-
Правильно будет использовать второй вариант вызова `setState()`, который принимает функцию, а не объект. Эта функция получит предыдущее состояние в качестве первого аргумента и значения пропс непосредственно во время обновления в качестве второго аргумента:
360
+
Правильно будет использовать второй вариант вызова `setState()`, который принимает функцию, а не объект. Эта функция получит предыдущее состояние в качестве первого аргумента и значения пропсов непосредственно во время обновления в качестве второго аргумента:
## Однонаправленный поток данных {#the-data-flows-down}
415
417
416
-
В иерархии компонентов, ни родительский, ни дочерние компоненты не знают с состоянием (stateful) другие компоненты или без состояния (stateless). Также не важно, как был создан определенный компонент — с помощью функции или класса. Поэтому, состояние часто называют «локальным», «внутренним» или инкапсулированным. Оно доступно только для самого компонента и скрыто от других.
418
+
В иерархии компонентов, ни родительский, ни дочерние компоненты не знают задано ли состояние другого компонента. Также не важно, как был создан определенный компонент — с помощью функции или класса.
419
+
420
+
Состояние часто называют «локальным», «внутренним» или инкапсулированным. Оно доступно только для самого компонента и скрыто от других.
417
421
418
422
Компонент может передать своё состояние вниз по дереву в виде пропсов дочерних компонентов:
0 commit comments