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
### Что делает `setState`? {#what-does-setstate-do}
10
10
11
-
`setState()` следит за изменением `состояния` компонента. `Состояние` — это объект. Когда состояние меняется, компонент рендерится повторно.
11
+
Метод `setState()` следит за изменением состояния (`state`) компонента. `state` — это объект. Когда состояние меняется, компонент рендерится повторно.
12
12
13
13
### Какая разница между `state` и `props`? {#what-is-the-difference-between-state-and-props}
14
14
15
-
[`props`](/docs/components-and-props.html) (сокращённо от англ. "properties" — свойства) и [`state`](/docs/state-and-lifecycle.html)обычными JavaScript-объектами. Несмотря на то, что оба содержат информацию, которая влияет на то, что увидим после рендера, есть существенное различие: `props`передаются*в* компонент (ведут себя как параметры функции), в то время как `state` находится *внутри* компонента (ведут себя как переменные, которые объявлены внутри функции).
15
+
[`props`](/docs/components-and-props.html) (намеренно сокращённо от англ. «properties» — свойства) и [`state`](/docs/state-and-lifecycle.html)— это обычные JavaScript-объекты. Несмотря на то, что оба содержат информацию, которая влияет на то, что увидим после рендера, есть существенное различие: `props`передаётся*в* компонент (служат как параметры функции), в то время как `state` находится *внутри* компонента (по аналогии с переменным, которые объявлены внутри функции).
16
16
17
17
Несколько полезных ресурсов для дальнейшего изучения, в каких случаях использовать `props`, а в каких — `state`:
18
-
*[Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md)
18
+
*[Props vs. State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md)
19
19
*[ReactJS: Props vs State](https://lucybain.com/blog/2016/react-state-vs-pros/)
20
20
21
-
### Почему `setState`дает неверное значение? {#why-is-setstate-giving-me-the-wrong-value}
21
+
### Почему `setState`даёт неверное значение? {#why-is-setstate-giving-me-the-wrong-value}
22
22
23
-
В React, и`this.props`и `this.state` представляют значения, которые *уже были отрисованы*, например, то, что видите на экране.
23
+
В React как`this.props`, так и `this.state` представляют значения, которые *уже были отрендерены*, например, то, что видите на экране.
24
24
25
25
Вызовы `setState` являются асинхронными, поэтому не стоит рассчитывать, что `this.state` отобразит новое значение мгновенно после вызова `setState`. Необходимо добавить функцию, которая сработает только после обновления состояния, если нужно получить новое значение, основанное на текущем состоянии (ниже подробный пример).
26
26
27
-
Пример кода, который *не* будет вести себя, как ожидаем:
27
+
Пример кода, который *не* будет работать так, как ожидаем:
28
28
29
29
```jsx
30
30
incrementCount() {
@@ -39,23 +39,23 @@ handleSomething() {
39
39
this.incrementCount();
40
40
// Когда React делает последующий рендер компонента, `this.state.count` будет 1, хотя мы ожидаем 3.
41
41
42
-
//Такое поведение происходит потому, что функция `incrementCount()` берет свое значение из `this.state.count`,
43
-
// но React не обновляет `this.state.count` пока компонент не отрендерится снова.
42
+
//Так происходит, потому что функция `incrementCount()` берёт своё значение из `this.state.count`,
43
+
// но React не обновляет `this.state.count`, пока компонент не отрендерится снова.
44
44
// Получается, что `incrementCount()` обращается к текущему значению `this.state.count`, а это 0 каждый раз, и добавляет 1.
45
45
46
-
// Как исправить это поведение — разберем ниже!
46
+
// Как исправить это — разберём ниже!
47
47
}
48
48
```
49
49
50
-
Ниже о том, как исправить это поведение.
50
+
Далее перейдём к исправлению указанной проблемы.
51
51
52
-
### Как я могу обновить состояние со значением, которое приходит из текущего состояния? {#how-do-i-update-state-with-values-that-depend-on-the-current-state}
52
+
### Как обновить состояние значениями, которые зависят от текущего состояния? {#how-do-i-update-state-with-values-that-depend-on-the-current-state}
53
53
54
54
Нужно добавить функцию вместо объекта к `setState`, которая будет срабатывать только на самой последней версии состояния (пример ниже).
55
55
56
-
### В чем разница между добавлением объекта или функции к `setState`? {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate}
56
+
### В чём разница между добавлением объекта или функции к `setState`? {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate}
57
57
58
-
Добавление функции дает вам доступ к текущему состоянию внутри самой функции. Так как `setState` вызовы «сгруппированы», это помогает связать изменения и дает уверенность, что они будут идти друг за другом, а не конфликтовать.
58
+
Добавление функции даёт вам доступ к текущему состоянию внутри самой функции. Так как `setState` вызовы «сгруппированы», это помогает связать изменения и гарантирует, что они будут выполняться друг за другом, а не конфликтовать.
59
59
60
60
```jsx
61
61
incrementCount() {
@@ -66,41 +66,41 @@ incrementCount() {
66
66
}
67
67
68
68
handleSomething() {
69
-
//Возьмем снова для примера, что `this.state.count` начинается с 0.
69
+
//Возьмём снова для примера, что `this.state.count` начинается с 0.
70
70
this.incrementCount();
71
71
this.incrementCount();
72
72
this.incrementCount();
73
73
74
-
// Если посмотреть на значение `this.state.count` сейчас, это будет все еще 0.
75
-
// Но когда React отрендерит компонент снова, это будет 3.
74
+
// Если посмотреть на значение `this.state.count` сейчас, это будет по-прежнму 0.
75
+
// Но когда React отрендерит компонент снова, будет уже 3.
76
76
}
77
77
```
78
78
79
79
[Прочитать больше про setState](/docs/react-component.html#setstate)
80
80
81
-
### Когда `setState`асинхронный? {#when-is-setstate-asynchronous}
81
+
### Когда `setState`работает асинхронно? {#when-is-setstate-asynchronous}
82
82
83
-
В данный момент,`setState`асинхронный внутри event handlers (англ. «обработчик событий»).
83
+
В настоящее время`setState`работает асинхронно внутри обработчиков событий.
84
84
85
-
Это дает гарантию, например, когда `Родитель` и `Ребенок` вызывают `setState` во время клика, `Ребенок` не будет рендерится дважды. Вместо этого, React оставляет обновление состояния в самый конец событий в браузере. Это очень сильно помогает в повышении производительности в больших приложениях.
85
+
Это даёт гарантию, например, когда `Родитель` и `Ребенок` вызывают `setState` во время клика, `Ребенок` не будет рендерится дважды. Вместо этого React «откладывает» обновление состояния в самый конец событий в браузере. Это помогает сильно повысить производительность больших приложений.
86
86
87
-
Но не стоит полагаться на такое поведение полностью. В будущих версиях React будет способен получать обновления по дефолту и другими способами.
87
+
Но не стоит полностью полагаться на такое поведение. В будущих версиях React будет использовать отложенные обновления состояния по умолчанию не только в обработчиках событий.
88
88
89
89
### Почему React не обновляет `this.state` синхронно? {#why-doesnt-react-update-thisstate-synchronously}
90
90
91
-
Как говорилось ранее, React намеренно "ждет" пока все компоненты вызовут `setState()` в своих обработчиках событий прежде чем начать повторный рендер. Это избавляет от ненужных повторных рендеров.
91
+
Как говорилось ранее, React намеренно «ждёт» пока все компоненты вызовут `setState()` в своих обработчиках событий прежде чем начать повторный рендер. Это избавляет от ненужных повторных рендеров.
92
92
93
-
Но если все же остался вопрос, почему React не может просто сразу обновить `this.state` без повтороного рендеринга?
93
+
Вы можете задаваться вопросом: почему React не может просто сразу обновить `this.state` без повтороного рендеринга?
94
94
95
95
На это есть две причины:
96
96
97
-
- Это нарушит логику работы `props` и `state`, и станет причиной многих багов, которые будет сложно исправлять.
97
+
- Это нарушит логику работы `props` и `state`, а значит станет причиной многих багов, которые будет сложно исправить.
98
98
- Это сделало бы невозможным реализацию некоторых возможностей, над которыми мы сейчас работаем.
99
99
100
-
Этот [GitHubкомментарий](https://github.com/facebook/react/issues/11527#issuecomment-360199710) рассматривает конкретные примеры, которые помогут глубже изучить этот вопрос.
100
+
Этот [GitHub-комментарий](https://github.com/facebook/react/issues/11527#issuecomment-360199710) рассматривает конкретные примеры, которые помогут глубже изучить этот вопрос.
101
101
102
-
### Стоит ли мне использовать библиотеки Redux или MobX? {#should-i-use-a-state-management-library-like-redux-or-mobx}
102
+
### Стоит ли использовать такие библиотеки, как Redux или MobX? {#should-i-use-a-state-management-library-like-redux-or-mobx}
Но вообще будет здорово сначала изучить и познакомиться с React, прежде чем переходить к библиотекам. Можно сделать готовое рабочее приложение, используя только React.
106
+
Но вообще будет здорово сначала изучить React, прежде чем переходить к библиотекам. Можно создать готовое рабочее приложение, используя только React.
0 commit comments