Skip to content

Commit 07483de

Browse files
committed
Edits after review
1 parent d600025 commit 07483de

File tree

1 file changed

+18
-18
lines changed

1 file changed

+18
-18
lines changed

src/content/reference/react/useId.md

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,13 @@ function PasswordField() {
3838
3939
#### Значэнні, якія вяртаюцца {/*returns*/}
4040
41-
`useId` вяртае радок з унікальным ідэнтыфікатарам, які праасацыяваны з гэтым канкрэтным выклікам `useId` у гэтым канкрэтным кампаненце.
41+
`useId` вяртае радок з унікальным ідэнтыфікатарам, які звязаны з з гэтым канкрэтным выклікам `useId` у гэтым канкрэтным кампаненце.
4242
4343
#### Агаворкі {/*caveats*/}
4444
45-
- `useId` — хук, а значыць, вы можаце яго выклікаць толькі **на верхнім узроўні вашага кампанента** ці ўнутры ўласнага хука. Ëн не можа быць выкліканы ўнутры цыкла альбо ўмовы. Калі вы гэтага патрабуеце, выміце ў новы кампанент і перанясіце стан туды.
46-
- `useId` **не мусіць быць выкарыстаны для генерацыі ключоў кэша** для [use()](/reference/react/use). Ідэнтыфікатар стабільны пакуль кампанент прымантаваны, але можа змяняцца паміж рэндарамі. Ключы кэша мусяць быць згенераванымі на падставе вашых даных.
47-
- `useId` **не мусіць быць выкарыстаны для генерацыі ключоў** у спісах. [Ключы мусяць быць згенераванымі на падставе вашых даных](/learn/rendering-lists#where-to-get-your-key).
45+
- `useId` — хук, а значыць, вы можаце выклікаць яго толькі **на верхнім узроўні вашага кампанента** ці ўнутры ўласнага хука. Ëн не можа быць выкліканы ўнутры цыкла альбо ўмовы. Калі вам усё ж гэта патрэбна, то стварыце новы кампанент і перанясіце стан туды.
46+
- `useId` **не мусіць выкарыстоўвацца для генерацыі ключоў кэша** для [use()](/reference/react/use). Ідэнтыфікатар стабільны пры манціраванні, але можа змяняцца паміж рэндарамі. Ключы кэша мусяць генерыравацца на падставе вашых даных.
47+
- `useId` **не мусіць выкарыстоўвацца для генерацыі ключоў** у спісах. [Ключы мусяць генерыравацца на падставе вашых даных](/learn/rendering-lists#where-to-get-your-key).
4848
- `useId` на дадзены момант не можа быць выкарыстаны ўнутры [асінхронных серверных кампанентаў](/reference/rsc/server-components#async-components-with-server-components).
4949
5050
---
@@ -53,7 +53,7 @@ function PasswordField() {
5353
5454
<Pitfall>
5555
56-
**Не выкарыстоўвайце `useId` для генерацыі ключоў у спісах.** [Ключы мусяць быць згенераванымі на падставе вашых даных](/learn/rendering-lists#where-to-get-your-key).
56+
**Не выкарыстоўвайце `useId` для генерацыі ключоў у спісах.** [Ключы мусяць генерыравацца на падставе вашых даных](/learn/rendering-lists#where-to-get-your-key).
5757
5858
</Pitfall>
5959
### Генерацыя ўнікальных ідэнтыфікатараў для атрыбутаў даступнасці {/*generating-unique-ids-for-accessibility-attributes*/}
@@ -79,7 +79,7 @@ function PasswordField() {
7979
8080
**Давайце разгледзім прыклад, калі гэта можа быць карысна.**
8181
82-
[Атрыбуты даступнасці ў HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) як, напрыклад, [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) дазваляюць пазначыць, што два тэгі звязаныя адно з адным. Такім чынам, як варыянт, вы можаце адзначыць, што элемент (напрыклад, поле ўводу) апісаны іншым элементам (напрыклад, параграфам).
82+
[Атрыбуты даступнасці ў HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) як, напрыклад, [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) дазваляюць пазначыць, што два тэгі звязаныя адзін з адным. Такім чынам, як варыянт, вы можаце адзначыць, што элемент (напрыклад, поле ўводу) апісаны іншым элементам (напрыклад, параграфам).
8383
8484
У звычайным HTML, вы б апісалі гэта так:
8585
@@ -92,11 +92,11 @@ function PasswordField() {
9292
/>
9393
</label>
9494
<p id="password-hint">
95-
Пароль мусіць змяшчаць як найменш 18 сімвалаў
95+
Пароль мусіць змяшчаць як мінімум 18 сімвалаў
9696
</p>
9797
```
9898
99-
Але ўказваць ідэнтыфікатар наўпрост у кодзе не з’яўляецца добрай практыкай у React. Кампанент можа быць адрэндараны болей за адзін раз на старонцы, а ідэнтыфікатары маюць быць унікальнымі! Замест указання пастаяннага ідэнтыфікатара, згенеруйце ўнікальны з дапамогай `useId`:
99+
Але ўказанне ідэнтыфікатара наўпрост у кодзе не з’яўляецца добрай практыкай у React. На старонцы кампанент можа быць адрэндараны болей за адзін раз, а ідэнтыфікатары павінны быць унікальнымі! Замест указання пастаяннага ідэнтыфікатара, згенеруйце ўнікальны з дапамогай `useId`:
100100
101101
```js {4,11,14}
102102
import { useId } from 'react';
@@ -113,14 +113,14 @@ function PasswordField() {
113113
/>
114114
</label>
115115
<p id={passwordHintId}>
116-
Пароль мусіць змяшчаць як найменш 18 сімвалаў
116+
Пароль мусіць змяшчаць як мінімум 18 сімвалаў
117117
</p>
118118
</>
119119
);
120120
}
121121
```
122122
123-
Цяпер, нават калі `PasswordField` з’явіцца на старонцы некалькі раз, згенераваныя ідэнтыфікатары не будуць канфліктаваць.
123+
Цяпер, нават калі `PasswordField` з’явіцца на старонцы некалькі разоў, згенераваныя ідэнтыфікатары не будуць канфліктаваць.
124124
125125
<Sandpack>
126126
@@ -139,7 +139,7 @@ function PasswordField() {
139139
/>
140140
</label>
141141
<p id={passwordHintId}>
142-
Пароль мусіць змяшчаць як найменш 18 сімвалаў
142+
Пароль мусіць змяшчаць як мінімум 18 сімвалаў
143143
</p>
144144
</>
145145
);
@@ -163,25 +163,25 @@ input { margin: 5px; }
163163
164164
</Sandpack>
165165
166-
[Азнаёмцеся з відэа](https://www.youtube.com/watch?v=0dNzNcuEuOo), каб пабачыць розніцу ў карыстанні з ужываннем дапаможных тэхналогій.
166+
[Азнаёмцеся з відэа](https://www.youtube.com/watch?v=0dNzNcuEuOo), каб убачыць розніцу ў карыстальніцкім досведзе пры выкарыстанні дапаможных тэхналогій.
167167
168168
<Pitfall>
169169
170-
Пры [серверным рэндарынгу](/reference/react-dom/server), **`useId` патрабуе ідэнтычнага дрэва кампанентаў на серверы і на кліенце**. Калі дрэвы, што вы рэндарыце і кліенце і серверы не суадносяцца, згенераваныя ідэнтыфікатары будуць адрознымі.
170+
Пры [серверным рэндарынгу](/reference/react-dom/server), **`useId` патрабуе ідэнтычнага дрэва кампанентаў на серверы і на кліенце**. Калі дрэвы, што вы рэндарыце на кліенце і серверы не суадносяцца, згенераваныя ідэнтыфікатары будуць адрознымі.
171171
172172
</Pitfall>
173173
174174
<DeepDive>
175175
176-
#### Чым useId лепей за нарастальнага лічыльнік? {/*why-is-useid-better-than-an-incrementing-counter*/}
176+
#### Чаму useId лепей за інкрэментальны лічыльнік? {/*why-is-useid-better-than-an-incrementing-counter*/}
177177
178-
Вы можаце задумацца: чым `useId` лепей за нарастальную глабальную пераменную накшталт `nextId++`.
178+
Вы можаце задумацца: чаму `useId` лепей за інкрэментальную глабальную пераменную накшталт `nextId++`.
179179
180180
Асноўная перавага `useId` у тым, што React забяспечваю працу пры [серверным рэндарынгу](/reference/react-dom/server). Падчас сервернага рэндарынгу, з вашых кампанентаў генеруецца HTML. Потым, на кліенце, падчас [гідратацыі](/reference/react-dom/client/hydrateRoot) адбываецца прывязка апрацоўшчыкаў падзей да згенераванага HTML. Каб гідратацыя спрацавала, вынік кліента мусіць супадаць з HTML сервера.
181181
182-
Гэта вельмі складана гарантаваць праз нарастальны лічыльнік, бо парадак, у якім кліент робіць гідратацыю кампанентаў, можа не адпавядаць парадку, у якім сервер складае HTML. Карыстаючыся `useId`, можна гарантаваць, што гідрадацыя спрацуе, і вынік будзе аднолькавым на серверы і кліенце.
182+
Гэта вельмі складана гарантаваць праз інкрэментальны лічыльнік, бо парадак, у якім кліент робіць гідратацыю кампанентаў, можа не адпавядаць парадку, у якім сервер складае HTML. Карыстаючыся `useId`, можна гарантаваць, што гідрадацыя спрацуе, і вынік будзе аднолькавым на серверы і кліенце.
183183
184-
Унутры React, `useId` генеруецца на падставе размяшчэння бацькоўскага кампанента». Менавіта таму, калі дрэвы кліента і сервера ідэнтычныя, «размяшчэнне бацькоўскага кампанента» будзе адпавядаць незалежна ад парадку рэндара.
184+
Унутры React, `useId` генеруецца на падставе размяшчэння бацькоўскага кампанента». Менавіта таму, калі дрэвы кліента і сервера ідэнтычныя, «размяшчэнне бацькоўскага кампанента» будзе супадаць незалежна ад парадку рэндара.
185185
186186
</DeepDive>
187187
@@ -253,7 +253,7 @@ function PasswordField() {
253253
/>
254254
</label>
255255
<p id={passwordHintId}>
256-
Пароль мусіць змяшчаць як найменш 18 сімвалаў
256+
Пароль мусіць змяшчаць як мінімум 18 сімвалаў
257257
</p>
258258
</>
259259
);

0 commit comments

Comments
 (0)