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
Copy file name to clipboardExpand all lines: src/content/learn/render-and-commit.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -28,14 +28,14 @@ React павінен адрэндэрыць вашы кампаненты пер
28
28
<Illustrationcaption="Рэндэрынг"alt="Шэф дае React свежы экземпляр кампанента Card."src="/images/docs/illustrations/i_render-and-commit2.png" />
29
29
<Illustrationcaption="Фіксацыя"alt="React дастаўляе кампанент Cart карыстальніку за яго сталом."src="/images/docs/illustrations/i_render-and-commit3.png" /></IllustrationBlock>
30
30
31
-
## Этап 1: Ініцыяцыя рэндэрынгу {/_step-1-trigger-a-render_/}
31
+
## Этап 1: Ініцыяцыя рэндэрынгу {/*step-1-trigger-a-render*/}
32
32
33
33
Рэндэр кампанента адбываецца па дзвюх прычынах:
34
34
35
35
1. Гэта яго **першапачатковы рэндэр**.
36
36
2. Яго **стан** (або стан яго бацькоўскіх кампанентаў) **быў абноўлены**.
37
37
38
-
### Першапачатковы рэндэр {/_initial-render_/}
38
+
### Першапачатковы рэндэр {/*initial-render*/}
39
39
40
40
Калі ваша праграма запускаецца, неабходна запусціць першапачатковы рэндэрынг. Фрэймворкі і пясочніцы часам хаваюць гэты код, але першапачатковы рэндэр робіцца шляхам выкліку функцыі [`createRoot`](/reference/react-dom/client/createRoot) з мэтавым DOM-вузлом, а затым выклікам яго метаду `render` з вашым кампанентам:
41
41
@@ -64,7 +64,7 @@ export default function Image() {
64
64
65
65
Паспрабуйце закаментаваць выклік `root.render()` і ўбачыце, як кампанент знікне!
66
66
67
-
### Паўторны рэндэр пры абнаўленні стану {/_re-renders-when-state-updates_/}
67
+
### Паўторны рэндэр пры абнаўленні стану {/*re-renders-when-state-updates*/}
68
68
69
69
Пасля таго як кампанент быў першапачаткова адрэндэраны, вы можаце ініцыяваць наступныя рэндэры, абнаўляючы яго стан з дапамогай функцыі [`set`.](/reference/react/useState#setstate) Абнаўленне стану кампанента аўтаматычна ставіць яго ў чаргу на рэндэр. (Гэта падобна на наведвальніка рэстарана, які пасля першапачатковага заказу, дазаказвае сабе чай, дэсерт і разнастайныя рэчы, у залежнасці ад стану смагі ці голаду.)
70
70
@@ -73,7 +73,7 @@ export default function Image() {
73
73
<Illustrationcaption="...запускае..."alt="React вяртаецца на кухню кампанентаў і кажа шэфу, што яму патрэбны ружовы Card."src="/images/docs/illustrations/i_rerender2.png" />
74
74
<Illustrationcaption="...рэндэр!"alt="Шэф дае React ружовы Card."src="/images/docs/illustrations/i_rerender3.png" /></IllustrationBlock>
75
75
76
-
## Этап 2: React рэндэрыць вашы кампаненты {/_step-2-react-renders-your-components_/}
76
+
## Этап 2: React рэндэрыць вашы кампаненты {/*step-2-react-renders-your-components*/}
77
77
78
78
Пасля запуску рэндэру React выклікае вашы кампаненты, каб вызначыць, што паказаць на экране. **«Рэндэрынг» — гэта калі React выклікае вашы кампаненты.**
Прадвызначаныя паводзіны, пры якіх адлюстроўваюцца ўсе кампаненты, укладзеныя ў абноўлены кампанент, не з'яўляюцца аптымальнымі з пункта гледжання прадукцыйнасці, калі абноўлены кампанент знаходзіцца вельмі высока ў дрэве. Калі вы сутыкнуліся з праблемай прадукцыйнасці, то ёсць некалькі спосабаў яе вырашэння, апісаных у раздзеле [Прадукцыйнасць](https://reactjs.org/docs/optimizing-performance.html). **Не аптымізуйце раней часу!**
144
144
145
145
</DeepDive>
146
146
147
-
## Этап 3: React фіксуе змены ў DOM {/_step-3-react-commits-changes-to-the-dom_/}
147
+
## Этап 3: React фіксуе змены ў DOM {/*step-3-react-commits-changes-to-the-dom*/}
148
148
149
149
Пасля рэндэрынгу (выкліку) вашых кампанентаў React змяняе DOM.
150
150
@@ -193,7 +193,7 @@ export default function App() {
193
193
194
194
Гэта працуе, таму што падчас апошняга кроку React абнаўляе толькі змесціва `<h1>` новым значэннем `time`. Ён бачыць, што `<input>` з'яўляецца ў JSX у тым жа месцы, што і ў мінулы раз, таму React не чапае `<input>` ці яго `значэнне`!
Пасля таго як рэндэр завершаны і React абнавіў DOM, браўзер перамалёўвае экран. Хоць гэты працэс і вядомы як «браўзерны рэндэрынг», мы будзем называць яго «маляваннем», каб пазбегнуць блытаніны ў дакументацыі.
0 commit comments