Skip to content

Commit

Permalink
Рэў'ю перакладу
Browse files Browse the repository at this point in the history
  • Loading branch information
zubialevich committed Jul 25, 2024
1 parent 15590cb commit be4942f
Showing 1 changed file with 10 additions and 10 deletions.
20 changes: 10 additions & 10 deletions src/content/learn/state-a-components-memory.md
Original file line number Diff line number Diff line change
Expand Up @@ -151,17 +151,17 @@ button {

</Sandpack>

Апрацоўшчык падзей `handleClick` абнаўляе лакальную пераменную ` index`. Але два моманты не даюць пабачыць змены:
Апрацоўшчык падзей `handleClick` абнаўляе лакальную пераменную `index`. Але два моманты не даюць пабачыць змены:

1. **Лакальныя пераменныя не захоўваюцца паміж рэндэрамі.** Калі React другі раз рэндэрыць гэты кампанент, ён рэндэрыць яго з нуля — не ўлічваючы ніякіх змен у лакальных пераменных.
1. **Лакальныя пераменныя не захоўваюцца паміж рэндэрамі.** Калі React рэндэрыць гэты кампанент у другі раз, ён рэндэрыць яго з нуля — не ўлічваючы ніякіх змен у лакальных пераменных.
2. **Змены ў лакальных пераменных не запускаюць паўторны рэндэр.** React не разумее, што яму трэба зноў адрэндэрыць кампанент з новымі данымі.

Для таго, каб новыя даныя з'явіліся ў кампаненце, трэба зрабіць дзве рэчы:

1. **Захаваць** даныя паміж рэндэрамі.
2. **Запусціць** рэндэр кампанента з новымі данымі (перарэндэр).

Хук [`useState`](/reference/react/useState) забяспечвае наступнае:
Хук [`useState`](/reference/react/useState) дае наступнае:

1. **Пераменную стану** для захавання даных паміж рэндэрамі.
2. **Функцыю задання стану** для абнаўлення пераменнай і запуску паўторнага рэндэру кампанента.
Expand All @@ -188,7 +188,7 @@ const [index, setIndex] = useState(0);

`index` — гэта пераменная стану, а `setIndex` — функцыя задання стану.

> Сінтаксіс `[` і `]` называецца [дэструктурызацыя масіву](https://javascript.info/destructuring-assignment) і дазваляе чытаць значэнні з масіву. Масіў, які вяртае `useState`, заўсёды мае два элементы.
> Сінтаксіс `[` і `]` называецца [дэструктурызацый масіву](https://javascript.info/destructuring-assignment) і дазваляе чытаць значэнні з масіву. Масіў, які вяртае `useState`, заўсёды мае два элементы.
Вось як яны працуюць разам у `handleclick`:

Expand Down Expand Up @@ -890,15 +890,15 @@ button {

</Sandpack>

Гэта тое, што адрознівае стан ад звычайных пераменных, якія вы можаце аб'явіць у верхняй частцы вашага модуля. Стан не прывязаны да пэўнага выкліку функцыі або месца ў кодзе, ён «лакальны» для пэўнага месца на экране. Вы адрэндэрылі два кампаненты `<Gallery />`, таму іх стан захоўваецца асобна.
Гэта тое, што адрознівае стан ад звычайных пераменных, якія вы можаце аб'явіць у верхняй частцы вашага модуля. Стан не прывязаны да пэўнага выкліку функцыі або месца ў кодзе, ён «лакальны» для пэўнага месца на экране. Вы адрэндэрылі два кампаненты `<Gallery />`, таму іх станы захоўваюцца асобна.

Таксама звярніце ўвагу на тое, што кампанент `Page` нічога не «ведае» пра стан кампанента `Gallery` і нават пра тое, ці ёсць ён у яго наогул. У адрозненне ад пропсаў, **стан з'яўляецца цалкам прыватным для кампанента, які яго аб'яўляе.** Бацькоўскі кампанент не можа змяніць яго. Дзякуючы гэтаму, дадаванне стану да любога кампанента або яго выдаленне не ўплывае на астатнія кампаненты.

Што рабіць, калі вы хочаце, каб абедзве галерэі сінхранізавалі свае станы? Правільны спосаб зрабіць гэта ў React — гэта *выдаліць* стан з даччыных кампанентаў і дадаць яго да іх найбліжэйшага агульнага бацькоўскага кампанента. Наступныя некалькі старонак будуць прысвечаны арганізацыі стану аднаго кампанента, але мы вернемся да гэтай тэмы на старонцы «[Сумеснае выкарыстанне стану кампанентамі.](/learn/sharing-state-between-components)»

<Recap>

* Выкарыстоўвайце пераменную стану калі кампаненту трэба «запомніць» некаторую інфармацыю паміж рэндэрамі.
* Выкарыстоўвайце пераменную стану калі кампаненту трэба «запомніць» нейкую інфармацыю паміж рэндэрамі.
* Пераменныя стану аб'яўляюцца з дапамогай выкліку хука `useState`.
* Хукі — гэта спецыяльныя функцыі, якія пачынаюцца з `use`. Яны дазваляюць падключацца («hook into») да функцый React, такіх як стан.
* Хукі могуць нагадваць імпарт: яны павінны выклікацца безумоўна. Выклік хукаў, у тым ліку `useState`, дзейнічае толькі на верхнім узроўні кампанента або іншага хука.
Expand All @@ -914,9 +914,9 @@ button {

#### Завяршыце галерэю {/*complete-the-gallery*/}

Калі вы націскаеце «Далей» на апошняй скульптуры, код дае збой. Выправіце логіку, каб прадухіліць збой. Вы можаце зрабіць гэта, дадаўшы дадатковую логіку ў апрацоўшчык падзей або адключыўшы кнопку, калі дзеянне немагчыма.
Калі вы націскаеце «Далей» на апошняй скульптуры, код выдае памылку. Выправіце логіку, каб прадухіліць памылку. Вы можаце зрабіць гэта, дадаўшы дадатковую логіку ў апрацоўшчык падзей або адключыўшы кнопку, калі дзеянне немагчыма.

Пасля ліквідацыі збою дадайце кнопку «Назад», якая паказвае папярэднюю скульптуру. Яна не павінна даваць збой на першай скульптуры.
Пасля ліквідацыі памылкі дадайце кнопку «Назад», якая паказвае папярэднюю скульптуру. Яна не павінна выдаваць памылку на першай скульптуры.

<Sandpack>

Expand Down Expand Up @@ -1330,7 +1330,7 @@ h1 { margin-top: 10px; }

<Hint>

Ці існуюць нейкія абмежаванні на тое, _дзе_ могуць быць выкліканыя хукі? Ці парушае гэты кампанент якія-небудзь правілы? Праверце, ці ёсць якія-небудзь каментарыі, якія адключаюць праверку лінтара — у такіх месцах часта хаваюцца памылкі!
Ці існуюць нейкія абмежаванні на тое, _дзе_ могуць быць выкліканы хукі? Ці парушае гэты кампанент якія-небудзь правілы? Праверце, ці ёсць якія-небудзь каментарыі, якія адключаюць праверку лінтара — у такіх месцах часта хаваюцца памылкі!

</Hint>

Expand Down Expand Up @@ -1503,7 +1503,7 @@ export default function FeedbackForm() {

</Sandpack>

Пераменная стану неабходная толькі для захавання інфармацыі паміж паўторнымі рэндэрамі кампанента. У рамках аднаго апрацоўшчыка падзей добра падыдзе звычайная пераменная. Не ўводзьце пераменныя стану, калі дастаткова звычайная пераменнай.
Пераменная стану неабходна толькі для захавання інфармацыі паміж паўторнымі рэндэрамі кампанента. У рамках аднаго апрацоўшчыка падзей добра падыдзе звычайная пераменная. Не ўводзьце пераменную стану, калі дастаткова звычайнай пераменнай.

</Solution>

Expand Down

0 comments on commit be4942f

Please sign in to comment.