Skip to content

Commit d3e74e8

Browse files
committed
Break down complex sentences and fix typos
1 parent ce67c66 commit d3e74e8

File tree

1 file changed

+16
-12
lines changed

1 file changed

+16
-12
lines changed

content/docs/state-and-lifecycle.md

+16-12
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ prev: components-and-props.html
88
next: handling-events.html
99
---
1010

11-
На этой странице представлены понятия «состояния» (state) и «жизненного цикла» (lifecycle) React-компонентов. Подробный [справочник API компонентов доступен по ссылке](/docs/react-component.html) .
11+
На этой странице представлены понятия «состояние» (state) и «жизненный цикл» (lifecycle) React-компонентов. Подробный [справочник API компонентов находится по этой ссылке](/docs/react-component.html).
1212

1313
В качестве примера рассмотрим идущие часы из [предыдущего раздела](/docs/rendering-elements.html#updating-the-rendered-element). В главе [Рендeринг элементов](/docs/rendering-elements.html#rendering-an-element-into-the-dom) мы изучили лишь один способ обновления UI — вызвать `ReactDOM.render()` для изменения результата рендера:
1414

@@ -157,7 +157,7 @@ class Clock extends React.Component {
157157
}
158158
```
159159

160-
Классовые компоненты всегда должны вызывать базовый конструктор с передачей ему `props`.
160+
Классовые компоненты всегда должны вызывать базовый конструктор с агрументом `props`.
161161

162162
3) Удалим проп `date` из элемента `<Clock />`:
163163

@@ -197,17 +197,17 @@ ReactDOM.render(
197197

198198
[**Посмотреть на CodePen**](http://codepen.io/gaearon/pen/KgQpJd?editors=0010)
199199

200-
Следущий этап — создать собственный таймер внутри `Clock` и обновлять компонент каждую секунду.
200+
Теперь осталось только создать собственный таймер внутри `Clock` и обновлять компонент каждую секунду.
201201

202202
## Добавим методы жизненного цикла в класс {#adding-lifecycle-methods-to-a-class}
203203

204204
В приложениях с множеством компонентов очень важно освобождать используемые системные ресурсы когда компоненты удаляются.
205205

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) всякий раз, когда это происходит.
207207

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) при каждой «размонтировке».
209209

210-
Давайте объявим специальные методы - когда компонент устанавливается (монтируется) или удаляется (размонтируется) он будет их вызывать:
210+
Объявим специальные методы, которые компонент будет вызывать при монтировнии и размонтировании:
211211

212212
```js{7-9,11-13}
213213
class Clock extends React.Component {
@@ -250,7 +250,7 @@ class Clock extends React.Component {
250250

251251
Обратите внимание, что мы сохраняем ID таймера в `this`.
252252

253-
В классовых компонентах React сам создает `this.props`, у этого поля так же как и у `this.state` особое назначение. Однако, если вам нужно сохранить информацию, которая не является частью процесса обработки данных React, можете вручную добавить дополнительные поля в класс (например, ID таймера).
253+
В классовых компонентах у полей `this.props` и `this.state` особое назначение, более того, React сам создает `this.props`. Вы можете вручную добавить новые поля (например, ID таймера), если нужно сохранить дополнительную информацию о классе.
254254

255255
Удалим таймер в методе жизненного цикла `componentWillUnmount()`:
256256

@@ -260,7 +260,9 @@ class Clock extends React.Component {
260260
}
261261
```
262262

263-
Наконец, реализуем метод `tick()` — он запускается таймером каждую секунду и использует `this.setState()`, который планирует обновление внутреннего состояния компонента:
263+
Наконец, реализуем метод `tick()`. Он запускается таймером каждую секунду и использует `this.setState()`.
264+
265+
`this.setState()` планирует обновление внутреннего состояния компонента:
264266

265267
```js{18-22}
266268
class Clock extends React.Component {
@@ -304,7 +306,7 @@ ReactDOM.render(
304306

305307
[**Посмотреть на CodePen**](http://codepen.io/gaearon/pen/amqdNA?editors=0010)
306308

307-
Результат — часы обновляются каждую секунду.
309+
Теперь часы обновляются каждую секунду.
308310

309311
Давайте рассмотрим наше решение и разберем порядок, в котором вызываются методы:
310312

@@ -320,7 +322,7 @@ ReactDOM.render(
320322

321323
## Как правильно использовать состояние {#using-state-correctly}
322324

323-
Важно знать три детали о правильно применении `setState()`.
325+
Важно знать три детали о правильном применении `setState()`.
324326

325327
### Не изменяйте состояние напрямую {#do-not-modify-state-directly}
326328

@@ -355,7 +357,7 @@ this.setState({
355357
});
356358
```
357359

358-
Правильно будет использовать второй вариант вызова `setState()`, который принимает функцию, а не объект. Эта функция получит предыдущее состояние в качестве первого аргумента и значения пропс непосредственно во время обновления в качестве второго аргумента:
360+
Правильно будет использовать второй вариант вызова `setState()`, который принимает функцию, а не объект. Эта функция получит предыдущее состояние в качестве первого аргумента и значения пропсов непосредственно во время обновления в качестве второго аргумента:
359361

360362
```js
361363
// Правильно
@@ -413,7 +415,9 @@ this.setState(function(state, props) {
413415

414416
## Однонаправленный поток данных {#the-data-flows-down}
415417

416-
В иерархии компонентов, ни родительский, ни дочерние компоненты не знают с состоянием (stateful) другие компоненты или без состояния (stateless). Также не важно, как был создан определенный компонент — с помощью функции или класса. Поэтому, состояние часто называют «локальным», «внутренним» или инкапсулированным. Оно доступно только для самого компонента и скрыто от других.
418+
В иерархии компонентов, ни родительский, ни дочерние компоненты не знают задано ли состояние другого компонента. Также не важно, как был создан определенный компонент — с помощью функции или класса.
419+
420+
Состояние часто называют «локальным», «внутренним» или инкапсулированным. Оно доступно только для самого компонента и скрыто от других.
417421

418422
Компонент может передать своё состояние вниз по дереву в виде пропсов дочерних компонентов:
419423

0 commit comments

Comments
 (0)