Skip to content
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix: text-style
  • Loading branch information
bofeof committed Jun 21, 2023
commit cc9e6137a7c0bf25eae9733c2fa683be0104ed5c
24 changes: 12 additions & 12 deletions src/content/learn/state-as-a-snapshot.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ title: Состояние как снимок

<Intro>

На первый взгляд, переменные состояния выглядят как обычные JavaScript переменные, с которыми вы можете проводить операции чтения и записи. Однако, состояние больше похоже на снимок, чем на классическую переменную. Установка нового значения переменной состояния не изменяет напрямую текущее состояние, но при этом инициирует повторный рендер.
На первый взгляд, переменные состояния выглядят как обычные JavaScript-переменные, с которыми вы можете проводить операции чтения и записи. Однако, состояние больше похоже на снимок, чем на классическую переменную. Установка нового значения переменной состояния не изменяет напрямую текущее состояние, но при этом инициирует повторный рендер.

</Intro>

<YouWillLearn>

* Как установка состояния запускает повторный рендер;
* Каким образом происходит обновление состояния;
* Почему не происходит моментального обновления состояния после того, как вы задали новое значение переменной;
* Как обработчики событий получают доступ к "снимку" состояния.
* Как установка состояния запускает повторный рендер
* Каким образом происходит обновление состояния
* Почему не происходит моментального обновления состояния после того, как вы задали новое значение переменной
* Как обработчики событий получают доступ к "снимку" состояния

</YouWillLearn>

Expand Down Expand Up @@ -63,8 +63,8 @@ label, textarea { margin-bottom: 10px; display: block; }

Итак, что же происходит, когда вы нажимаете на кнопку:

1. Выполняется обработчик события `onSubmit`;
2. `setIsSent(true)` устанавливает `isSent` значение `true` и добавляет в очередь новый рендер;
1. Выполняется обработчик события `onSubmit`.
2. `setIsSent(true)` устанавливает `isSent` значение `true` и добавляет в очередь новый рендер.
3. React вновь рендерит компонент, опираясь на новое значение `isSent`.

Давайте более детально рассмотрим взаимосвязь между состоянием и рендером.
Expand All @@ -77,8 +77,8 @@ label, textarea { margin-bottom: 10px; display: block; }

Когда React повторно рендерит компонент:

1. React вызывает ваш компонент как функцию;
2. Функция возвращает новый снимок JSX;
1. React вызывает ваш компонент как функцию.
2. Функция возвращает новый снимок JSX.
3. Далее React обновляет экран в соответствии с данными, которые были возвращены со снимком JSX.

<IllustrationBlock sequential>
Expand Down Expand Up @@ -127,7 +127,7 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }

</Sandpack>

Обратите внимание, `number` увеличивается только один раз за клик.
Обратите внимание, `number` увеличивается только один раз за клик!

**Установка состояния изменяет его только для *следующего* рендера**. Во время первого рендера значение `number` равно `0`. Вот почему в обработчике `onClick` *этого текущего рендера* значение `number` по-прежнему равно `0`, даже после вызова `setNumber(number + 1)`:

Expand All @@ -141,7 +141,7 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }

Обработчик кнопки сообщает React делать следующее:

1. `setNumber(number + 1)`: `number` равно `0`, вызывай `setNumber(0 + 1)`;
1. `setNumber(number + 1)`: `number` равно `0`, вызывай `setNumber(0 + 1)`.
- React готовится изменить `number` на `1` для следующего рендера.
2. `setNumber(number + 1)`: `number` равно `0`, вызывай`setNumber(0 + 1)`.
- React готовится изменить `number` на `1` для следующего рендера.
Expand Down Expand Up @@ -241,7 +241,7 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }

</Sandpack>

Удивлены? Если вы воспользуетесь методом подстановки, вы сможете увидеть «снимок» состояния, переданного в `alert`
Удивлены? Если вы воспользуетесь методом подстановки, вы сможете увидеть «снимок» состояния, переданного в `alert`.

```js
setNumber(0 + 5);
Expand Down